Apr 5, 2024

Hugo+WSL+GitHub Pagesでつくったページに引っ越した時の個人的メモ

2024-04-05 22:47 +0900 [Last modified : 2024-04-07 15:27 +0900]

4年ほど前にはてなブログで作ってほったらかしてた記事たちを引っ越した． 理由としては，

  • 単純にHugoを使ってみたかった
  • はてなブログで数式使うのが面倒だった
    • インライン数式が[tex: hogehoge ]のような謎記法．誰が得しているんでしょうか
    • 累乗^や下付き文字_にエスケープがいる．やってられるか，こんなもん
  • gitでポストを管理->そのままGitHub Pagesで公開，という簡潔なフローで済む

といった感じ．

環境構築からページ公開までかなり楽に進められたと思うが，何度かつまづくこともあったのでメモしておく．

環境

  • WSL2 Ubuntu 22.04.3 LTS
  • Hugo v0.124.1+extended

はじめに

Hugo+GitHub Pagesの解説をしているサイトは適当に調べるだけでも沢山見つかる． しかしHugo周りの開発のアクティブさから仕様変更が度々起きているようで，「言っていることがサイトによって違うんだが？」ということがよく起こる． そこで，スムーズに進まなかったポイントを抽出して書き留める．

参考にしたサイト：

Hugoの導入

Hugo公式のインストールガイドを読むと， Ubuntuの場合はsudo apt install hugoをしろと書いてある．

が，aptにあるhugoはかなり前のバージョンしかない（2024年4月現在）ため， Hugoのリリースページから直接最新のパッケージを持ってくるべき．

hugo_extended_X.XXX.X_linux-amd64.debをダウンロードし，

sudo dpkg -i hugo_extended_X.XXX.X_linux-amd64.deb

でインストールする．

サイトの設定

基本的に各サイトを参考にしてよさそう．

  • テーマの設定
    • Hugo Themesから良い感じのテーマを探してgit submodule addする
    • hugo.tomlでテーマを設定
  • 適当なページを作ってみる
    • hugo new content/posts/test.md のようにする
  • ページデザインの変更
    • theme/theme-name/下にあるファイルのうち，変更したいファイルを見つける
    • archetypes/, assets/, layouts/など同階層の位置にコピペして，その中で好きなように手を加える

hugo serverでローカルサーバを立ち上げて見た目を確認することができる． サーバの再起動なし，かつ爆速で変更が反映される．（すごすぎ！）

git関連

以下の設定をしてGitHubにpushする．

  • .gitignore
  • workflow
  • GitHub Pagesの設定
    • リポジトリ内で Settings > Pages > Source を “GitHub Actions” に指定

サイトによっては，hugo.tomlにpublishDir = "docs"を入れないとページが正常に作られない旨の記述があるが， GitHub Actionsを用いてデプロイする場合は問題なさそうなので必要ない．

非常に手軽にデプロイまで済ませることができた． さらばはてブロくん😁