2019年6月30日

Hugoのデザインテーマ

Hugoのデザインテーマ

Go言語製のスタティックサイトジェネレーターHugoのデザインテーマを作成しました(Go言語は全くできません)。 シンプルなデザインかつ、ブログサービスのMediumで使われている画像拡大のアニメーションを取り入れています。
GitHubで160を超えるスターがついています。

使用技術

  • Hugo
  • Sass
  • Webpack4
  • gulp4
  • SVG Sprite
  • Travis CI

作ったきっかけ

作り始めた当時はWordPressでブログを作ったり、テーマを制作してWordPressの公式テーマディレクトリに掲載したりしていました。
その時にコンテンツ管理システムの一つとしてスタティックサイトジェネレーターを知りました。その中でもコンパイルが高速で人気のあったGo言語制のHugoを使ってブログを作ったのを機に配布用のテーマを作り始めました。

特長

シンプルなデザインで使い勝手がいいように作りました。画像の拡大にはMediumで使われているzoomの動きを取り入れ、シンプルながらもモダンな作りにしています。
技術としてはgulpやwebpackで環境を作っています。テーマを使う際には開発環境のコードは不要なため、Travis CIで必要なコードだけをreleaseブランチに書き出すようにしています。

Hugoの公式テーマディレクトリ

Hugoの 公式テーマディレクトリ に申請し、掲載されています。
hugothemepickles

ソースコード

ソースコードはGitHubで公開しています。
mismith0227/hugothemepickles