1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Hugo-ZenをベースにHugoのデザインを変えてみた

Hugo-ZenをベースにHugoのデザインを変えてみた

更新日:2021.01.30 作成日:2016.04.17

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

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

hugo-zen

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

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

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

faviconの生成

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

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

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

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

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

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

残りやりたいこと

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

B! Pocket
スポンサーリンク

Related contents

TECH

2018.07.11

Hugoのテーマでsubmoduleを使う方法

TECH

2017.10.14

HugoでのシンタックスハイライトにPython Pygmentsが不要となった

TECH

2016.09.08

Circle CIでテストを定期実行する

TECH

2016.09.06

Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた

TECH

2016.08.15

Circle CIでHugoのビルド・デプロイを実行する

TECH

2016.08.11

Hugoで関連記事を表示する方法

TECH

2021.02.11

Git pre-commitフックでFrontmatterの「更新日時」を自動更新する

TECH

2021.01.24

「Hugoで始める静的サイト構築入門 静的サイトジェネレーターで作る自作サイト」を出版しました