ウェブメディア自動計算を、今まで concrete5 で運営していたものを Hugo に置き換えた話です。

concrete5 や WordPress などの CMS が広まる前(2002～2007年ぐらい)は、自分で Hugo のような html ジェネレータを作っていました。もちろん Hugo と比較すると機能はたいしたことなく、メニューのリンクを自動で作る、ぐらいのものでしたが。
この経験があったので、Hugo にはスムーズに慣れた気がします。

スクレイピングで記事を移行する

concrete5からHugoへデータインポートは難しそうなので、phpQueryというライブラリを使いました。詳細は→ 【php】webサイトから、欲しい情報を3行で取得する方法

記事のメイン部分(div#main-content)を指定してスクレイピングする、という方法です。記事は200件ぐらいだったので、記事URLを配列に書いておき、ループで繰り返しスクレイピングさせる、という方法で取得しました。

テーマはHugoのものに変更した

concrete5のときは、concrete5の公式サイトからテーマを入手していました。特にテーマにこだわりがあったわけではないので、Hugo移行するときに、Hugoのテーマに変更しました。

Bootstrapのバージョン違い

concrete5で構築を始めたのが2016年で、Bootstrap3系でした。移行時にテーマを変更して、Bootstrap4系にしました。
このため、gridの表示などが異なりました。

col-xs-** → col-**

などです。ここはエディタで置換していきました。詳細はMigrating to v4. Bootstrapをごらんください。

Hugo の嬉しいところ

地味ですが、かゆいところに手が届くようになっているのが嬉しかったです。

Hugo ローカルプレビュー

Hugo では、コマンドラインから

hugo server

と入力するとローカルサーバーが立ち上がってプレビューできます。ファイルを変更して保存すると、プレビューも自動で書き換えて表示してくれます。この機能のおかげで、Bootstrapのバージョン変更作業が楽でした。

minifyができる

コンパイル時に、

hugo --minify

と --minify オプションを付けると、改行などを削ったhtml出力をしてくれます。

scssがコンパイルできる

Hugo では、scssがコンパイルできます。(ただし、テーマがscssに対応した作りになっていることが前提っぽいです。)

表示スピードの改善

7月19日の早朝に静的htmlに移行しました。その結果が↓です。