【第1回】GatsbyJS+Netlifyでブログを始める方法
今回はNode・npm・Gitのインストール方法を紹介します。またインストールしたnpmを使ってGatsbyJSをインストールする方法から、実際にローカル環境でブログを立ち上げる方法までを紹介します。
Node・npm・Gitのインストール
Node・npmのインストール
Nodeのインストール方法はいくつかありますが、今回は一番簡単な公式サイトからのインストールをします。
推奨版と最新版がありますが、正直どちらでも大丈夫だと思います。不安な場合は推奨版をダウンロードすると良いと思います。Nodeをインストールするとnpmも一緒にダウンロードできます。 (僕は推奨版を入れました)
インストール後、下のコマンドをコマンドプロンプト(Windows)・ターミナル(Mac)で実行します。
node --version
npm --version
それぞれバージョンが表示されたらインストール成功です。
Gitのインストール
Gitも公式サイトからインストールできます。
これもNodeと同じようにインストールできたかどうかをを確認します。下のコマンドでバージョンが表示されたらインストール成功です。
git --version
GatsbyJSのインストール
先程インストールしたnpmを使って下のコードでGatsbyJSをインストールします。
npm install -g gatsby
Nodeのときと同じようにインストールできたかどうか確認します。バージョンが表示されればインストール成功です。
gatsby --version
npmのエラーでGatsbyJSがインストールできない場合は下の記事で紹介している対処法を試してみてください。僕自身エラーが出てかなり焦ったので、下手にいじるよりも解決法を模索したほうがいいです。
ブログをローカルで立ち上げる
ここからはインストールしたGatsbyJSを使ってブログを作っていきます。まずは下のコードです。
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
gatby
で変数を設定(?)し、new
で新規作成、blog
でプロジェクト名を設定し、https://...
でテーマをインストールします。フォルダーの名前を変えたい場合はblog
の部分を変えてください。また今回テーマはgatsby-starter-blog
を使います。興味がある人は他のテーマも使ってみてください。
しばらくしてインストールが終わったら、下のコマンドで立ち上げます。
cd blog
gatsby debelop
cd
で移動し、gatsby develop
で立ち上げます。プロジェクト名を変えている場合はblog
の部分を変えてください。コマンドの動作が終わってi 「wdm」: Compiled successfully.
と表示されたら立ち上げ成功です。
http://localhost:8000にアクセスして確認してみてください。また、ローカルで立ち上げているだけなので他の端末では原則見ることは出来ません。接続を切りたいときは、コマンドプロンプト・ターミナルを終了するだけで大丈夫です。
次回はテーマのカスタマイズについて紹介します。