もともとはてなブログで gingk’s blog というブログを持っていたが、特にスマホで見たときに広告が多すぎて見づらいと思っていたので心機一転新しく開設することにした。とはいえ見ればわかる通りでこれまでたくさん書いてきたのかと言われればまったくもって No であり、そのあたりもこっちに移行することでもっと気軽に書けるようになるのではないかという狙いもある。
このポストではこのブログを公開するまでの手順を書く。リポジトリはこちら。
gingk1212/gingk1212.github.io
Hugo 導入
日々いろんな人のブログやサイトを見ながらなんとなく GitHub Pages で作りたいという思いがあったので、GitHub Pages でブログを作るためにはどうすればいいかをまずは調べた。で、選択肢として多く目に入ったものが Jekyll と Hugo という静的サイトジェネレータ。Jekyll は Ruby で、Hugo は Go で書かれているみたいだが、比較したわけではないけど Hugo のほうがなんとなく速そうだし今風に思えたので Hugo をまずは触ってみることにした。
こちらに従いインストール。Windows を使っているのだけど、パッケージマネージャーは流行り廃りがあってあまり使いたい気分ではなかったのでビルド済みのバイナリをダウンロードしてパスを通しておいた。
Installation | Hugo
Quick start に従って動かしてみた。
Quick start | Hugo
テーマ選び
特に違和感もなかったのでこのまま Hugo を使うことにしてテーマ選びを開始。
Complete List | Hugo Themes
ここに一番時間がかかった。ただただシンプルな見た目でいいと思っていたのだけど、意外とこれってものが見つからずに延々といろんなテーマを試しまくることになった。結果採用したのが PaperMod。見た目もシンプルで気に入っているが、何よりよかったのがドキュメントが丁寧なところ。見た目はいい感じだけど設定をどう書けばいいかいまいちわからず泣く泣く断念した、というものもけっこうあった。PaperMod は Wiki に丁寧に書いてくれているので、まずは サンプルの config をコピペして持ってきて、Wiki や デモサイト (リポジトリ) を見ながら手を加えていった。
公開
公開については Hugo がドキュメントを用意してくれているのでその通りにやった。
Host on GitHub Pages | Hugo
GitHub Actions を使うのが地味に初めてだったのでプッシュした後動いているのを見て軽く感動した。
Google Analytics, Google Search Console 導入
はてなブログでもやっていたのだけど、どうせなら何人アクセスしているか知りたいし検索にも引っかかってほしいので今回も導入した。ググればやり方はいくらでも出てくるので詳細は割愛。
なお、Hugo で Google Analytics を有効にするための設定方法はこちら。
Configure Google Analytics
Google Analytics 導入に伴い、プライバシーポリシーもきちんと配置した。リンクをどこに置くか迷ったのだけど、右上に置くのはちょっと目立ちすぎかと思いフッターに配置することにした。本来の使い方とは違ってしまうが、Copyright 項目に文字を書くことでフッターに表示されるのでお借りすることにした。
Copyright | Hugo
URL について
最後に、記事の URL について。デフォルトだと以下だが、ファイル名なんてものはフォルダ構成再検討などに伴って将来絶対に変えたくなってくるものでありその都度 URL が変わってしまうのは嫌だったので別の案を検討。https://gingk1212.github.io/posts/ファイル名(拡張子除く)/
記事のファイル内で slug を設定することで URL のパス名にすることができるようなので、slug にランダム文字列を設定することにした。ランダム文字列はいろいろググっていると UniqueID が使えるということがわかったのでこちらを使用。ランダム文字列というかファイルパスのハッシュ値だが、今回の目的においては十分である。
ちなみに posts/ 配下に置くファイルの名前やフォルダ構成だが、年月日でフォルダを切って配置、などなどいろいろ考えたが運用してみないことには見えてこないのでとりあえずはフラットに置いていくことにした。ただ最低限日付順に並んでほしくはあるのでファイル名に日付を入れるようにはしている。具体的には、下記のコマンドを使用してファイルを生成している。
$ hugo new content content/posts/`date '+%Y%m%d'`-create-blog.md
終わりに
半分思い付きで作ってみたわけだけど、デザインやレスポンスの速さなどもろもろ大変満足している。GitHub Pages x Hugo は世の中に知見が大量にたまっているので特に詰まることなくすんなり作ることができた。こういうのは作った時が一番モチベーションが高くその後どんどん下がっていくものなので、へこたれずに続けていきたい。