ブログをHugo+Netlifyに載せ替えました

このブログはConoHa VPS上に載せたWordPressで動かしていたんですが、こまめにバージョン上げるのも大変だし、書くためにダッシュボードにいくのもめんどいし…… ということで、静的サイトジェネレータに載せ替えることにしました。

移行した構成は以下のような感じです。

• WordPressの過去記事をwordpress-to-hugo-exporterで変換して archives 以下に配置
• esa.ioから書いた記事をGitHub Webhookでposts以下に配置
• Hugoでまとめてビルドし、Netlifyから配信

という感じにしました。

これにより、過去記事は同じURLに残したまま、今後はesa.ioの特定カテゴリ以下に記事を作るだけでブログが更新できます。

便利ー。

まぁ例によって色々引っかかったり諦めたこともあるので、そのへんをぼちぼちと書いていきます。

🤔 そもそもなんでHugo？

Hexoとか Jekyllも試したんですが、圧倒的にビルドが早く、開発時の体感が段違いに良かったです。

ローカルで hugo server を叩くと一瞬でサーバが立ち上がります。さすがGo製。

あとNetlifyが標準で対応しているので、とくに前準備せずとも勝手にビルドしてくれるのがめちゃくちゃ楽でした。

ちなみにGatsbyJSもちょっと試したんですが、エクスポートした過去記事のMarkdown/HTML構造が壊れているっぽく全然起動しなくなったので諦めました。

コンテンツを1から書けば問題なさそうなのと、JAM Stack構成は面白そうなので、ポートフォリオサイトあたりでリベンジしたいですね。

😥 困ったこと

過去記事のMarkdownが一部壊れていた

過去記事をエクスポートしてみた結果、一部の記事が派手にぶっ壊れました。

Amazonのリンクを画像つきでいい感じに表示するツールを使っていたのですが、どうも生成されたHTMLで一部の閉じタグが抜けていた模様……

その結果、Markdownへのエクスポート時に不要なインデントが入り、そのテーブル以降が全て引用表示になってしまいました。

テーブル周りは他にも引用符が閉じきってないなど色々問題が多く、機械的に直すのも難しそうだったので、諦めて手で直して回りました……

この作業が一番つらかった……

GitHub WebhookのFrontmatter形式

esa.ioからGitHub Webhookで配置するファイルには、自動でFrontmatterのメタ情報が入ります。

ただこのメタ情報のうち、tagsとcategoriesがHugoからうまく認識できませんでした。

というかタグを入れるとビルドできなくなりました。

調べたところ、esa.ioから出力されるのはカンマ区切り文字列なのですが、Hugoから認識するためには[]でくるまないといけない模様。

これについては、ビルド前に各記事に変換処理をかける、という原始的な方法で対処しています。

#!/bin/bash

echo "start translate"
sed -r "s/^category: ([^\[]+)$/categories: \[\1\]/g" -i content/posts/*
sed -r "s/^tags: ([^\[]+)$/tags: \[\1\]/g" -i content/posts/*
echo "finish"

この辺の設定についてesa.ioの中の人に問い合わせたところ、Frontmatter部分はいずれカスタマイズできるようにしていきたいとのこと。

まぁ、そもそもβ提供の機能ですし、今後に期待ですね。

💪 工夫したこと

プレビュー環境

esa.ioからShip Itで即ブログ公開、となるとデザインの確認ができないので、プレビュー用の環境を作りました。

Netlifyのブランチデプロイ機能を使っても良かったのですが、HugoだとbaseURLを使ってリソースを取りに行くため微妙にアイコンが出なかったりします。

このため、Netlify上で別サービスにしたプレビュー環境を構築しました。

esa.ioでShip ItするとmasterブランチにMarkdownが配置され、プレビュー環境にデプロイされます。

プレビュー環境を確認して問題なければ、以下のようにSlackでボットに話しかけるとreleaseブランチが更新され、本番環境に公開されます。

このためだけにRuboty使うのもどうなんだ、という気はしないでもないですが、Ruboty便利だし……

タイムラインのアイコン

新しいデザインはbilberry-hugo-themeを使っています。

このデザインだとタイムライン上に記事が並び、各記事に内容を表すアイコンが出ています。

このアイコンは「各記事のFrontmatterで定義されたtype」によって変わるようになっているんですが、esa.ioのWebHookではFrontmatterを自由に設定することができません。

このため、 layouts/partials/content-type/article.html を上書きして、カテゴリに応じたアイコンを出すようにしました。

<a class="bubble" href="{{ .URL }}">
    {{ if (eq (index .Params.categories 0) "ゲーム") }}
      {{ $.Scratch.Set "icon" "gamepad"  }}
    {{ else if (eq (index .Params.categories 0) "プログラミング") }}
      {{ $.Scratch.Set "icon" "code"  }}
    {{ else if (eq (index .Params.categories 0) "サーバー管理") }}
      {{ $.Scratch.Set "icon" "server"  }}
    {{ else if (eq (index .Params.categories 0) "イベント") }}
      {{ $.Scratch.Set "icon" "calendar"  }}
    {{ else if (eq (index .Params.categories 0) "雑記") }}
      {{ $.Scratch.Set "icon" "comment"  }}
    {{ else }}
      {{ $.Scratch.Set "icon" "book" }}
    {{ end }}
    <i class="fa fa-fw fa-{{ $.Scratch.Get "icon" }}"></i>
</a>

<article class="default article">
    {{ partial "featured-image" . }}
    {{ partial "default-content" . }}
    {{ partial "article-footer" . }}
</article>

あとはesaで ブログ/プログラミング/xxx のような記事を書けば、プログラミングカテゴリになって fa-code のアイコンが出るようになります。

switch文を使いたいところですが、Hugoのテンプレート内では使えなさそうなので諦めました。

🙈 諦めたこと

Featured Image

アイキャッチ画像的なのをうまいこと設定したかったんですが、Frontmatter弄れないうえesa.ioで貼り付けた画像はAWSにいくのでResourcesからも取れませんでした。

これはもう一旦諦めて、Twitterカードなどにはとりあえず自分のアイコンが出るようにしています。

ちょっと主張が激しいですが、まぁゆめみちゃん可愛いので……

コメント欄・サイドバー

コメント欄はやろうと思えば静的サイトでも付けれるんですが、いまどきブログのコメント欄に書くよりTwitterとかはてブに書くでしょ、ってことでコメント欄は閉じました。

またカレンダーとか検索もまず使わんな、ということでサイドバーもないデザインに。

SNSへの投稿機能だけは欲しかったので、AddThisを使ってSNSボタンを各記事に付けています。

プレビュー環境の認証

プレビュー環境にはBasic認証くらいかけようかと思ったんですが、Netlifyはフリープランだと認証使えないんですよね……

まぁ、robots.txtで弾いてるし、仮に見られても困るわけではないので諦めました。

💬 感想

この記事をざっとesa.ioで書いてたんですが、やっぱり圧倒的に書きやすいです。 最近はメモなども個人esaにまとめるようにしているので、書く場所が一箇所にまとまるのもすごく楽です。

esa上だとザクザク書きやすいので、音楽性が合うサービスを使うのは大事だな、という感じがします。

あと、Netlifyめっちゃ便利です。 ドメイン設定したら自動でHTTPSにしてくれるし、mixed contentsも警告出してくれるので順に潰すだけでHTTPS化完了できました。

ブログをマメに更新したいといいつつ全然できてなかったんですが、これなら書きやすそうな感じがするので、今後は開発以外のこともちまちま書いていきたいと思います。