はてなブログと Qiita の記事を Hugo + GitHub Pages へ移行した

Posted on Mar 29, 2020

これまではてなブログと Qiita に書いていた記事を、Hugo で生成して GitHub Pages でホスティングしているこの自前ブログへ移行した。

リポジトリも公開してある: dtan4/blog-ja

今後似たようなことをしたい人のために、移行手順を書き残しておく。

ブログのセットアップ

Quick Start | Hugo に沿ってブログの土台を用意した。テーマは Hugo Themes で見つけた Pickles をもとに、テンプレートを少し弄った (記事一覧でのサマリ表示廃止、記事ページに Tweet button 設置) ものを使っている。

まずは x-motemen/blogsync を使って、記事の Markdown をダウンロードしてくる。このまま Hugo に持っていっても独自記法や front matter はそのまま使えないので、以下の作業を追加で行う。複数記事を一括編集する必要があったので、適宜シェルスクリプトを書いた。

front matter を Hugo compatible に書き換える (format.sh)
[<URL>:embed:site] なリンクを plain URL に書き換える
- こういうやつ: [https://github.com/dtan4/spotdog:embed:cite]
はてなフォトライフにアップロードしていた写真をリポジトリ内にダウンロードし、リンクも Markdown に書き換える (replace-fotolife.sh)
- こういうやつ: [f:id:dtan4:20170709174052p:plain]
[<URL>] なリンクから [] を外して plain URL に書き換える (replace-bracketed-urls.sh)
他のクラウドにアップロードされていた画像をダウンロードし、リンクを書き換える (replace-cloud-images.sh)
- GitHub (raw.githubusercontent.com) とか、Dropbox に Public でアップロードしてあったやつ
各記事に hatenablog タグをつける
はてなブログ元記事へのリンクを記事内に書く (add-ref.sh)

ちょうどいいタイミングで tenntenn/qiitaexporter が公開されたので、これを使ってインポートした。 qiitaexporter は以下のことをやってくれるので、工数が減り便利。

ついでにやったのは、

だけ。

GitHub Actions を使って、master branch に merge したら自動で GitHub Pages (gh-pages branch) へ公開されるようにした。

一旦 https://dtan4.github.io/blog-ja でアクセスできるのを確認したあとは、Managing a custom domain for your GitHub Pages site - GitHub Help を参考に、カスタムドメイン https://blog-ja.dtan4.net で公開する設定を行う。

GitHub Pages でカスタムドメインを設定して
(自分の場合は) Route 53 で CNAME レコード作って
GitHub に戻って “Enforce HTTPS” にチェックを入れてしばし待つ
static/CNAME をリポジトリに置く
- これを忘れると、デプロイのたびに GitHub Pages のカスタムドメイン設定が無効化される (gh-pages branch から CNAME が消える) ことになる
- ref: Host on GitHub | Hugo

一旦ここで終わり。 Favicon 設定とか旧ブログのクリーンアップとか残っているけど、気が向いたらやる。