今日から8月末まで夏休み（という名の有休消化）に入ったので、Bloggerで運用していたこのブログをHUGOとGitLab Pagesを使った構成に移行してみました。
（作業自体は6月中もチマチマやっていたけど。。）
過去記事をMarkdown(Frontmatter)形式に変換
このサイトは、開設から5年くらい更新無し→Simple PHP Blog→PHPお手製→Bloggerで運用していました。
それらの記事は画像などと一緒にローカルPC上に保存されているので、手始めにPythonスクリプトでそれらをHUGOのMarkdown形式に変換しました。
- コンテンツのディレクトリー構成は
blog/YYYYMMDD-title/index.mdのような形でMarkdown（記事本文）と画像を記事タイトルディレクトリーに同居 - それらの変更に合わせて記事中のリンクを正規表現で一括置換
- ブックマークされている過去記事のURLはFrontmatterにaliasesを追加する事で対応
上記が済んだところで、VSCodeで1記事ずつプレビューして微調整を行いました。
HUGOのテーマを作成
次に、見た目を設定するためのテーマを作成します。
全体的なデザインはBlogger時代のものを基本的に踏襲し、それを再現する形でレイアウトテンプレートとCSSを実装しました。
コードブロックについては hugo gen chromastyles --style dracula で生成されたCSSを適用し、バナーやアイコン、OGP画像も合わせて作成しました。
サイトマップやRSSフィード、OGPやGoogle AnalyticsタグはHUGO内臓のテンプレートをそのまま使う形で実現できたのはよかったです。
逆にページネーションとサマリー表示は、前者は3ページ目の記事を開いた後の「一覧へ戻る」リンクに元のページ番号を渡せず（一括生成だから仕方ない）、後者は hasCJKLanguage = true オプションを設定しても日本語のサマリー表示が期待した内容にならず、記事タイトルだけの表示になってしまったのは今後の課題です。
（あと、記事毎のOGP画像もサムネイルを生成したかったが難しそうで断念）
もろもろの調整
テーマが完成してページが一通り表示できるようになったら、Google AnalyticsやAdSenseの設定をBloggerから移植します。
特にGoogle Analyticsは最近GA4になったらしく、今回はついでだったのでそちらを新規に設定しました。
GitLab Pagesリポジトリーの作成
今回、HUGOで生成されたコンテンツをホストする先として、
- Vercel
- Netlify
- Cloudflare Pages
- GitHub Pages
も検討してみたのですが、Vercelは無料プランだとAdSense掲載などの商用利用不可だったり、Netlifyは国内にCDNエッジが存在せず無料枠超過するといきなり請求が来るのがちょっと怖い、Cloudflare Pagesはサービス自体はよさそうだけどリポジトリーをGitHub/GitLabに置く必要があり、だったらそちらが提供するPagesでいいかなーと思い、今回はリポジトリー自体未使用だったGitLab Pagesにした次第です。
GitLab Pagesでは、リポジトリー作成時にHUGOテンプレートを選択する事で、プッシュされたタイミングでコンテンツを生成するパイプラインを自動で作成してくれます。今回はそれをそのまま利用しました。
ドメインの向き先を変更
上記リポジトリーで生成したコンテンツをxxx.gitlab.ioで表示確認できたら、リポジトリーの設定画面よりドメインを認証するためのTXTレコードを取得し、それをお使いのDNSサーバー（ドメインレジストラーなら管理画面）に設定します。
wwwありとなしの場合は、GitLab Pagesの設定画面で両方を登録すると双方でリクエストを受け取った後、wwwなし側にリダイレクトしてくれるようでした。
おわりに
コンテンツの変換やHUGOのテーマ作成など準備作業は大変でしたが、噂通りコンテンツは一瞬で生成されるのと、使い慣れたMarkdownで記事が書けるのはよさそうです。
これを機に、今後は技術的な内容を投稿できるよう頑張ります。。
