HUGO で静的サイトを構築する
HUGO は、静的な Web サイトを構築する静的サイトジェネレータのひとつです。
静的サイトジェネレータは、Markdown などで書かれたファイルと静的なコンテンツのテンプレートをビルドして HTML を生成します。
HUGO は Golang で作られており、他の静的サイトジェネレータに比べて、HTML への変換の早さが特徴です。 このブログも HUGO を使って作成しています。
この記事では、HUGO の Quick Start をもとに、 HUGO での Web サイト構築について説明します。
動作を確認した環境
- macOS Mojave 10.14.6
- Homebrew 2.1.11
- Git 2.23.0
- HUGO 0.58.2
HUGO のインストール
ここでは、macOS へのインストール方法を説明します。 他の OS でのインストールは、Install Hugo を確認してください。
HUGO は Homebrew で提供されているため、brew コマンドでインストールします。
brew install hugo
バージョンを表示してインストールできたかを確認します。 次のように、バージョン番号が表示されれば成功です。
$ hugo version
Hugo Static Site Generator v0.58.2/extended darwin/amd64 BuildDate: unknown
サイトの作成
hugo new site コマンドで、サイトのプロジェクトを作成します。今回は「hugo-example」という名前のサイトを作成します。
$ hugo new site hugo-example
Congratulations! Your new Hugo site is created in /Users/chick-p/Workspace/hugo-example.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
hugo-example というディレクトリとその下にファイル群が作成されます。
$ tree hugo-example
hugo-example # ... HUGO のファイル群
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
テーマの追加
このままでは静的なコンテンツを生成するためのテンプレートファイルがなく、ビルドできないためテーマを追加します。
テーマファイルは自分で作ることもできますが、ここでは公開されているテーマのひとつ、Ananke theme を使います。 Hugo Themesにさまざまなテーマが公開されています。
テーマは Git の submodule として追加します。
# HUGO プロジェクトのルートディレクトリに移動
cd hugo-example
# Git の初期化とコミット作成
git init
git add .
git commit -m "first commit"
# themes ディレクトリ以下に テーマファイルを追加
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
# 確認
$ tree .
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
└── ananke # ... 追加したテーマ
プロジェクトのルートディレクトリ直下の設定ファイル config.toml にテーマの設定を追加します。
# テーマの設定
echo 'theme = "ananke"' >> config.toml
config.toml の中身です。theme にテーマ名を指定することで、ビルドするテーマを指定できます。
baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
コンテンツファイルの追加
記事となるコンテンツファイルを追加します。
content ディレクトリの下に記事ファイルを追加します。 また hugo new セクション名/ファイル名 コマンドで、content ディレクトリの下にセクションのカテゴリを作り、ファイルを追加します。 hugo new コマンドで、posts というセクションでファイルを追加します。
# コンテンツファイルの作成
hugo new posts/my-first-posts.md
# 確認
$ tree .
.
├── ...
├── content
│ └── posts
│ └── my-first-posts.md # 追加したコンテンツファイル
├── ...
content/posts/my-first-posts.md の中身です。 記事の生成に必要な独自変数がついた形でファイルが生成されています。
---
title: "My First posts"
date: 2019-09-30
draft: true
---
| 変数名 | 値 |
|---|---|
| title | 記事タイトル |
| date | 記事の日付 |
| draft | 下書きフラグ |
記事の内容は、こんな風に「---」（Front Matter）より下に追記していきます。
---
title: "My First postss"
date: 2019-09-30
draft: true
---
## 概要
ここは概要です。
Markdown 形式で書いていけば、いい感じに記事ができます。
ローカルサーバーでの確認
ローカルに HUGO サーバーを立ち上げ、サイトを確認します。
-D オプションを付けると、下書きの記事（draft が trueのファイル）を含めてビルドします。
# サーバーの立ち上げ
hugo serve -D
http://localhost:1313/ にアクセスし、サイトを確認します。 次のようなページが表示されれば成功です。 
静的ファイルの生成
次のコマンドで、public ディレクトリ直下に HTML ファイルを生成できます。
# 静的ファイルを生成
hugo
# 確認
$ tree .
.
├── ...
├── public
│ ├── 404.html
│ ├── categories
│ │ ├── index.html
│ │ └── index.xml
│ ├── dist
│ │ ├── css
│ │ │ └── app.d98f2eb6bcd1eaedb7edf166bd16af26.css
│ │ └── js
│ │ └── app.3fc0f988d21662902933.js
│ ├── images
│ │ └── gohugo-default-sample-hero-image.jpg
│ ├── index.html
│ ├── index.xml
│ ├── sitemap.xml
│ └── tags
│ ├── index.html
│ └── index.xml
├── ...
まとめ
HUGO を使うと Markdown 形式のファイルで記事を生成でき、かつローカルサーバーで動作確認できます。 生成した静的ファイル一式を S3 などのストレージサービスに配置しホスティングすれば、簡単にサイトを公開できます。