しましまシャツ
ファンクラブ

memo

Hugoでウェブサイトを改装した

動機

いにしえのシンプルなウェブサイトが懐かしくなったから。
後、データベース使わないから引っ越しが楽とか、サーバープランをもっと安いのにできそうとかその辺り。

CSSの書き方が下手すぎて保守性が悪いのでBEMを勉強しようと思い立ったのもある。

ウェブサイトの構成

静的サイトジェネレータで本体部分を作り、日記など、ブログ的な部分はFlat-File CMSで制作する。
Flat-File CMSはデータベースのいらないCMSで、記事の数が多くなると向いてないとか説明されてたような気がするけど、 そんなにたくさん記事書かないからいいかなと思ったので採用。

静的サイトジェネレータはHugo、Flat-File CMSはBluditを使いました。
Bludit、スマホからだと日本語入力がまともにできないので今後に期待。

なぜHugoなのか

生成が速いから。速さこそパワー。

そもそも使ったことないものは選びようがないので…。

デザインを考える

テーマは無。空気。
ポートフォリオサイトだから中身を邪魔しないほうがいいかと思った。

前とほとんど変わらんやんけというのは禁句。

とりあえずテンプレートを作成する

特筆すべきことは特にない。
gulpでbrowserSyncとsass自動コンパイルやってるくらい。便利。

BEMはゆるめに踏襲しています。モディファイア結局使わんかったな…。

Hugoで使えるようにテーマ化する

変数をねじ込んでテーマ化する。WordPressでやったのとあんまり変わらないと感じた。

ただWordPressよりも圧倒的に情報量が少ないとか、検索ノイズが多いとかで困った。 すごい凝ったことしなければサクッとブログテーマ作れるくらいの情報はあります。多分。

参考サイト

ゴリラでも分かるテーマ作り:テーマ制作のとっかかりをつかむのに。
Hugoサイト構築:より掘り下げた内容がよくまとまっています。
トップページに更新情報を表示する:トップページに作品だけ載せるのに。
サムネイル画像と画像用ショートコードの導入:タイトル通り。
カテゴリに日本語を使う:日本語URLが嫌だったので。

不便だなと思ったこととか

未来の日付を設定していると記事が書き出されないのだが、タイムゾーンが日本ではないらしく、全然記事が表示されなくて焦った。

セクション内で使われているカテゴリだけ抜き出して並べたかったのだけど、そういう機能はないようなので、 note_catというカテゴリを別に作って対処した。つなぎにハイフンを使ったらエラーになったのでアンダーバーにした。

サブカテゴリとか作れないので不便。見た感じそんなに複雑なフォルダ構成で使うのが前提ではないっぽい。

WordPressデータのエクスポートとか

とにかくマークダウンファイルだけ取り出せればよかったのでJekyll Exporter使った。

ターミナルでのサーバー操作が面倒でなければHugo用のエクスポーターあるのでそっち使ったほうがいいと思います。

まとめ

運用してみないと分からないこともあると思うので、何かしら気がついたら追記します。