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サイトの作成方法

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

もっと読む