hl.hatenadiary.jp

日記。アニメ感想とかゲーム感想とか。自分用メモ。フッターにある「日記内の検索」を使うと便利。

静的サイトジェネレーターを使ってみた

静的サイトジェネレーター

ブログや Twtter もいいけど昔ながらのホームページも持っていたい。でも文章を書くだけで簡単に更新できるようにしたい。記事のヘッダーやフッターや一覧ページや RSS を自動生成してほしい。HTML 生成ツールは昔からいろいろあるが最近のものを使ってみたい。

静的サイトジェネレーターというものが流行っているらしい。いろいろなプログラミング言語でいろいろな名前のツールがつくられている。ブログのように、アクセスするたびに記事やコメントやサイドバーなどのデータを組み合わせてページを表示するのが動的サイト。同じようなことをローカルで行って HTML ファイルを出力するのが静的サイトジェネレーターだという。

静的サイトジェネレーターという名前がかっこいい。クールな語感のなかに性的なエネルギーがくすぶっていそうなところが良い。

しかしそのためだけに WindowsPythonRuby をインストールしたくない。PythonRuby をインストールするためのツールをインストールするためのツールをインストールしなければならないうえによくわからない場所によくわからないファイルがたくさんつくられるのでしょう?

というわけで Hugo を選びました。

  • Hugo :: A fast and modern static website engine
    gohugo.io/

Hugo は go 言語製だけど実行ファイルが配られているので go 言語のインストールは不要。簡単。しかしコマンドプロンプトの使用は避けられない。慣れないので次のような .cmd ファイルを作業フォルダ内につくって使うことにしました。環境変数の設定もしたくないので作業フォルダ内に実行ファイルをコピー。

@echo off
start http://localhost:1313/
hugo server -D -w

あとは /content/記事.md をつくってコピーして編集していけばとりあえず形になります。

詰まったところ

サンプルテーマはいろいろあるけど必要な設定項目がサンプルごとに違うので簡単に切り替えられるものではなかった。アウトラインがおかしかったり内部リンクのスラッシュが二重になっていたりするものがあって気になる。なにか深い意味があるのだろうか。凡ミスだろうか。

文字コードUTF-8(BOM 無し)。シフト JIS だと文字化けするだけだが、UTF-8 の BOM 無しではなく BOM 付きにしてしまうとフロントマターが認識されない。

ブログと違い、ファイル名を変えてページを生成しても元のファイルは消えずに残る。確認するとき間違えやすい。レイアウトやファイル構成をいじるときはこまめに public フォルダごと消したほうがいい。

あと、記事内の小見出しハッシュ値のような id が自動で付くけど何のためなんだろう。config.toml に次のような呪文を書くと消えるらしい。

plainIdAnchors = true

その他、いろいろな機能がありそうだけど日本語での解説記事が少なくてわからない。公式サイトが詳しいからわざわざ解説するまでもないのだろう。 しかし自分は英語が苦手なのでつらい。よく使う true と false の綴りすらときどき間違えるほどの英語力。ドキュメントが読めない。サンプルコードをいじって推測するしかない。slug の綴りを間違えていて1時間ほど悩んだ。まさかナメクジのスラッグで正しいとは。