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のサイトで利用するスターター(テンプレートのようなもの)を選びましょう!

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 develop


GitHubにコミット

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シリーズ)

(楽天市場の場合はこちら)