ウェブメディア自動計算を、今まで 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に移行しました。その結果が↓です。
