先日、Hugoのテーマ作成に挑戦し、ひとまず形になったので公開してみました。

作成したテーマ： Inkblotty

Inkblottyというテーマを公開しました。

• Demo
• GitHub
• Hugo Theme

WordPressのテーマInkblotをオリジナルにしているので、敬意を込めて"Inkblotty"と名付けました。
オリジナルのCSSも流用しているため、GPLv3での公開としています。

作ろうと思った理由

作ろうと思ったきっかけは、以前作ったWordPressのサイトです。
WordPressで構築したサイトは長期間運用するほど以下を全て満たす可能性が低くなるため、動作確認などの負担が大きくなっていました。

• WordPressの脆弱性対策でアップデート
• プラグインが最新版で動作するかどうか、更新が継続されるかどうか
• テーマが最新版で動作するかどうか、更新が継続されるかどうか

実際、WordPressのアップデートによりテーマが動作しなくなったこともありますし、Inkblotは更新停止しており最新のWordPress上からはダウンロードできなかったと思います。
そのためWordPressのアップデートで動作しなくなったらサイト閉鎖を考えていましたが、静的サイトであればほぼ無料で運用できる今、残せるなら残しておきたいという思いもありました。

そこで、せっかくの機会だと思いHugo版のテーマを作ってみることにしました。
Hugo版のテーマを作るのは、以下の点でもよい経験になると思ったためです。

• Hugoのテーマ構成について理解を深めるため
• Hugoの普及を支援するため
• WordPressでInkblotテーマを使っていた人の移行の選択肢とするため
• 何かしらの作品をOSSとして公開する経験を積むため

テーマの特徴

テーマは標準機能を含め、以下の機能を備えています。

• レスポンシブデザイン
• 投稿
  • シェアボタン（Facebook, Twitter, はてなブックマーク）
  • コメントフォーム（disqus）
  • 関連記事の表示
• 投稿一覧
  • サマライズ、もっと読む
• サイドバー
  • カテゴリー
  • タグ
  • 最近の投稿
  • アーカイブ
• その他
  • Google Analytics
  • Sitemap XML
  • RSS

WordPressのInkblotはカスタマイズ性が高かったのですが、とりあえずサイドバーは固定のデザインにするなど、いろいろ割り切っています。¹
その他、自身で入れていたカスタマイズは一通り入れてしまうことにしました。

今後実装したいもの

現時点では以下の機能を対応させたいと考えています。

• 広告枠の設定
• プロフィール表示
• 投稿数に応じたタグのサイズ変更（タグクラウド）
• サイト内検索フォーム
• パンくずリスト
• AMP対応

AMPは体系的に理解できていないので、かなり大変かもしれません…。

感想

これまで個人で自分用に何かを作ったことはありましたが、それを作品として公開できるレベルに持っていったのは初めての経験でした。
完璧さを求めすぎて放置する未来が想像できたので、今回は一週間程度で一気に作りました。
デザイン自体はWordPressの元テーマをかなり流用したものの、独自のカスタマイズも入っていますし、とにかく作品として公開までこぎつけたことがとても良い経験になりました。

またHugoのテーマはWordPressからの乗り換えを強く意識して作られていると感じました。
WordPressのテーマにおけるページ構成やパーツと類似する箇所が多く、かなり進めやすかったです。
一方、WordPressで生成されるHTMLには大量のclassが動的に追加されているので、読み解くには冗長で煩雑でした。
そのためWordPressから生成されたHTMLを参考にする際、不要なclassなどはがっつりと削っています。

Hugoは現在こそエンジニア向けだと思いますが、利用者が増えるに伴い、ツール類も次第に整備されていくだろうと思っています。
少しでも多くの人に使っていただき、Hugoのコミュニティや個人の情報発信が活発になれば幸いです。
使った方や気に入った方は、GitHubでStarを付けたり、Twitterで感想をいただけたらとても喜びます。