Gatsby.js + Netlify + Githubを使ってJAM Stackなブログを作成・公開する

### はじめに
Gatsby.jsという静的サイトジェネレータで技術ブログを作成し、Netlifyというホスティングサービスでホスティングする流れを説明します。
[こんな感じのブログ](https://lumen.netlify.com/)を作るための手順を説明していきます。
ちなみにAudits(Chromeのパフォーマンス測定機能)でスコアを測った結果こんな感じになりました。
![スクリーンショット 2019-08-18 16.20.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/ed33673c-5536-4c65-b245-15b1c4cf59dd.png)


### Gatsby.jsとは
静的サイトを高速に構築することができるReact製の静的サイトジェネレータ。
細かい内容に関しては公式ドキュメントや、以下の記事が参考になります。
参考サイト：[Reactベース静的サイトジェネレータGatsbyの真の力をお見せします](https://qiita.com/uehaj/items/1b7f0a86596353587466)

今回は[gatsby-starter-lumen](https://github.com/alxshelepenok/gatsby-starter-lumen)と言うブログテンプレートを使用します。  
![スクリーンショット 2019-08-17 15.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/e0ccdac5-a741-7915-5520-45835a8718df.png)


### Netlifyとは
Githubと連携し、連携したソースをホスティングしてくれる静的Webホスティングサービス
基本無料
参考サイト：[高機能ホスティングサービスNetlifyについて調べて使ってみた](https://qiita.com/TakahiRoyte/items/b7c4d1581df1a17a93fb)

### 手順
#### 1.NetlifyにGatsbyのプロジェクトをデプロイ  
##### 1-1.[gatsby-starter-lumen](https://github.com/alxshelepenok/gatsby-starter-lumen)にアクセスし、下記の「Deploy to netlify」をクリックします。
<img width="952" alt="スクリーンショット 2019-08-17 22.49.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/f04df473-6809-dec9-9587-1c136493c78a.png">

#####1-2.Githubとアカウント連携を行います。
NetlifyはGithubのリポジトリを連携し、そのリポジトリのソースをホスティングするため、Githubのアカウント連携を行う必要があります。
<img width="952" alt="スクリーンショット 2019-08-17 22.52.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/766ba9fd-7d00-1979-a9eb-0f03510276b9.png">

#####1-3.リポジトリ名を決めます。
リポジトリ名を決めて、Save&Deployを押下すると、Githubにgatsby-starter-lumenのリポジトリが作成され、Netlifyでホスティングが開始されます。
注意点としてはリポジトリの公開設定がpublicに設定された状態で作成されるので、privateにしたい人はGithub上で設定を変更する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/27ed5068-7513-2e5e-0df0-7901473f7a0b.png)

#####1-4.動作確認
デプロイ後にNetlifyのログイン後の画面にURLが表示されていると思うので、実際にアクセスし表示確認を行う。
サイトを変更したい場合はSite settings -> Change site nameから変更可能
![スクリーンショット 2019-08-17 23.02.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/72547a18-bdda-ee10-6eb6-cff461e3eeb5.png)

#### 2.ローカル環境構築
#####2-1.Githubからソースをclone
1-3の手順でGithubにリポジトリが作成されているので、Cloneしてください。

#####2-2.Git, Node, npm, gatsby-cliのインストール
下記のリンクを参考にGit, Node, npm, gatsby-cliを導入してください。  
参考：[Set Up Your Development Environment](https://www.gatsbyjs.org/tutorial/part-zero/

#####2-3.ローカル環境の動作確認
Githubからクローンしたディレクトリに移動し、以下のコマンドを実行します。

```
cd ●●● # Gatsbyのプロジェクトディレクトリ
npm install
gatsby develop # 開発サーバを起動
```
localhost:8000にアクセスし、ブログが表示されるか確認

#### 3.プロフィール変更や記事の投稿手順

#####3-1.サイドメニューの情報変更
サイドメニューのプロフィールを自分自身の情報に書き換えていきましょう。
![スクリーンショット 2019-08-17 23.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/4f1c7575-95bc-32fc-195e-02b6fb4c2a53.png)
プロフィール情報はconfig.jsで管理しているため、各パラメータを書き換えていきます。
連絡先を示すアイコンを消す場合はconfig.jsとuse-site-metadata.jsから該当のパラメータを削除する必要があります。
以下のソースでは「telegram」「rss」「vkontakte」を削除しています。
修正後は「gatsby develop」コマンドを実行します。

```config.js
# 修正イメージ
-----省略-----
  author: {
    name: 'test',
    photo: '/test.jpg',
    bio: 'Test',
    contacts: {
      email: 'test@gmail.com',
      twitter: 'test',
      github: 'test'
    }
  }
-----省略-----
```

```use-site-metadata.js
-----省略-----
contacts {
  email
  twitter
  github
}
-----省略-----             
```

![スクリーンショット 2019-08-17 23.40.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/be0aba06-2f1d-7346-216c-2c3031930db3.png)

このようにアイコンやプロフィール名が書き換わっていることが確認できます。

####3-2 記事の投稿
以下のディレクトリにMarkdown形式のファイルを作成することで、記事を作成することができます。
試しに以下のmdファイルを作成してみます。
/content/posts/

```2019-08-16---test.md
---
title: "タイトルテスト"
date: "2019-08-17T23:46:37.121Z"
template: "post"
draft: false
slug: "/posts/test/"
category: "JS"
tags:
  - "Tech"
  - "Gatsby.js"
  - "JS"
description: "test!"
---

### テスト
+ テスト
+ テストっと
```
こんな感じで記事が作成されます。
![スクリーンショット 2019-08-17 23.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126215/92dc1044-01ff-67a0-5897-efdd3188ba07.png)

3-3:Git pushし、Netlifyに反映
記事の作成やプロフィールの変更後にGit pushを行うと自動的にNetlifyの方にも反映されるようになっています。
Netlify便利ですね。