Gatsby インストール
こんにちは！うしじです。
Gatsbyでのブログ作成について、1分でブログを作成する方法とブログの更新方法の記事を書きましたが、とにかく早く構築して公開することを優先させたため、ローカルPCへのGatsbyインストールを行わないまま進めてしまっています。
これでも更新できないことは無いのですが、やはりローカルPCにGatsbyをインストールした方が使いやすいです。
というか、Gatsbyのカスタマイズを考えると、インストールして、開発環境を整えないと難しいです。
本記事では、Gatsbyをインストールして、ローカルでブログを更新出来るようにするまでを書きたいと思います。
Gatsbyの公式ページにわかりやすいチュートリアルもあるので、参考になると思います。
環境のセットアップ
nvmのインストール
Gatsby.jsを使うには、Node.jsが必要になります。Gatsbyのチュートリアルに沿って、nodeをインストールしても良いのですが、Gatsbyのスターターによっては、nodeのバージョンに依存するものもあるようなので、nvmをインストールすることをお勧めします。
nvm（Node Version Manager）を使うことで、アプリケーションによって様々なバージョンのnodeを使い分けることができます。 nvmは、ターミナルで下記のコマンドを実行することでインストールできます。
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bashインストールの詳細については、公式ドキュメントをご参照ください。nvmのバージョンも変わっているかもです。
nodeのインストール
Gatsbyのページによれば、下記の記述があり、End of Lifeになっていなければ、どのバージョンでもサポートされるようです。
Gatsby aims to support any version of Node that has a release status of Current, Active, or Maintenance. Once a major version of Node reaches End of Life status Gatsby will stop supporting that version.
インストールするnodeのバージョンですが、LTS（Long-term support）のバージョンでいいのかなと思っています。 最新のLTSバージョンをインストールする場合は、下記のコマンドを実行してください。今回は、node v12.16.3です。
$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v12.16.3...
Downloading https://nodejs.org/dist/v12.16.3/node-v12.16.3-darwin-x64.tar.xz...
########################################################################################################################################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v12.16.3 (npm v6.14.4)Gatsbyのインストール
npmがインストールができたので、次はGatsbyのインストールです。下記のコマンドでインストールすることができます。
$ npm install -g gatsby-cliこれで、環境のセットアップ完了です。
ここからは、これまでの記事（ブログ作成方法、ブログ更新方法）で作成したブログをローカルで更新する方法と、新たにブログを作成する方法に分けて記載します。
1. 作成済みブログをローカルで更新する場合
※ブログ作成方法の記事をベースに、ブログ作成済みであることを前提にしています。作成されていない場合は、2. 新たにブログを作成する場合 を参照してください。
作成済みのGitHubリポジトリをローカルへクローン
GitHub上で作成済みのリポジトリをローカルに持ってきます。 "ushiji/gatsby-starter-delog"のところは、自身のGitHubのユーザー名とリポジトリ名に変更してください。
$ git clone https://github.com/ushiji/gatsby-starter-delog.gitクローンできたら、クローンしたリポジトリのフォルダに移動し、"npm ci"のコマンドを実行しましょう。必要なパッケージをインストールしてくれます。
$ cd gatsby-starter-delog
$ npm ci インストールが完了したら、下記のコマンドを実行してみてください。http://localhost:8000/ でブログを確認できると思います。
$ gatsby developこれで完了です！ローカルでブログを更新することができます。
2. 新たにブログを作成する場合
※1. 作成済みブログをローカルで更新する場合 を対応された場合は、読み飛ばしてください。
Gatsbyスターターを選ぶ
Gatsbyのサイトで利用するスターター（テンプレートのようなもの）を選びましょう！
機能とか色々書いてありますが、プラグインの追加等、後で自分でカスタマイズ可能です。
本記事では、https://github.com/W3Layouts/gatsby-starter-delog を用いています
ブログ作成
下記のコマンドを実行するだけで、スターターを用いてブログを作成可能です！ "my-blog" のところは、好きに変更して大丈夫です。
$ gatsby new my-blog https://github.com/W3Layouts/gatsby-starter-delogブログが作成出来たら、下記のコマンドで、http://localhost:8000/ でブログが起動出来ていることが確認できると思います。
$ cd my-blog
$ gatsby developGitHubにコミット
GitHubにリポジトリを作成し、コミットしておきましょう。
git init
git commit -m "first commit"
git remote add origin https://github.com/username/repositoryname.git
git push -u origin masterブログ更新
ようやくブログを更新できますね。 このスターターでは、MarkDownファイルで記事を追加することができます。
まずは、MarkDownファイルを追加します。
$ touch _data/blog/2020-05-23_blog-update.md追加したファイルにpath、date、title、thumbnail、本文を入力しましょう。
---
template: BlogPost
path: /blog-update
date: 2020-05-23T12:00:00.000Z
title: ブログ記事を追加します！
thumbnail: /assets/image-6.jpg
---
[Gatsby インストール](https://www.ushiji.online/gatsby-install) で追加した記事です。"gatsby develop"のコマンドで、http://localhost:8000/にアクセスすれば、実際のブログを確認しながら更新できます。
更新が終わったら、GitHubにコミットしましょう。Netlifyにデプロイしてあるのであれば、自動で更新内容が反映されます。
$ git status
$ git add -A
$ git commit -m 'added blog post'
$ git push -u origin master以上で、Gatsbyのインストールとブログの更新は完了です。
Gatsby ブログ作成記事一覧
Gatsby.jsでのサイト構築については、日本語の情報源が少ないのですが、6月に下記の書籍が発売されるようです。
Amazon | Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)
（楽天市場の場合はこちら）