Posts

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>

ファイルの構成

  1. 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” がデフォルト

  2. ヘッド部分:

もっと読む
Posts

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テーマのディレクトリ構造は、サイトの見た目と機能を定義する重要な要素です。以下に各ディレクトリの役割を解説します。

もっと読む
Posts

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/ディレクトリに出力）。

もっと読む
Posts

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ファイルを編集して、サイトの基本設定を行います:

もっと読む