春になったので、BlogのデザインをHugoをベースに変えてみました。

前々からjQueryに依存するBootstrapをやめたいって思っていたので、Hugoの中でもミニマムなテーマであるHugo-Zenをベースに構築しました。

hugo-zen

• Hugo Zen: これから Hugo を始める人向けのミニマムなテーマを作りました - rakuishi.com
• GitHub - rakuishi/hugo-zen: Hugo Zen is a minimal hugo theme.

気に入ったポイントは、以下の点。

• ごちゃごちゃしてなく、シンプル
• Skeletonという軽量のCSSフレームワークを利用 http://getskeleton.com/
• jQuery不要

一旦、シンプルに構築できたので、ここから気になるところをちょっとずつ変えていきます。

faviconの生成

様々なファビコンを一括生成。favicon generator

上記のWebサービスを利用してファビコンを作成してみました。これだけ用意しないと対応できないなんて何か間違ってる気がするが、おとなしく追加しました。

綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ | 株式会社LIG によると、16px × 16px 、32px × 32pxのふたつをマルチアイコンにすればOKという話もあったので試してみたい。

関連記事をどうするか問題

WordPressのような動的に記事を生成する機構に比べて、静的サイトは関連記事をどう表示するかが結構悩みどころだったりします。前のデザインだと、同じカテゴリの記事を表示するというシンプルな方法だったので、まずは同じように設置しました。

理想は、機械的に記事同士の相関を判断して出力してほしい。 Hugo(Golang)で実現するか、JavaScriptを書いてなんとか実現するかやってみたい。

残りやりたいこと

• 関連記事をうまいこと出す
• サイドバーを充実させる
• AMP対応
• 常時SSL対応（img）
• 静的ファイルの最適化

Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)

インプレスR&D

AmazonKindle楽天市場Yahoo!ショッピング