Hugo + GitHub Pagesに乗り換えた

はてなブログをやめてHugoとGitHub Pagesに乗り換えた. ブログの移転はこれで4回目で, Hugoが5代目になった.

3回目の引越しの時と違って 前代のはてなブログの記事をそのまま移転したので, はてなブログの方は検索エンジンから除外させた (noindex, nofollow).

Hugoとは

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

The world’s fastest framework for building websites | Hugo

Hugoは静的サイトジェネレータの一つ. Go言語でできているので, ビルドが高速・軽快で拡張性にも富んでいる.

どうしてHugoを選んだかと言うと, そんなに理由はない. 「静的サイトジェネレータ」で検索して上位に出てきたから, 使ったことが無かったから, など. 他の候補はJekyll, React Static, Gatsbyなどがあったが, Go言語という特徴が有利に働いた.

導入

日本語の文献が沢山あり困らないが, 公式チュートリアルで十分だと思う.

Ubuntuでのインストールはsnapでできる.

snap install hugo --channel=extended

サイトを作るのもすぐにできる. 実に手軽である.

hugo new site YourSiteName

ブログ名や作者名などは./config.tomlで設定する. 詳しくは後述のテーマごとのREADME.mdを参照されたい.

テーマ

Hugoには実に豊富なテーマが用意されている. 自分でも作れるが, しばらくは既存のテーマでHugoに慣れることにした. 気軽にテーマを乗り換えられるのも Hugoの特徴

公式サイトのテーマ一覧からテーマを選ぶ. 私はTrack3/hermitにした. シンプルだが, 細かいところまで作りこまれている. なにしろ作者様のブログがとてもかっこいい. 東アジア系の全角文字との相性も良く, 自分で作るときの参考にしたい.

テーマの導入はgit submodule addですると, 後々の管理が簡単である.

cd YourSiteName
git submodule add https://github.com/Track3/hermit.git themes/hermit

あとは, ./config.tomlで, テーマを選択する.

theme = "hermit"

他の設定はテーマごとのREADME.mdを参考にする.

ビルド

hugoコマンドを単体で実行することで, ./publicにHTML群ができる. ちなみに, hugo --minifyとすると生成されるファイルの改行が省略されて より軽量になる.

また,

hugo server

を実行することで, http://localhost:1313/にサーバーが立ち上がる. ソースを書き換えるとすぐに反映されるので, 下書き時に便利.

GitHub Pagesとは

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

GitHub Pages

Hugoで生成したサイトのホスティングにはGitHub Pagesを利用している. タスク管理ツールを作ったときにも使ったが, git pushするだけで反映されるのは便利. あと, いつの間にかGitHub Actionsなるものができていた. GitLabと悩んでいたが, Twitterで教えてもらいGitHub Pagesに決定した.

GitHub ActionsによるHugoのビルドとデプロイは, 以下の記事をそのまま使わせて頂いている.

GitHub Actions による GitHub Pages への自動デプロイ - Qiita

よく見たら, この記事の作者様がTwitterで教えて下さった方であった. とてもありがたい.

つまづいたところ

gh-pagesブランチが反映されない

User and Organizationリポジトリでは, gh-pagesではなくmasterブランチにコードを配置する必要がある. なので, 生成したコードをmasterブランチにデプロイするように設定すると直った(参考).

GitHub PagesのCSSが読み込まれない

./config.tomlbasURLhttp://ha2zakura.github.io/にしていた. 正しくは,

baseURL = "https://ha2zakura.github.io/"

また, 絶対パスの指定をしておくと更に安心.

canonifyurls = true