Hugo テーマ 2. まずは作ってみる

2026-06-15 00:11:30 Hugo

最終更新日から %s 以上が経過しています。
内容が古くなっている可能性があるのでご注意ください。

テーマを作りプロジェクトに適用するところまでを解説します。

テーマを作成する

テーマの作成にもコマンドがあります。これは単純にテーマに必要なファイルを作成してくれるコマンドです。

ここでは “derty” という名前で作成します。

> hugo new theme derty

Creating new theme in (省略)/themes/derty

Note
実行するコマンドは “>” に続けて記載します。出力例は続く行に “>” なしで記載します。

上記のコマンドを実行すると、以下のようにファイルが作成されます。

作成されたファイル (長いので折り畳み)

\---themes
    \---derty
        |   hugo.toml
        |
        +---archetypes
        |       default.md
        |
        +---assets
        |   +---css
        |   |   |   main.css
        |   |   |
        |   |   \---components
        |   |           footer.css
        |   |           header.css
        |   |
        |   \---js
        |           main.js
        |
        +---content
        |   |   _index.md
        |   |
        |   \---posts
        |       |   post-1.md
        |       |   post-2.md
        |       |   _index.md
        |       |
        |       \---post-3
        |               bryce-canyon.jpg
        |               index.md
        |
        +---data
        +---i18n
        +---layouts
        |   |   baseof.html
        |   |   home.html
        |   |   page.html
        |   |   section.html
        |   |   taxonomy.html
        |   |   term.html
        |   |
        |   \---_partials
        |       |   footer.html
        |       |   head.html
        |       |   header.html
        |       |   menu.html
        |       |   terms.html
        |       |
        |       \---head
        |               css.html
        |               js.html
        |
        \---static
                favicon.ico