backport

技術ネタと野球とときどき雑談

backportの裏側: blogデザイン

2016/02/17
development hugo, blog

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

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

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

Hugo - Creating a Themeにある通り、

> hugo new theme [name]

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

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

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

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

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

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



コメント欄を表示する

おススメ

WEB+DB PRESS Vol.99

特集「良いコードって何だろう?」がおススメ

WEB+DB PRESS総集編[Vol.1~84] (WEB+DB PRESS plus)

お値段手ごろなので持っておいて損なし

Kindle Paperwhite Wi-Fi、ブラック

読みたいときに読みたい本を読めるのが嬉しい

超小型65W ノートPC汎用 ACアダプター FINsix ”Dart” (シルバー)超軽量85g 11種類の変換プラグで1000機種以上のノートPCに対応 USB5V出力付きでPCとスマホ同時充電 ※必ずご使用のPCとの互換性をご確認ください。『PSE認証済』

持ち運びに便利な小型軽量のACアダプタ