この記事は群馬大学電子計算機研究会 IGGG Advent Calendar 2017 7日目の記事です

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

「はてなブログ」などのブログサービスをレンタルしている👊
- ❌️ 指定されたテンプレートやドメインのみで満足していますか？
「WordPress」などのブログシステムをサーバに設置して公開している👊
- ❌️ セキュリティ対策を行うコストや，スパムコメントの対策に困っていませんか？
- ❌️ アップデートの心配はありませんか？本当にWordPressが必要な規模ですか？
「Hexo」などの静的サイトジェネレータで生成した記事群をGitHub Pagesへデプロイしている👊
- ❌️ 独自ドメインを利用する際にCDN経由でSSLを適用できますが，設定がめんどくさくないですか？
- ❌️ 複数人でブログを運営している場合，Gitに慣れていない人はどうすればよいでしょうか？
- ❌️ 好きなエディタで書けばいいや，と思ってもなかなか書いてGit操作が面倒くさくなりませんか？
- ✅️ 好きなときにポエムを書きたい

すべての弱点を解決するCDNサービスである「Netlify」と「Netlify CMS」の強さをご紹介します．
※ 使ってみたい人は今すぐ使ってみようにデプロイボタンを設置してあります！

なぜ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の取り扱い方はそれぞれのリファレンスを参照してください．もちろん，好きなテーマを探して導入することも可能です．

$ 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へアクセスしてNetlifyへ登録します．
ログインして「New site from Git」をクリックしたのち，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>直前に以下を挿入させます．

<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を要求している場合，

      - {label: "Tags", name: "tags", widget: "string"}

と追加すればよいです．

Permalink を変更する

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

      - {label: "Permalink", name: "permalink", widget: "string"}

を追加してslugの部分を

    slug: "{{year}}-{{month}}-{{day}}-{{permalink}}"

と書き換えればOKです．これにより，自由にPermalinkを書き換えることができます．

今すぐ使ってみよう

以下のボタンを押すと今回解説したJekyll + Netlify CMSに加え，Kietaテーマが導入されたJekyllサイトをデプロイできます．

導入後，「Netlify Identity Widgetを設置する」ことと，_config.ymlを適切に設定する必要があります．ぜひお試しください．

最後に

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

参考リンク

IGGG Note
- Netlify CMSを用いて構築されています
Netlify CMS | Open-Source Content Management System
- 詳しい説明はこちらにあります