はじめに

フロント初心者がGatsbyで試行錯誤しながら、Blogを作成・運用したのでそのまとめです。
Gatsbyの使い方からNetlify CMSを使った公開・運用までを2~3回に分けて書いていきたいと思います。

Blog作成の経緯

元々、「Gatsbyって凄いらしいし、使ってみたいなぁ。」とは思っていましたが、作りたいと思えるものがなかったため、特に何もせず1年が終わろうとしていました。
そんな中お正月に実家に帰省すると、母から「Blogを始めたいんだけど、どうすればいい？」と言われたのをきっかけに「じゃあ、ホームページ兼Blogを作ったるよ！」という話になったのがきっかけです。

Gatsbyって何?

Gatsby.jsはReactベースの「静的サイトジェネレーター」の一つでコンテンツ管理システムの一種です。
コンテンツ管理システムとして有名なWordPressとの大きな違いは、ビルド時にHTMLを生成して、リクエストを返却します。
詳しくは『Reactベース静的サイトジェネレータGatsbyの真の力をお見せします』こちらの記事が非常に分かりやすくてオススメです！

Gatsbyのインストール

まずはGatsbyのインストールをしていきます。
npmとyarnによって、微妙にインストール方法が違います。
今回は個別のプロジェクト内だけで使用するわけではないので、globalを指定してインストールしていきます。

# npm 
$ npm install --global gatsby-cli

# yarn
$ yarn global add gatsby-cli

インストールが完了しているはずなので、Versionを確認していきます。
下記のようにVersionが確認できれば、Gatsbyの準備はOKです。

# 表示されるVersionは個々人で異なります。
$ gatsby --version
Gatsby CLI version: 2.8.22
Gatsby version: 2.13.33

Gatsbyの開発環境構築

GatsbyCLIの準備ができたので、LOCAL環境の開発環境を構築していきます。
Gatsbyの開発環境構築は大きくわけて、Githubリポジトリを指定する方法と指定しない方法の2通りがあります。

# Githubパスを指定しない方法
$ gatsby new sample
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
...
...
success Saved lockfile.
✨  Done in 15.59s.
info
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd sample
  gatsby develop

Githubパスを指定しない方法では、自動的にgatsby-starter-default.gitのパスが指定されてLOCALにフォルダが作成されます。
これだけでも十分に簡単にプロジェクトを始めていくことができますが、自分の目的にあったStarterを選択することで、より簡単にプロジェクトを開始することができます。
Starterは『Starter Library - Gatsby.js』から好きなものを選ぶことができます。
今回は、NetlifyCMSでHostingする予定なので、『gatsby-starter-netlify-cms』を使っていきます。

# Githubパスを指定する方法
$ gatsby new sample https://github.com/netlify-templates/gatsby-starter-netlify-cms
info Creating new site from git: https://github.com/netlify-templates/gatsby-starter-netlify-cms
...
...
success Saved lockfile.
✨  Done in 15.59s.
info
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd sample
  gatsby develop

指定パスからプロジェクトが作成されていることを確認できます。
あとは指定の通り、cd sampleでプロジェクトのフォルダに移動して、 gatsby developのコマンドを実行し、localhost:8080にアクセスするだけです。

ほとんど、CLIでコマンドを叩いているだけですが、こんな素晴らしいサイトが出来上がっています。
後は自分の好みに合わせて作り込んでいくだけです。

静的サイトのHosting

[Netilfy CMS側の準備]

次に静的サイトのHostingを行っていきます。
今回は、Netlify CMSを使っていきます。
Netlify CMSを初めて使うので、最初はお試しでGetting Startの内容に沿って、Hostingしていきます。

注意
NetlifyCMSを使ってHostingする場合には、NetlifyCMS用のStarterを選択するか、Pluginを追加する必要があります。
これを飛ばして作業を進めてしまうと/adminにアクセスできず、記事の投稿などをすることができないため、CMSとして役割を果たすことができません。
(Githubへ直接Pushするという方は問題ありません！！)

Netlify CMSへリポジトリの登録

まずはNetlify CMSとGithubの連携を行います。
(Githubに登録していない人は、Githubの登録から始めましょう！)

Netlify CMSに移動します。

[GET STARTED]をクリックします。

今回は、GatsbyのプロジェクトをHostingしていくのでGatsbyロゴの下にある、[Deploy to netlify]を選択します。

Githubの連携を求められるので、[Connect to Github]を選択して、Githubと連携します。

次に進むとHosting用のリポジトリを作成するように促されるので、リポジトリを作成します。リポジトリを作成すると、管理画面へ自動的に移動します。
・・・
・・
・
最低限のHostingに必要な作業はこれだけです。

新規で作成されたリポジトリを元にして、すでにサイトがHostingされています！
次は自作したプロジェクトのHostingを行っていきます。

Githubにリポジトリの作成とPush

[LOCAL環境準備]

Githubにリポジトリがないことには、何も始まらないので、兎にも角にもまずはリポジトリを作成します。
リポジトリができたら、RemoteをLOCALのリポジトリへ登録していきます。
その後に今回作ったプロジェクトをGithubへPushします。
gatsby newを実行した時点でLOCALのリポジトリは作成されているので、Push対象のRemoteを追加します。

# Remoteリポジトリの追加
$ git remote add origin git@github.com:atEaE/gatsby-blog-inaoka.git
# RemoteへPush
$ git push origin master

[Netlify CMSの準備]

Nelify CMSの準備といっても特別なことは特にしません。
最初に登録したリポジトリを使うか、後から登録したリポジトリを使うかの違い程度です。
まずは、[New site from Git]をクリックして、連携するサイトを選択します。

今回は、Githubにリポジトリを作成しているので、[Github]を選択します。

最初と同様に連携を求められるので、そのまま勧めていくとリポジトリの選択画面に移ります。
すべてのリポジトリをInstallしても構いませんが、時間がかかるので、Only select repositoriesにチェックをいれ、リポジトリを選択しましょう。

後は、Buildコマンド、公開用のフォルダを指定してあげればOKです。

今回はGatsbyを使用しているのgatsby buildが選択されていることを確認します。
公開用のフォルダルートは個々人によって異なるとは思いますが、Gatsbyのプロジェクトを使っている方はほとんどの人が public/になるかと思います。

後はDeployされたサイトへのアクセスを確認します。

確認できたので、ひとまずHostingの確認は完了です。
本当はカスタムドメインの設定、HTTPSのために証明書の設定等を行う必要がありますが、今回はここまでとします。