layouts/baseof.html
Hugo のlayouts/baseof.html について
この baseof.html ファイルは Hugo テーマの基本的なレイアウト構造を定義しています。これはサイト全体の「骨組み」として機能し、他のテンプレートファイルがこれを拡張して使用します。
$ cat themes/my-theme/layouts/baseof.html
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
{{ partial "head.html" . }}
</head>
<body>
<header>
{{ partial "header.html" . }}
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
{{ partial "footer.html" . }}
</footer>
</body>
</html>
ファイルの構成
DOCTYPE と HTML 宣言:
<!DOCTYPE html> <html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">site.Language.LanguageCode: サイトの言語コード(例: “en”, “ja”)を取得site.Language.LanguageDirection: 文字の表示方向(左から右 “ltr” または右から左 “rtl”)を取得。設定されていない場合は “ltr” がデフォルト
ヘッド部分:
Hugo の自作テーマ作成
Hugo でオリジナルのテーマを作成する場合、hugo new theme コマンドを使用することで基本的なテーマの骨組みを簡単に生成できます。ここでは、自作テーマ「my-theme」の作成から開発までのプロセスを解説します。
1. テーマの基本構造を作成する
まず、以下のコマンドで新しいテーマの基本構造を生成します:
hugo new theme my-theme
このコマンドを実行すると、themes/my-theme/ ディレクトリに以下のような構造が作成されます:
$ tree themes/my-theme
themes/my-theme
├── archetypes
│ └── default.md
├── assets
│ ├── css
│ │ └── main.css
│ └── js
│ └── main.js
├── content
│ ├── _index.md
│ └── posts
│ ├── _index.md
│ ├── post-1.md
│ ├── post-2.md
│ └── post-3
│ ├── bryce-canyon.jpg
│ └── index.md
├── data
├── hugo.toml
├── i18n
├── layouts
│ ├── _partials
│ │ ├── footer.html
│ │ ├── head
│ │ │ ├── css.html
│ │ │ └── js.html
│ │ ├── head.html
│ │ ├── header.html
│ │ ├── menu.html
│ │ └── terms.html
│ ├── baseof.html
│ ├── home.html
│ ├── page.html
│ ├── section.html
│ ├── taxonomy.html
│ └── term.html
└── static
└── favicon.ico
14 directories, 24 files
2. Hugoテーマのディレクトリ構造解説
Hugoテーマのディレクトリ構造は、サイトの見た目と機能を定義する重要な要素です。以下に各ディレクトリの役割を解説します。
Hugoのディレクトリ構造
1. 新しいサイトの作成
hugo new site my-website
2. サイトのディレクトリ構造
% tree my-website
my-website
├── archetypes
│ └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes
9 directories, 2 files
主要ディレクトリ
archetypes/ - 新しいコンテンツファイルのテンプレート
default.md-hugo newコマンドで作成される記事の基本テンプレート
assets/ - Sassファイルや処理が必要なファイル(Hugo Pipesで処理される)
content/ - サイトのすべてのコンテンツ(マークダウン記事など)が格納される場所
data/ - 設定ファイルやデータファイル(YAML、JSON、TOMLなど)を格納
hugo.toml - サイトの主要設定ファイル(hugo.yaml, hugo.jsonも可)
i18n/ - 多言語化(国際化)のための翻訳ファイルを格納
layouts/ - HTMLテンプレート(サイトのデザインとレイアウト)を格納
static/ - 処理なしでそのまま公開ディレクトリにコピーされるファイル(画像、CSS、JSなど)
themes/ - テーマを格納するディレクトリ(テーマを使用する場合)
サイト構築時、Hugoはこれらのディレクトリからコンテンツを読み取り、静的HTMLサイトを生成します(通常はpublic/ディレクトリに出力)。
Hugoサイトの作成方法
Hugoサイトの作成方法
はじめに
Hugoは、Goで書かれた高速な静的サイトジェネレーターです。シンプルでありながら柔軟性が高く、ブログやポートフォリオ、ドキュメントサイトなど様々なウェブサイトを作成できます。
1. Hugoのインストール
Windowsの場合
# Chocolateyを使用する場合
choco install hugo -confirm
# または、Scoopを使用する場合
scoop install hugo
macOSの場合
brew install hugo
Linuxの場合
# Snapを使用する場合
sudo snap install hugo
# または、aptを使用する場合(Ubuntu/Debian)
sudo apt install hugo
2. 新しいサイトの作成
# 新しいHugoサイトを作成
hugo new site my-website
cd my-website
3. テーマの追加
# テーマをサブモジュールとして追加する例(Anaという人気テーマ)
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# config.tomlにテーマを設定
echo 'theme = "ananke"' >> config.toml
4. コンテンツの作成
# 最初の投稿を作成
hugo new posts/my-first-post.md
新しく作成されたcontent/posts/my-first-post.mdファイルを編集します:
---
title: "私の最初の投稿"
date: 2023-05-01T10:00:00+09:00
draft: false
---
## こんにちは、Hugo!
これは私の最初のHugo投稿です。
5. サイトの設定
config.tomlファイルを編集して、サイトの基本設定を行います: