mainvisual

前回の記事で、新しくサイト立ち上げ直すことにしました。 そこで、今のテーマをブラッシュアップするのに、新しく1から作り直すことにしました。

Hugoでテーマを作成することはそうそうあることでは無いと思っています。 そこで、私がどのような手順でテーマを作成したのかを記録に残して、 皆さんに伝えていければと思います。

Hugo公式テーマ作成: https://gohugo.io/tutorials/creating-a-new-theme/

テーマのスケルトンを作成

まずは、テーマのスケルトンを作成します。今回、テーマの名前はhugo-v8にします。 v8はnodejsとV8エンジンから取っています。

このコマンドを実行するときには、hugoのソースフォルダ内部にて実行する必要があります。

$ hugo new theme hugo-theme-v8

git管理をしましょう

$ cd themes/hugo-theme-v8
$ git init && \
  git add -A && \
  git commit -m "first commit"
$ echo "# hugo-theme-v8" >> README.md && \
  git add README.md && \
  git commit -m "add READNE.md"
$ git remote add origin git@github.com:k4zzk/hugo-theme-v8.git && \
  git push -u origin master

gitの管理には、git submoduleを使いましょう。

$ cd themes
$ rm -fr hugo-theme-v8
$ git submodule add https://github.com/k4zzk/hugo-theme-v8.git

中身を確認しましょう

$ find themes/hugo-theme-v8 -type f | grep -v .git | xargs ls -l

-rw-r--r-- 1 k4zzk staff 1081 12 23 02:36 themes/hugo-theme-v8/LICENSE.md
-rw-r--r-- 1 k4zzk staff   16 12 23 02:41 themes/hugo-theme-v8/README.md
-rw-r--r-- 1 k4zzk staff    8 12 23 02:36 themes/hugo-theme-v8/archetypes/default.md
-rw-r--r-- 1 k4zzk staff    0 12 23 02:36 themes/hugo-theme-v8/layouts/404.html
-rw-r--r-- 1 k4zzk staff    0 12 23 02:36 themes/hugo-theme-v8/layouts/_default/list.html
-rw-r--r-- 1 k4zzk staff    0 12 23 02:36 themes/hugo-theme-v8/layouts/_default/single.html
-rw-r--r-- 1 k4zzk staff    0 12 23 02:36 themes/hugo-theme-v8/layouts/index.html
-rw-r--r-- 1 k4zzk staff    0 12 23 02:36 themes/hugo-theme-v8/layouts/partials/footer.html
-rw-r--r-- 1 k4zzk staff    0 12 23 02:36 themes/hugo-theme-v8/layouts/partials/header.html
-rw-r--r-- 1 k4zzk staff  458 12 23 02:36 themes/hugo-theme-v8/theme.toml

各ファイルの説明はこんな感じです。

  • layouts/404.html: 404ページのレイアウト
  • layouts/_default/list.html: 記事リストのレイアウト
  • layouts/_default/single.html: 記事本文のレイアウト
  • layouts/index.html: サイトトッページのレイアウト
  • layouts/partials/footer.html: 共通HTML(footer)
  • layouts/partials/header.html: 共通HTML(header)
  • theme.toml: テーマの設定

レイアウトの作成

では、ページを作っていきます。まずは、大枠のレイアウトを作りましょう。 layouts/index.htmlを作り込んでいきましょう!

と、その前にどのような構成で作るのかを決めておきましょう。 私の場合、テーマの修正を頻繁にのするので、レイアウトの見通しがよく、 自分がひと目見ただけで構造がわかるようにしています。

実際に、作ってみるときもそれを基準にするといいと思います。

もっと知りたいなと思ったときは!

その他、この記事でわからないことがあったら、teratialというサービスを利用するといいと思います。 勇者が初歩的な質問からマニアックな質問に幅広く答えてくれますよ! 是非、一度使ってはいかがでしょうか?

参考サイト

comments powered by Disqus