backportの裏側: blogデザイン

2016/02/17

Hugoはthemeという仕組みでページ構成やデザインを変更できます。 デフォルトテーマはないみたいなので、何かしらのテーマを選んでからサイトを作る、という感じですね。

Hugo Themes Siteでテーマを見ることができます。

この中から気に入ったものを見つけてgitでcloneする、というのが一般的な流れなんですが、 今回はいい機会なのでthemeを自作してみることにしました。

Hugo - Creating a Themeにある通り、

> hugo new theme [name]

でテーマの雛形が生成できます。

雛形があれば全体の構造がなんとなく把握できるので、あとはドキュメントを読んだり気になるテーマのソースコードを見たりしながら試行錯誤していきます。

HTMLファイルの中に記述する変数だったり制御構文だったりにはGo言語標準のtemplateパッケージが採用されています。 使いこなすためには真面目に勉強したほうがいいと思いますが、シンプルなテンプレートなら見よう見まねで何とかなりました。

テーマもLiveReloadの対象なので、試行錯誤がすぐブラウザに反映されるのがとっても便利。 間違った書き方すると画面がヘンになるのですぐ気づけます。

そんなこんなで数日格闘した結果、とってもシンプルなテーマが出来上がりました。 blogを書きながらちょっとずつ改善していきたいなー。

ちなみに自分はHTMLやCSSはある程度理解していますが、デザインセンス皆無なのでテーマを自作する意義はあんまりありません。 正直自己満足の世界ですね...




関連(するかもしれない)記事


おススメ