💾

【第1回】GatsbyJS+Netlifyでブログを始める方法

今回はNode・npm・Gitのインストール方法を紹介します。またインストールしたnpmを使ってGatsbyJSをインストールする方法から、実際にローカル環境でブログを立ち上げる方法までを紹介します。


Node・npm・Gitのインストール

Node・npmのインストール

image1

Nodeのインストール方法はいくつかありますが、今回は一番簡単な公式サイトからのインストールをします。

推奨版と最新版がありますが、正直どちらでも大丈夫だと思います。不安な場合は推奨版をダウンロードすると良いと思います。Nodeをインストールするとnpmも一緒にダウンロードできます。 (僕は推奨版を入れました)


インストール後、下のコマンドをコマンドプロンプト(Windows)・ターミナル(Mac)で実行します。

node --version
npm --version

それぞれバージョンが表示されたらインストール成功です。

Gitのインストール

image2

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にアクセスして確認してみてください。また、ローカルで立ち上げているだけなので他の端末では原則見ることは出来ません。接続を切りたいときは、コマンドプロンプト・ターミナルを終了するだけで大丈夫です。


次回はテーマのカスタマイズについて紹介します。








WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation