静的サイトジェネレータ「Hugo」入門マニュアル

最近静的サイトというものが注目を浴びています。いわゆるPHPとかでサイトを生成するのではなく、html形式で吐き出してしまうと。

動的要素は外部サイトやAPIを用いて、サーバーレスに構成しようという仕組みですね。

その静的サイトジェネレータの一つ、Hugoについてまだ日本語の開設が乏しいので、日本語版マニュアルを自作してみました。まだまだ追記しようとは思いますが。とりあえず有料版として配布してみます。

随時追記予定。まとまったらそのうち装丁とかしてpdfやepubでも販売します。

はじめに

Hugoとは

hugoは静的サイトジェネレータと呼ばれるソフトです。 マークダウンファイルからhtmlを作成し、これを静的ホスティングサービスに置くことで高速、かつ安全なサイトを構築できます。

wordpressのようなCMSでは常にセキュリティとの戦いになり、プラグインや本体のアップデートが面倒になって辞めた、という人が多々見られます。

静的サイトではそもそもデータベースもユーザー管理も存在しないため、そのような危険は一切起こりません。

hugoはgo言語で記載されていますが、別にgo言語本体をインストールする必要はありません。 バイナリを一つインストールするだけで終わります。

テーマではgo言語の記述が一部入っていますが、既存テーマを使うのであればまったくそのあたりの知識も不要となっています。

ただし動的なサイト構築ができないため、バックエンドでAPIを叩いたりデータベースから情報を引っ張るといったことはできません。そういうことをしたいのであれば、別途APIサーバーを立てるなりの対応が必要となるでしょう。

本ドキュメントについて

本書は、静的サイトジェネレータHugoの解説書です。インストールから基本の使い方、テーマの作成方法、デプロイまで一通りの内容を解説しています。 また、バージョンはHugo0.74を対象としています。

より詳細なマニュアルは 

Hugo Documentation

をご確認ください。

hugoのインストールと設定

hugoのインストール

hugoはOSに依存せずに実行することが可能です。

インストールの詳細は

Install Hugo

こちらのページを確認ください。

windows(PowerShell)

PowerShellを使う場合は直接バイナリをダウンロードしたほうが楽ですね。こちらからダウンロードください。

Releases ツキ gohugoio/hugo

windows(WSL)

WSLの場合はaptでインストールできます。

sudo apt-get install hugo

Ubuntu系以外の場合もdnfやpacmanでインストール可能です。

mac

macの場合はHomebrewを使うと良いかと思います。

brew install hugo

Linux

こちらはWSLと同じ手順でインストールが可能です。

sudo apt-get install hugo

Ubuntu系以外の場合もdnfやpacmanでインストール可能です。

docker

Dockerも提供されているので、こちらを利用することも可能です。コマンドイメージは

https://hub.docker.com/r/klakegg/hugo

こちらに記載されています。

初期化

それではこれから実際に使ってみましょう。

まずはプロジェクトを作成します。 以下のようにターミナルから打ち込んでください。

hugo new site mysite

Dockerを使用の場合は下記のようにターミナルから打ち込んでください。

docker run --rm -it \
 -v $(pwd):/src \
 klakegg/hugo:latest \
 new site mysite

これでmysiteディレクトリが作られました。

ディレクトリ構成

ディレクトリ内には下記のようなファイルが入っているかと思われます。

$ ls
archetypes  config.toml  content  data  layouts  public  resources  static  themes

一つ一つ見ていきましょう。

archetypes

記事を新規作成する時のテンプレート(scaffold)です。

config.toml

サイトのコンフィグファイルです。

content

サイトのコンフィグファイルです。

data

yamlやjsonを格納し、リストのようにアクセスできます。
都道府県リストやカテゴリーリストのような静的ファイルですね。

layouts

テーマを使用しない場合に読み込まれるレイアウトフォルダです。

public

静的ファイルをジェネレートした時、ここにファイルが出力されます。

static

画像やcssを格納します。テーマやコンテンツからはドキュメントルートの位置になります。

themes

サイトのテーマ（テンプレート）が格納されます。なおhugoにはデフォルトのテーマが入っていないため、自分でテーマを入れる必要があります。

テーマのインストール

まずはanankeというテーマをインストールしてみましょう。

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

hugoのマニュアルを見る限り、gitのサブモジュールとしてインストールしている例が多いですが、必ずしもそうする必要はありません。

記事作成

続いて記事を作成しましょう。

hugo new posts/hello-world.md

これでcontent/posts/hello-world.mdが生成されました。ファイルの中身は

----
title: "hello-world"
date: 2020-09-10T16:58:59+09:00
draft: true
----

のような形になっています。この----で囲まれた部分がメタ情報となっています。詳細は記事のヘッダー情報セクションを参照してください。
----以下がブログ本文となります。

サーバー起動

これで準備は整いました。起動してみましょう。

hugo server -D

なお、アクセスできるIPアドレスがlocalhostに制限されていますので、VMやDocker等リモートホストにインストールした場合は下記のようにしてください。

hugo server -D --bind 0.0.0.0 --baseURL リモートホストのURL

起動したら、ブラウザからhttp://localhost:1313へアクセスしてみてください。画面が表示されるかと思います。

静的サイト生成

静的サイトの生成は、単純にhugoと叩くだけです。

hugo

これでpublic配下にファイルが書き出され、これを静的サイト用サーバーへ置けば公開されます。なお、-Dをつけるとdraft記事が、-Eをつけると有効期限切れの記事が、-Fをつけると未来記事がそれぞれ公開対象になります。

こうしてできた静的ファイルを静的ホスティングサイトへアップロードすれば完成です。以下、代表的な静的ホスティングサイトを紹介します。

github pages

githubの静的ホスティングサービスです。githubにpushしたファイルをそのままホスティングできます。

aws s3

amazonのs3ですが、こちらもpublicに設定すれば静的ホスティングが可能です。ドメインを設定するにはcloudfrontとの連携が必要です。

GCP storage

s3とほぼ同様の仕組みでファイルをホスティングすることができます。

Netlify

人気の高い静的ホスティングサービスです。それなりの負荷にも対応しています。

もちろん静的ファイルなので、一般的なレンタルサーバーに置いても構わないと思います。