まだWordPressで消耗してるの？Netlify CMSでブログを作成しよう！

この記事は[群馬大学電子計算機研究会 IGGG Advent Calendar 2017](https://adventar.org/calendars/2300) 7日目の記事です
---
<img width="1118" alt="Ｎｅｔｌｉｆｙ CMS" src="https://qiita-image-store.s3.amazonaws.com/0/11191/86d21dbf-efbf-92e1-28f2-81cf57d7612e.png">


みなさん，**ブログ**書いてますか？

- [ ] 「はてなブログ」などのブログサービスをレンタルしている👊
    - ❌️ 指定されたテンプレートやドメインのみで満足していますか？

- [ ] 「WordPress」などのブログシステムをサーバに設置して公開している👊
    - ❌️ セキュリティ対策を行うコストや，スパムコメントの対策に困っていませんか？
    - ❌️ アップデートの心配はありませんか？本当にWordPressが必要な規模ですか？

- [ ] 「Hexo」などの静的サイトジェネレータで生成した記事群をGitHub Pagesへデプロイしている👊
    - ❌️ 独自ドメインを利用する際にCDN経由でSSLを適用できますが，設定がめんどくさくないですか？
    - ❌️ 複数人でブログを運営している場合，Gitに慣れていない人はどうすればよいでしょうか？
    - ❌️ **好きなエディタで書けばいいや，と思ってもなかなか書いてGit操作が面倒くさくなりませんか？**
    - ✅️ 好きなときにポエムを書きたい

すべての弱点を解決するCDNサービスである「Netlify」と「Netlify CMS」の強さをご紹介します．
※ 使ってみたい人は[今すぐ使ってみよう](https://qiita.com/atpons/items/6ad59bf852ddae0032e0#%E4%BB%8A%E3%81%99%E3%81%90%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)にデプロイボタンを設置してあります！

# なぜNetlify + Netlify CMSなのか

## Netlifyとは
無料から利用できる静的サイトのホスティングサービスです．
### 主な利点
- GitHubなどからの自動デプロイが可能
- Netlify CDNによる配信
- 標準でHTTP/2をサポート
- 独自ドメインの利用が可能(他社ネームサーバー/Netlify DNSの利用も可能)
- Let's EncryptによるSSLをサポート(自動更新)
    - Let's Encyrptだけでなく，自前の証明書もサポートしています．

## Netlify CMSとは
Netlify CMSは，静的サイトジェネレータの公開ディレクトリにファイルを設置するだけで，静的サイトジェネレータが管理画面を持っているかのような管理画面を表示して裏でGitリポジトリへのcommit/pushなどを自動で行ってくれるCMSです．

画像の追加や，任意のフィールドを埋めたMarkdownファイルを生成のサポートしています．

# JekyllのブログをNetlifyへデプロイする
今回はJekyllをNetlifyへデプロイする方法ですが，他のNetlifyがサポートする静的サイトジェネレータでも同様の手順でデプロイが可能です．

## Jekyllサイトを作成する
GitHubでリポジトリを作成後，以下の手順でJekyllサイトを作成します．詳しいJekyllやGitの取り扱い方はそれぞれのリファレンスを参照してください．もちろん，好きなテーマを探して導入することも可能です．

```shell-session
$ gem install jekyll
$ jekyll new test
$ cd test
$ git init
$ git remote add origin git@github.com:user/repo.git
$ git add .
$ git commit -m "init"
$ git push --set-upstream origin master
```

## Netlifyへデプロイする
- [Netlify](https://www.netlify.com/)へアクセスしてNetlifyへ登録します．
- ログインして「[New site from Git](https://app.netlify.com/start)」をクリックしたのち，GitHubへログインして当該リポジトリを選択します．
- ブランチ・ビルド時コマンド・公開するディレクトリを選択します．私の環境では以下の内容が自動的に入力されていました．

```
Branch to Deploy: master
Build command: jekyll build
Publish directory: _site
```
- Deploy Siteをクリックしてサイトをデプロイします．

## デプロイの確認や設定
Netlifyでデプロイを開始すると`hoge-fuga-1234ac`のようなサイト名を振られます．また，デプロイ時のログなどを参照できるので，もしビルドが失敗した場合はログを見ながら修正を加えていきましょう．
標準では`https://hoge-fuga-1234.netlify.com/`にアクセスすることでサイトを閲覧できます．サイト名は自由に編集することができますし，`サイト名.netlify.com`でアクセス可能です．

## 独自ドメインの設定
独自ドメインを所有している人であればデプロイしたサイトを独自ドメインで公開することができます．

- `Deploy settings`をクリックします．
- `Domain management` -> `Domains`を開きます．
- `Custom domain`の欄に独自ドメインを入力し`Save`します．
    - ここで，`Use Netlify DNS`を選択することができます．もし独自ドメインのネームサーバーを変更することができる環境であれば，Netlify DNSを利用できます．
    - そうでない場合は，指示に従いDNSにCNAMEレコードを追加します．
- 設定後に`hogefuga.example.com is being served by Netlify.`となっていればOKです．

## SSL(Let's Encrypt)の設定
Netlifyでは，Let's Encryptを使用したSSLの設定が可能です．また，HSTSによるHTTPSの強制の設定も可能です．また，自前証明書を利用することもできます．

- `Deploy settings`をクリックします．
- `Domain management` -> `HTTPS`を開きます．
- `Veryfy DNS configuration`をクリックしたのち，`Let's Encrypt certificate`をクリックすると自動的に証明書の適用が行われます．

また，発行したLet's Encryptによる証明書は自動的に更新が行われます．

`Force HTTPS`よりHSTSの設定が行えますので，特段理由が無い限りは有効にしておきましょう．

# Netlify CMSのインストール
設置したJekyllサイトにNetlify CMSを導入していきます．
Jekyllの場合，`/`(例に従うと`test`直下)に`admin`ディレクトリを設置します．
`admin`ディレクトリに，2つのファイルを設置します．

```index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <!-- Include the styles for the Netlify CMS UI, after your own styles -->
  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.css" />

</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script>
</body>
</html>
```

```config.yml
backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

publish_mode: editorial_workflow # Editorial Workflow

media_folder: "images/uploads" # Media files will be stored in the repo under images/uploads

collections:
  - name: "post" # Used in routes, e.g. /admin/collections/blog
    label: "Post" # Used in the UI
    folder: "_posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template i.e. YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
```

上記の設定を行うと，Netlifyが提供するGit Gateway APIを利用してGitHubの当該リポジトリへアクセスし，ブラウザ上から編集できるようになります．

## Netlify Identify の設定
### Identity を有効にする
- `Deploy settings`をクリックします．
- `Identity` -> `Identity Configuration`をクリックします．
- `Enable identity instance`をクリックします．
- `Registration preferences`においては`Invite only`にしておきます．これにより，許可されたユーザーのみが編集可能になります．
- `External providers`は`GitHub`を有効にしておきます．
- `Git Gateway`も同様に有効にしておきます．

### Netlify Identity Widgetを設置する
- `Build & Deploy` -> `Post processing`をクリックします．
- `Snippet injection`を開き，`</head>`直前に以下を挿入させます．

```html
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
```

## 動作を確認する
`https://hoge-fuga-123ac.netlify.com/admin/`にアクセスして，Netlify CMSが正常に動作することを確認します．
記事の追加・編集・削除を行うと自動的にGitHubでcommit/pushが行われ，Netlifyが自動的にCIしていると思います．
`config.yml`に`publish_mode: editorial_workflow`がある場合，下書き機能も利用可能です．

## config.ymlについて
### フィールドを追加する
`config.yml`の`collections`->`fields`を変更することによって，テンプレートが要求しているMarkdownのメタデータのフィールドを自由に埋めることができます．
例えば，テンプレートが`tags`を要求している場合，

```yaml
      - {label: "Tags", name: "tags", widget: "string"}
```
と追加すればよいです．

### Permalink を変更する
Permalink(Markdownファイル名)を変更したい場合，`config.yml`に

```yaml
      - {label: "Permalink", name: "permalink", widget: "string"}
```
を追加して`slug`の部分を

```yaml
    slug: "{{year}}-{{month}}-{{day}}-{{permalink}}" 
```
と書き換えればOKです．これにより，自由にPermalinkを書き換えることができます．

# 今すぐ使ってみよう
以下のボタンを押すと今回解説したJekyll + Netlify CMSに加え，[Kietaテーマ](https://poem.mzyy94.com/items/kieta-blog-theme)が導入されたJekyllサイトをデプロイできます．
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/atpons/jekyll-kieta-theme&stack=cms)
導入後，「Netlify Identity Widgetを設置する」ことと，`_config.yml`を適切に設定する必要があります．ぜひお試しください．

# 最後に
個人の技術ブログなどを設置してみたかったけれど，WordPressは嫌だとか，GitHub Pagesがちょっとと感じた方は，今すぐ移行しましょう．
そのようなブログであれば，**WordPressは消耗の対象**ですので，今すぐ使うのをやめましょう．
一方で静的サイトジェネレータは，記事数が増えたり画像の数が多かったりするとビルドに時間がかかったりすることもあります．そこら辺は注意が必要です．

# 参考リンク
- [IGGG Note](https://note.iggg.org/)
    - Netlify CMSを用いて構築されています
- [Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/quick-start/)
    - 詳しい説明はこちらにあります