どんなテーマがあるか
まずは以下からお目当てのテーマを探します。テーマを自作するガッツがある方はテーマは不要ですが、最初は入れておきましょう。（テーマを反映するかどうかは簡単に切り替えられます）
今回は例として material-design を選択します。
対象のテーマをgit cloneする
macの場合は標準でgitがインストールされているのでgitコマンドが標準で利用できます。windowsの方は自力でインストールしましょう。http://themes.gohugo.io/material-design/ の Installation 通りにするだけで大丈夫です。単にフォルダをダウンロードしているだけです。
$ mkdir themes
$ cd themes
$ git clone https://github.com/pdevty/material-design
実際に実行すると、以下のようになります。
tree-no-iMac:hoge tree$ ll
total 8
drwxr-xr-x 2 tree staff 68B 10 19 00:05 archetypes
-rw-r--r-- 1 tree staff 107B 10 19 00:05 config.toml
drwxr-xr-x 3 tree staff 102B 10 19 00:55 content
drwxr-xr-x 2 tree staff 68B 10 19 00:05 data
drwxr-xr-x 2 tree staff 68B 10 19 00:05 layouts
drwxr-xr-x 7 tree staff 238B 10 19 00:05 public
drwxr-xr-x 2 tree staff 68B 10 19 00:05 static
tree-no-iMac:hoge tree$ mkdir themes
tree-no-iMac:hoge tree$ cd themes/
tree-no-iMac:themes tree$ git clone https://github.com/pdevty/material-design
Cloning into 'material-design'...
remote: Counting objects: 162, done.
remote: Total 162 (delta 0), reused 0 (delta 0), pack-reused 162
Receiving objects: 100% (162/162), 2.22 MiB | 564.00 KiB/s, done.
Resolving deltas: 100% (54/54), done.
Checking connectivity... done.
テーマをサイトに反映する
HUGO CLI で反映
HUGO CLIで指定します。例えばmaterial-designなら、以下のように起動します。
hugo server -w -D -t material-design
「-t テーマ名（themesフォルダにcloneされたフォルダ名）」をつけると、テーマを反映させる事ができます。テーマの切り替えは引数で簡単に変更する事ができます。いくつか気になるテーマをダウンロードして、切り替えて挙動や見た目を確認したりする事も簡単です。
テーマを削除したい場合
テーマを削除したい場合は単純にgit cloneしたフォルダを削除するだけです。
material-designを適用したトップページ
こんな感じになりました。
記事がある場合のトップページ
広告