【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のようにテーマが準備されている感覚ですね
$ 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
で作成したブログが確認できます。
ブログを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
をクリック
githubを選択します。
デプロイしたいリポジトリを選択します。
Build Command の項目は自動的に gatsby build となっていますので、
そのままDeploy Siteボタンを押します。
これでデプロイ完了です。
この場合だと https://tamakipedia.netlify.app/ こちらにアクセスすると自分のブログが確認できるようになります。
おしまい