シンプルなHugoのテーマ「Angel's Ladder」を作りました

May 27, 2015   #hugo  #html  #css 

先日記事に書きましたが、WordpressからHugoへの乗り換えにあたりテーマを作りました。 使い方とかは全部ここに載せてますが、一応ブログでも紹介しようかと。 ちなみに、Angel’s Ladderというのは、雲の間から強い光が出てくるやつのことです。 白とグレーベースに、1色だけ差し色を入れる配色なので。

意外とあっさり本家にマージしてもらえたので、テーマ作れる人は作ってみても面白いと思います。 テーマ作成時のルールはテーマカタログのREADMEにあります。

テーマの特徴

テーマの特徴は下記の通りです。

  • シンプルなデザイン
  • レスポンシブデザイン
  • ページネーション対応
  • 投稿へのタグ付け対応
  • Disqusでのコメント対応
  • highlight.jsでのコードハイライト
  • Google Analytics対応

スクリーンショット

ほとんどこのサイトと同じですが、GitHub上のREADME.mdを表示した時の画面を載せておきます。 全体像はこちらで見れます。

テーマのインストール

テーマのリポジトリを、hugoのthemesディレクトリにクローンしてください。 使うときはhugo / hugo serverコマンドの-tで指定します。

cd themes
git clone https://github.com/tanksuzuki/angels-ladder
hugo server -t angels-ladder -D -w

設定

config.tomlの内容を書き換えます。 サンプルは下記の通り。

baseurl = "http://tanksuzuki.com/"
languageCode = "ja"
title = "TANKSUZUKI.COM"
disqusShortname = "tanksuzuki"

[Params]
subtitle = "I would like to be a layer 3 switch."
facebook = "https://facebook.com/foobar"
twitter = "https://twitter.com/foobar"
github = "https://github.com/foobar"
profile = "/images/profile.png"
copyright = "Written by Asuka Suzuki"
analytics = "UA-XXXXXXXX-X"

パラメータの詳細は下記を参照。

パラメータ 必須 コメント
baseurl yes サイトトップのURLを指定してください。
languageCode yes HTMLのランゲージコードを指定してください。 例: en, ja
title yes サイトのタイトルを指定してください。
disqusShortname no Disqusのショートネームを指定します。指定なしの場合は、コメント欄は非表示になります。
subtitle no サイトのサブタイトルを指定してください。指定なしの場合は、サブタイトルは非表示になります。
facebook no FacebookのURLを指定してください。指定なしの場合、リンクは非表示になります。
twitter no TwitterのURLを指定してください。指定なしの場合、リンクは非表示になります。
github no GitHubのURLを指定してください。指定なしの場合、リンクは非表示になります。
profile no プロファイル画像へのパスを指定してください。指定なしの場合、プロファイル画像は非表示になります。
copyright no 著作権表記を指定してください。指定なしの場合、著作権表記は非表示になります。
analytics no Google AnalyticsのトラッキングIDを指定してください。指定なしの場合、アクセス解析の処理はスキップされます。

スタイルの変更

※lessが思ったより重くてFOUC起きたりするので、この機能は今後外すかも。 実験的にlessやめたら安定しました。

差し色を変えるには、layouts/static/theme.lessを編集します。 デフォルトの差し色は下記になっていますので、お気に入りの色に変えてください。

/* Theme color
--------------------------------------------------*/
@color: #29abe2;

ユーザ独自のスタイルについては、layouts/static/custom.cssに追記してください。

ライセンス

ライセンスはMITです。

今後やりたいこと

このサイトを実験台にしながら、色々細かいところを改善していきます。

今のところ、

  • 関連記事の紹介
  • 記事冒頭の目次
  • 404ページ(この記事書いてて作ってないことに気付いた)
  • ソーシャルへのシェア

くらいは実装したいなと思っています。

ご意見等々あれば、コメント欄やTwitterでお知らせくださいませ。