Hugo のテーマを作ってみます

今のこのブログも自分で作成したテーマを適用しているのですが、もう 2 年も経過していたので、新しい Hugo のテーマを作ってみたいと思います。

環境

  • Hugo Static Site Generator v0.31.1

テーマの骨組みを作成する

テーマの作成は次のページを参考に進めてみます。

Create a Theme | Hugo

テーマの骨組みを作成するコマンドを入力します。

$ hugo new theme <THEMENAME>
Error: Unable to locate Config file. Perhaps you need to create a new site.
       Run `hugo help new` for details. (Config File "config" Not Found in "[/path/to/dir/<THEMENAME>]")

Hugo のサイトのディレクトリーじゃなかったのでエラーになりました。

サイトの骨組みを作成する

テーマだけ作成したかったので、そのためのサイトを先に作成しました。 サイトの作成は次のページを参考にしました。

Quick Start | Hugo

サイトの骨組みを作成するコマンドを入力します。

$ hugo new site <SITEPATH>
Congratulations! Your new Hugo site is created in /path/to/dir/<SITEPATH>.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
$ ls -l
total 0
drwxrwxrwx 0 user user 512 Mar 13 22:17 archetypes
-rw-rw-rw- 1 user user  82 Mar 13 22:17 config.toml
drwxrwxrwx 0 user user 512 Mar 13 22:17 content
drwxrwxrwx 0 user user 512 Mar 13 22:17 data
drwxrwxrwx 0 user user 512 Mar 13 22:17 layouts
drwxrwxrwx 0 user user 512 Mar 13 22:17 static
drwxrwxrwx 0 user user 512 Mar 13 22:21 themes

サイトの骨組みができました。

テーマの骨組みを作成する２

では、改めて、テーマを作成するコマンドを入力します。

$ hugo new theme <THEMENAME>
$ ls -l themes/<THEMENAME>/
total 2
drwxrwxrwx 0 user user  512 Mar 13 22:21 archetypes
drwxrwxrwx 0 user user  512 Mar 13 22:21 layouts
-rw-rw-rw- 1 user user 1081 Mar 13 22:21 LICENSE.md
drwxrwxrwx 0 user user  512 Mar 13 22:21 static
-rw-rw-rw- 1 user user  437 Mar 13 22:21 theme.toml

themes/<THEMENAME> ディレクトリーの中に、 3 つのディレクトリーと 2 つのファイルが作成されました。

それぞれ次のような意味を持つようです。

  • archetypes: 記事の原型のディレクトリー
  • layouts: テーマのレイアウトディレクトリー
  • LICENSE.md: ライセンスが記載されたファイル
  • static: テーマの静的コンテンツディレクトリー
  • theme.toml: テーマの設定ファイル

テーマを作成していくにあたっては layouts ディレクトリーの中のファイルを作成していくことになるようです。

layouts ディレクトリーの中のファイルは次のようなものがあるようです。

  • シングルコンテンツ:
    • layouts/_default/single.html
    • 記事を表示するページのレイアウトファイル
  • コンテンツのリスト
    • layouts/_default/list.html
    • 記事の一覧を表示するページのレイアウトファイル
  • 部分的なテンプレート
    • layouts/partials/*.html
    • サイトの中の共通のレイアウトファイル(ヘッダー、フッター)

static ディレクトリーの中のファイルは次のようなものがあるようです。

  • css
  • js
  • img

終わり

いったんここまでにします。

方針として、今もそうですが、シンプルなものにしたいです。 CSS もあまり手を入れない形にしたいです。

7 April 2018 追記

次の記事を書きました。