Hugo + Netlify CMS

これは ████████ Advent Calender █日目の記事です.

概要

部活の後輩が note.iggg.org に Netlify CMS を導入して執筆ハードルを下げるなどしていた.SSG だけど Web ブラウザから編集できる,みたいなのが面白いなあと思いながらそれを見ていた.

そこからしばらく空いたんですけど,なんだかいつのまにか 12 月になってしまったし,研究のあいまの気分転換にひとり Advent Calender くらいのノリで毎日なにか書いていこうと思ったときに Netlify CMS の存在を思い出して,自分でも立てようと頑張ったことの記録です.

やったこと

SSG の選定

何種類かの SSG をサポートしているように見えたので悩んだ.
結局どれでもいいしテーマとかテンプレートエンジンとかで選べば,とアドバイスされたので HTML 生成が早いらしい Hugo を使ってみることにした. ぶっちゃけ選定ミスった〜ってあとから思ったとしても記事自体は Markdown なんだし別の SSG 立てて食わせればいいだけなので,あんまり深くは調べてない.

Hugo のセットアップ

https://gohugo.io/getting-started/quick-start/ を参考に,Hugo とテーマをインストール.

% go get -v github.com/gohugoio/hugo
% hugo new site hugo-netlify-cms
% cd hugo-netlify-cms
% git init
% git submodule add https://github.com/masa0221/hugo-theme-geppaku.git themes/geppaku

config.toml を次のように編集した:

baseURL = "https://text.gion.me/"

title = "text.gion.me"

languageCode = "ja"
hasCJKLanguage = "true"

theme = "geppaku"

新規記事をつくる:

% hugo new post/my-first-post.md

content/post/my-first-post.md を編集.ここで draft: truefalse にしておく.

HTML を生成:

% hugo server
http://localhost:1313 でローカルのテスト環境にアクセスして生成結果を確認できる.

netlify.toml ファイルに使う Hugo のバージョンを書いておく:

[context.production.environment]
  HUGO_VERSION = "0.31.1"

最後に GitHub にプッシュしておく.

% git remote add origin git@github.com:gion-xy/hugo-netlify-cms.git
% git push -u origin master

Netlify への自動デプロイ設定

先にNetlify でアカウントを作っておく.

“New site from Git” から “GitHub” を選択して認証を行い,リポジトリの一覧からさっきプッシュしたリポジトリを選ぶ. “Build command” には hugo,”Publish directory” には public を入力して “Deploy site” をクリック.しばらく待ってると勝手にデプロイされる.

デプロイ完了

こんなのが出るので URL のところをクリックするとデプロイされたことを確認できる.

netlify.com 以下のサブドメインを好きなのにしたいなら “Site settings” から “Site name” を変更する. 独自ドメインを割り当てたいなら “Domain settings” の “Custom domain” で設定. そのあとに “HTTPS” 欄を読みながらボタンを押していくと Let’s Encrypt の証明書をもってきて SSL を勝手にいい感じに設定してくれる.

Netlify CMS の導入

リポジトリに こんな感じ の changeset を適用すればいい. いますごく雑な説明をしました.ちなみに適用したテーマによって fields: の項目はいじるべきだと思う.僕は適当にやったのでいらなそうなのが混じってます.あとで直す.

変更をプッシュすると https://サイト/admin にログインページが生えてるのが確認できる.ただこの段階で “LOGIN WITH GITHUB” をクリックしても OAuth Provider を設定してないので何もできない.

https://github.com/settings/developers へ行き “New OAuth App” をクリック.
“Authorization callback URL” だけ https://api.netlify.com/auth/done とする.あとは好きにして “Register Application”. ここで表示される “Client ID” / “Client Secret” を覚える.というかタブを開いておけばいい.

Netlify 管理画面の “Settings” → “Access Control” の下のほうに “OAuth” の項目があって,そこに “Install Provider” というボタンがあるのでこれをクリックする.
“Provider” を “GitHub” にして,”Client ID” と “Secret” にさっきの “Client ID” と “Client Secret” をそれぞれコピーして “Install”. https://サイト/admin のボタンを押して認証すると管理画面っぽいのに入れます.おめでとう.あとは雰囲気でやっていきましょう.僕もまだよくわかってない.

導入して気づくこと

  • なんだかわからないけど Editorial Workflow がうまく働かない
  • 編集画面がつらい
    • 微妙に文字入力にラグがある
    • 当然っちゃ当然なんだけど Hugo の shortcode とかはリアルタイムプレビューでは解釈できずに悲しい感じになる
    • Mac の Cocoa キーバインドが微妙に食われる,C-k とか
    • などなど……

まとめ

  • Netlify 自動デプロイはめちゃ便利
    • 独自ドメイン + SSL + HSTS が一瞬で設定できるのは感動
  • Netlify CMS は手元で SSG ビルドできない人向けのツールだなという感想
    • わかるひとは慣れたエディタで編集してビルドしてプレビュー,のルーチンのほうが早そう

という身も蓋もない感じになってしまいました. まあこういうのってたいていちょっとさわってスゴい!みたいな記事しかなかったりするし,手放しに勧めるもんでもないというのがわかったのが収穫って感じでいいんじゃないでしょうか.

今後

ブログサイトができただけって感じで足りないところは多いので

  • Analytics 導入
  • コメント欄の設置

とかやりたいですね.

追伸

カレンダー,明日の担当も僕です.

comments powered by Disqus