Hugoのデザインテーマ

Hugoのデザインテーマ

December 9th, 2019

使用技術

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

概要

Go言語製のスタティックサイトジェネレーターHugoのデザインテーマを作成しました。

シンプルなデザインかつ、ブログサービスのMediumで使われている画像拡大のアニメーションを取り入れ、GitHubで120を超えるスターをもらうことができました。

また、Hugoの開発環境でgulpやWebpackを使用しているのをあまり見かけませんでしたが、静的サイトの開発環境技術を追うためにも導入しました。

最初はCSSのコンパイラーとしてPostCSSを使用していました。その後PostCSS個々のライブラリのバージョン管理が面倒に感じて、Sassに変更しました。

travis ciはmasterブランチから開発でしか使わないファイルを取り除いて、Hugoのテーマに必要なファイルだけをreleaseブランチに書き出すために使っています。

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

hugothemepickles

ソースコード

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

mismith0227/hugothemepickles