フロント初心者がGatsbyでBlogを公開・運用するまで ~プロジェクト作成から公開の確認編~

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

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

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

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

```shell
# npm 
$ npm install --global gatsby-cli
```

```shell
# yarn
$ yarn global add gatsby-cli
```

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

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

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

```shell
# 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](https://www.gatsbyjs.org/starters/?v=2)』から好きなものを選ぶことができます。
今回は、NetlifyCMSでHostingする予定なので、『[gatsby-starter-netlify-cms](https://www.gatsbyjs.org/starters/netlify-templates/gatsby-starter-netlify-cms/)』を使っていきます。

```shell
# 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`にアクセスするだけです。
<img width="1792" alt="localhost-8080.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/2f0ffe5a-3bf6-5160-7af3-5eaa23218ebc.png">


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

# 静的サイトのHosting
### [Netilfy CMS側の準備]
次に静的サイトのHostingを行っていきます。
今回は、[Netlify CMS](https://www.netlifycms.org/)を使っていきます。
Netlify CMSを初めて使うので、最初はお試しでGetting Startの内容に沿って、Hostingしていきます。

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


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

[Netlify CMS](https://www.netlifycms.org/)に移動します。
<img width="1792" alt="netlify-start.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/817a246f-992f-2132-231a-24a5ae038bb2.png">

[GET STARTED]をクリックします。
<img width="1792" alt="netlify-getstart.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/0a1cf1b6-8b1f-2681-1f50-577373a99718.png">

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

<img width="1792" alt="github-conn.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/b0ea8ea7-6d7a-4448-abf7-204727314a76.png">

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

<img width="1792" alt="net-githubrepo-new.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/c2b8876a-dc7c-407b-890f-3c75abfc7d76.png">

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

<img width="1792" alt="sample-hositing.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/68fbb1ef-97b8-3740-afea-7cafcf97faba.png">

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


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

```shell 
# 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]をクリックして、連携するサイトを選択します。
<img width="1240" alt="new-site.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/5d403bf8-155b-7239-ecca-caa48c4f0a27.png">

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

<img width="1231" alt="connect-repo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/e6c87b3f-3a5f-170f-f611-0189421289da.png">

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

<img width="545" alt="one-select.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/7e3f7ab5-9f61-336f-f148-f3948c29785c.png">

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

<img width="815" alt="deploy-setting.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/eb6f4261-24b6-8765-fdff-b75cfc117a7c.png">

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

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

<img width="1792" alt="sample-hositing.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198150/68fbb1ef-97b8-3740-afea-7cafcf97faba.png">

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