tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【gatsby.js】Gatsby.js Netlify を使ってブログを作ってみる

そろそろ自分のサイト作りたいと思っていたいので
気になっていたGatsbyを使ってみました!

gatsbyをインストールしてブラウザに表示する

まずgatsbyをインストールします。

$ npm install -g gatsby-cli

インストールできたかを確認

$ gatsby --help
zsh: command not found: gatsby

gatsby -hで動作確認しても上記のようにエラーが出ました。。
以下の二点を試すとうまく行ったのでもしエラーにかかった人は是非。

npm config delete prefix
npm config set prefix /usr/local

公式が専用のスターターを準備してくれていますので、好きなスターターを選択してnewします
wordpressのようにテーマが準備されている感覚ですね

f:id:okinawanpizza:20200921064823p:plain

$ gatsby new tamakipedia gatsby new gatsby-starter-lumen https://github.com/alxshelepenok/gatsby-starter-lumen

hello-worldがサイト名でhttps~がスターターのurlです。
スターターは以下のリンクから選択できます。
https://www.gatsbyjs.com/starters/?

作成したブログのディレクトリに移動してローカルで起動!

$ cd my-blog
$ gatsby develop

そうするとlocalhost:8000で作成したブログが確認できます。

f:id:okinawanpizza:20200921064154p:plain

ブログをGitHubにプッシュする

作成したブログをホスティングして公開してくれるサービスNetlifyを使うために、
まずはGitHubリポジトリを作ってプッシュします。

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourname/your-blog-name.git
git push -u origin master

Netlifyでホスティング

無料でホスティングしてくれるサービスNetlify https://www.netlify.com/ アカウントを登録してnew site from gitをクリック
f:id:okinawanpizza:20200921072711p:plain

githubを選択します。
f:id:okinawanpizza:20200921142543p:plain

デプロイしたいリポジトリを選択します。
f:id:okinawanpizza:20200921142606p:plain

Build Command の項目は自動的に gatsby build となっていますので、
そのままDeploy Siteボタンを押します。
f:id:okinawanpizza:20200921142640p:plain

これでデプロイ完了です。
f:id:okinawanpizza:20200921145837p:plain

この場合だと https://tamakipedia.netlify.app/ こちらにアクセスすると自分のブログが確認できるようになります。

おしまい

Gatsby公式
https://www.gatsbyjs.com/#gatsby-is-fast

Gatsby Starters
https://www.gatsbyjs.com/starters/?