hugo+hugo-blog-awesomeでブログを作成したらやる気が出てきた

あらまし

この C-WWW::Afterlife は、hugo という静的サイトジェネレータを使って作成した。

前の記事をこのサイトにアップする際、「せっかくXServer Staticという静的コンテンツ専用のサーバに移ったのだから、今流行りの（本当に流行っているのかは不明だが自分の中ではキテる）静的サイトジェネレータを使ってブログを作ってみたい！」と思ったのが理由。
また、自分が開発・運営している「ブルスコミックログ」を（現在のWordPressから）静的サイトに移行したいとも思っていたので、それのための学習を兼ねてという理由もある。

hugo とは

世の中に静的サイトジェネレータは沢山あるが、今回はその中から hugo を選択した。

hugo は、go というプログラム言語で書かれた静的サイトジェネレータ。goという言語そのものが高速で動くことをウリにしているため、go で作られた hugo も「The world’s fastest framework for building websites」と爆速でWebサイトを作れることを宣伝している。
go という言語で書かれてはいるが、hugo を使うために特に go の知識は必要ない。自分も go については「何かすごい早い言語らしい」程度しか知らないが、hugo でブログを立ち上げることは簡単にできた。できた（含み）。

ただし、既存のテンプレートを自分でカスタマイズしようとしたり、自分で新しい hugo のテーマ（後述）を作ろうとしたりするのであれば、Webサイトを制作するための一般的な知識（HTML/CSSなど）および hugo のテンプレートファイルの記法を学習する意欲が必要になる。

hugo のインストール

インストールに関しては、hugo のサイトに書かれているOS毎の手順に従ってインストールすれば良い。
基本的には go と git をインストールし、その後に hugo をインストールする。

自分の場合は Google Compute Engine 上に作った仮想マシン（以下、VPS）にUbuntu linuxをインストールしたマシンにインストールした。何かどうしてもVPSが使いたかったので…。
Ubuntu で hugo をインストールするやり方としては、「sudo snap install hugo」で snap から入れる方法と、「sudo apt install hugo」でaptから入れる方法があるが、snap の方が新しいバージョン(v0.150.0)が入るのでこちらを推奨する。
apt経由でインストールしたバージョンだと、hugoのサイトに載っている Quick Start のテーマが動かない弊害がある。

テーマの選択

hugo にはブログ・ギャラリー・ポートフォリオなど、様々な用途に使えるテーマが沢山公開されており、ここから好みのテーマを選んで自分のサイトで使うことができる。

自分の場合、最初は Hugo Bear Blog がシンプルでカワイイので良さそうと思って使ってみたが、一般的なブログとはちょっと構造が違っていてトップページに投稿の一覧が出てこないところが「思ってたんと違う…」と感じたので（ちょっと頑張れば一覧を出せるようにカスタマイズできるとは思うけど）、同様に見た目はシンプルながらもトップページに投稿の一覧が表示されている Hugo blog awesome を使うことにした。

Hugo Extend の導入

Hugo Blog Swesome は見た目は極めてシンプルなブログテーマなのだが、使うためにはまず Hugo Extend をインストールする必要があると readme に書かれている。
この時は hugo を入れたばかりだったので、そもそも Extend って何よ？　という状態だったのだが、Extend とは Sass/SCSS のコンパイルに対応しているより現代的なWebサイトを構築できるバージョンであり、Hugo Blog Swesome は Sass を使っているので Extend が必要とのことらしい。

と言われても、当時の自分は何も判らなかったので、検索して見つかったこちらのサイトを参考に npm で hugo-extended をインストールした…のだが、実は snap でインストールした hugo は既にextendedバージョンであることが判った。余計なことをしてしまった。まあどちらも中身は一緒なので…（フォロー）。

$ sudo snap install hugo
2025-09-22T23:55:57+09:00 INFO Waiting for automatic snapd restart...
hugo 0.150.0 from Hugo Authors installed
$ hugo version
hugo v0.150.0-3f5473b7d4e7377e807290c3acc89feeef1aaa71+extended linux/amd64 BuildDate=2025-09-08T13:01:12Z VendorInfo=snap:0.150.0

Hugo blog awesome

Setup

Hugo Blog Swesome の readme の Setup の項目には、

Using the theme as Hugo module
Using the theme as Git submodule

の二つのセットアップ方法が書かれている。

Hugo module はサイトの構築時に git のリポジトリからテーマをインポートして使用する方法で、Git submodule はローカルにテーマファイルを git clone して使用する方法。テーマファイルを都度 git から持ってくるか、ローカルのものを参照するかの違い（だと思う）。
Hugo module にすると自前でファイルを管理しなくて良いので楽だが、ローカルでテーマをカスタマイズしたいならGit submodule にする必要がある。

もちろん、その頃の自分は何も判らなかったので、ドキュメントに書いてある順番に従い、Hugo module をインストールした後に Git submodule でテーマファイルをインストールした。つまり両方インストールしてしまった。
両方入れるとどうなるのかと言うと、まず設定ファイル (hugo.toml) に Hugo module を参照するよう書かれているので hugo はそちらを参照し、ローカルにあるテーマファイルは参照されなくなる。なので、例えば「ちょっとタイトルのフォントを変えたいな」と思ってテーマファイル内のCSSの設定を変更 (themes/hugo-blog-awesome/assets/sass/_custom.scss にCSSを記述する) しても、その修正は反映されない。

修正が何故反映されないのかさんざん悩んだ末に「もしかして module を使う設定にしていると、ローカルのテーマファイルって使われないのでは？」と気付いて hugo,toml から hugo-blog-awesome モジュールを読み込む設定を削除したら、_custom.scss に書いた修正が反映されるようになった。

ちゃんと事前に「Hugo moduleって何？」って調べるべきだったね（はい）。

Configuration

Hugo Blog Awesome は多言語表示に対応しており、動的に言語を切り替えることができる。サンプルサイトの設定ファイルを見ると、言語ごとにメニューの表示言語を指定する記述がある。しかし自分の場合は日本語以外の言語でこのブログを書く必要性が全くないので、この機能は明らかに過剰だ。

なので、自分の場合は言語を日本語（ja）に決めうちし、サンプルサイトで言語別に設定してある項目は全てparamsの下に直接入れる形にした。他の部分は、サンプルサイトのものをそのまま流用した。

languageCode = 'ja'
defaultContentLanguage = "ja"

[params]
  ...

  [params.author]
    avatar = "avatar-profile.jpg"
    intro = "C-WWW::Afterlife"
    description = "C-WWW更新終了後の更新日記。つまり日記です"

Server によるテスト

Hugo は自前でHTTPサーバとなれる機能を備えており、作ったブログのプレビューを簡単に行うことができる。デフォルト設定ならhttp://localahost:1313/でアクセスが可能。全てローカルで開発している環境ならこれで問題ないのだが、自分の場合はわざわざ Google Cloud 上にVPS環境を作ってしまったので、自宅のマシンからVPSの localhost には直接アクセスができない。そのため、

サーバ起動時にはhugo server--bind 0.0.0.0 として、localhost以外からもアクセスできるようにする
Google Cloud 側に、自宅のIPアドレスからVPSのポート1313へのアクセスを許可するフィルタを追加する（gcloud compute firewall-rules create）
http://VPSの外部IPアドレス:1313/ でhugo serverにアクセスする

という作業を行い、hugo server を自宅から使えるようにした。

bindで外部IPアドレスでアクセスできるようにした場合でもリンク先が http://localhost:1313/ になってしまう時があるが、その場合は hugo serverのオプションに--baseURL=http://外部IPアドレスを追加すれば良い（らしい）。

XServer Sttatic へのデプロイ

go server のテストで問題が出なければ、本番環境（業界用語）にサイトをデプロイ（業界用語）する。
hugo には、Amazon S3 などのクラウドストレージに直接サイトをデプロイする機能が備わっているのだが、XServer Static はS3互換のクラウドストレージではなく静的コンテンツ専用のWebサーバのため、ファイルをアップロードする時は普通にFTPを使用することになる。

FTPを使ってhugoで作成したサイトをアップロードする場合、hugo の public ディレクトリの下にあるファイルを全てをアップロードする必要があるのだが、これを毎回手作業で行うのは面倒なので、Linuxのコマンドで一括して行う方法を調査した。

最初に見つけたのが、 lftp というコマンド。
これには mirror という機能があり、ローカルのディレクトリの内容をリモートに一括してコピーしてくれる。ログイン→mirror→終了を一括して行う時は、自前でバッチファイルを作成して実行する。これでも機能的には十分だと思う。

もう一つ、同様のことをやってくれる rclone というコマンドも見つけた。
最初に接続先のサーバについての情報が書かれた設定ファイルを rclone config で作成すれば、後は rclone sync ローカルのコピー元ディレクトリ設定ファイルに登録した名前:リモートのコピー先ディレクトリ でコピーしてくれる。
動作としては rsync にイメージが近く、ローカルとリモートでファイルの更新日が一緒だったらコピーしない等の気が利いてる機能があるのが良い。

個人的には rclone の方が使いやすい（バッチファイルを書かないで済む、パスワードが暗号化されて設定ファイルに書かれるのでコマンド履歴にパスワードが残らない、動作が早い）と感じたので、今後は rclone を使って運用する予定。

まとめ

自分が hugo に興味を持った理由は、前述の通り現在は WordPress で運用している「ブルスコミックログ」を静的サイトに移行するためで、このブログはそのための練習用の実験台という位置付けだったのだが、実際にちゃんと動くブログを作ってみると何か妙に楽しい。
せっかく作ったんだから、もう少しここに何か記事を書いてみようかな～という気になって来たのが、我ながら不思議だ。

前々から、日記的なサイトを作るなら Mastodon でいわゆるおひとり様サーバを立ててそこでひっそりやろうかなとか思っていたんだけど（Fedibirdにアカウントを作ったのはそのための心理的な準備段階だった）、こうやって hugo でサイトを作っていると、昔 blosxom でブログをやっていた頃の楽しい感覚が戻って来るような気がしている。

WordPress や note のように最初から全てが揃っている環境よりも、hugo や blosxom のように「ちゃんと動くサイトを作るためには自分で手を動かす必要がある」「頑張れば自分で色々とカスタマイズできる余地がある」環境の方が好きなのかも知れない。そしてSNSと違って、サイトや記事の表示の仕方や、サイトへのアクセス方法などを自分で完全に制御することが可能なのも良い。

前から何となく思っていた「誰はばかることなく自由に文章を書ける場所が欲しい」とは、もしかしたらこのようなサイトのことだったのかも知れないと感じている。
まあ自分の飽きっぽい性格を考えるとここもいつまで続けられるのかは判らないし、そもそもここのサイトの残り容量が150M程度しか残っていないので長期に渡っての運用は無理なんだけど、しばらくはここに何かしら書いていけたらと思っている。

Written with StackEdit.