HUGOを使って静的サイトを構築するチュートリアル
HUGOを使って静的なサイトを構築するチュートリアルです。
目次
What is HUGO?
公式によれば、
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
ということで、オープンソースの静的サイトジェネレーターとのことした。特徴としては
Blistering Speed
で、サイトの生成が爆速ということらしいです。静的サイトジェネレーターは他にも様々ありますが、それらを比較している記事（👉静的サイトジェネレータの生成時間比較 written by tamura at 2015/11/20)によると、やっぱり爆速みたいです。
また、記事をmarkdown形式で書くことができる点も魅力的です。シンプルなシンタックスで構造的な文章をかけてしまうのが好きです。
加えてHUGOはGolangで書かれているらしく、Golangに魅せられている自分としてはさらに興味が湧きました。
採用事例としては1Passwordのサポートページなどがあるみたいです。他にも事例が紹介されていましたが、勉強不足なのか知らないサービスばかりでした…。
HUGO公式様がQuick Startを公開していますので、それに沿って進めて行きたいと思います。
Quick Start
今回はHUGOを使ってAnankeというテーマを用いた静的なサイトを制作します。なお用いている環境は次の通りです。
OS: macOS High Sierra Version 10.13.6
STEP 1: Install HUGO
まずはHUGOをインストールしましょう。Homebrew1があれば非常に簡単です。
$ brew install hugo
インストールが完了したらバージョンを確認して、インストールが正常に終了したことを確認します。本稿執筆時では次のようになりました。
$ hugo version
Hugo Static Site Generator v0.45.1/extended darwin/amd64 BuildDate: unknown
STEP 2: Create a New Site
下のように実行するとサイトの雛形ができます。
$ hugo new site quickstart
Congratulations! Your new Hugo site is created in /Users/ozaki/hugo-practice/quickstart.
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.
これでquickstart という名前のHUGOサイトができました。
STEP 3: Add a Theme
HUGOでは公式から様々なサイトテーマが提供されています（🤛こちら）。結構な数があるので好みのテーマを選んでみるのもいいかもしれません。今回はAnankeというテーマを使います。
提供されているテーマはgithubにリポジトリとして置いてあるのでgit submodule addコマンドでローカルに持ってきます。
$ cd quickstart
$ ls .
archetypes config.toml content data layouts static themes
$ git init
Initialized empty Git repository in ...
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Cloning into '/Users/ozaki/hugo-practice/quickstart/themes/ananke'...
remote: Counting objects: 1109, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 1109 (delta 0), reused 1 (delta 0), pack-reused 1104
Receiving objects: 100% (1109/1109), 2.51 MiB | 1.79 MiB/s, done.
Resolving deltas: 100% (591/591), done.
次に~/quickstart内にあるconfig.toml2ファイルにthemeとしてanankeを使うことを書き記します。
$ echo 'theme = "ananke"' >> config.toml
では、記事を追加してみましょう。
$ hugo new post/my-first-post.md
HUGOではquickstart/content/以下にコンテンツを格納します。
$ tree ~/quickstart
~/quickstart
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── post
│ └── my-first-post.md
├── data
├── layouts
├── resources
├── static
└── themes
└── ananke
├── LICENSE.md
.
.
.
これでサイトは完成しました。非常に簡単ですね。
ローカルサーバを立ち上げてブラウザでhttp://localhost:1313を叩いてみましょう。
$ hugo server -D
hugo serverコマンドでサーバーが立ち上がります。HUGOではサーバーがコンテンツの変更を常時監視して、変更があればサーバーの再起動なしで反映させることができます。便利ですね。
STEP 4: Customize the Theme
すでにサイトはいい感じに出来上がっていますが、自分のサイトなのでタイトルなどを変更してみましょう。サイトの設定事項諸々はconfig.tomlに記述します。
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
新たな記事を執筆したい時は
$ hugo new <article-title>.md
とすることで、<site-name>/content/下にマークダウンファイルが生成されます。この際に、日付やタイトルは自動で設定されます。自動設定される属性を自分で追加することも可能です。また記事をディレクトリで分類したい時には
$ hugo new <directory-name>/<article-name>.md
とすれば<site-name>/content/<directory-name>下にマークダウンファイルが生成されます。
自動的に生成された記事はデフォルトでは
--
title: sample article
date: 2018-07-30T00:55:43+09:00
draft: true
---
以下記事内容
.
.
.
のようになっています。記事を公開する時はdraft: falseにします。こうすることでローカルでも記事をブラウザから確認できるようになります。
サイトができてしまえば、あとはガンガン記事を追加してくだけですね。GitHub Pagesのようなホスティングサービスを使って公開するのに次は挑戦します。
-
Homebrewとは一般に「パッケージ管理システム」と称されるソフトウェアの一つです。パッケージ管理システムとは、パッケージ（あるソフトウェアについて実行ファイルや設定ファイル、ライブラリなどを含めて一つのファイルとしたものをパッケージと呼ぶ）のインストール/アンインストールを一元的に管理するものです。これを使うと、ソフトウェアのバージョンが更新された時に容易に新しいものをインストール、古い方をアンインストールすることができます。詳しくはやや古い記事ですが、@omega999さんがhomebrewとは何者か。仕組みについて調べてみたで詳細に調査されています。 ↩ -
TOMLとは「GitHubの中の人が提案した設定ファイルを記述するための小さな言語」（「設定ファイル記述言語 TOML」written by @b4b4r07より引用）のことであるらしいです。上記記事で詳細に書かれていました。 ↩