HUGOで静的サイトを作成してみた

# HUGOを使って静的サイトを構築するチュートリアル
![`HUGO` logo](https://i2.wp.com/www.karakaram.com/wp-content/uploads/2018/04/hugo-logo.png?zoom=2&resize=565%2C151&ssl=1)

`HUGO`を使って静的なサイトを構築するチュートリアルです。

#### 目次
1. [What is `HUGO`?](#what-is-hugo)
2. [Quick Start](#quick-start-top)
	1. [STEP 1: Install `HUGO`](#install-hugo)
	2. [STEP 2: Create a New Site](#create-a-new-site)
	3. [STEP 3: Add a Theme](#add-a-theme)
	4. [STEP 4: Customize the Theme](#customize-the-theme)
	
	
## <a name = "what-is-hugo">What is `HUGO`?</a>
[公式](https://gohugo.io/)によれば、
> 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](http://tamura.goga.co.jp/article/429818193.html))によると、やっぱり爆速みたいです。

また、記事をmarkdown形式で書くことができる点も魅力的です。シンプルなシンタックスで構造的な文章をかけてしまうのが好きです。

加えて`HUGO`は`Golang`で書かれているらしく、`Golang`に魅せられている自分としてはさらに興味が湧きました。

採用事例としては[1Passwordのサポートページ](!https://support.1password.com)などがあるみたいです。他にも事例が紹介されていましたが、勉強不足なのか知らないサービスばかりでした…。

`HUGO`公式様が[Quick Start](https://gohugo.io/getting-started/quick-start/)を公開していますので、それに沿って進めて行きたいと思います。

## <a name = "quick-start-top">Quick Start</a>
今回は`HUGO`を使って`Ananke`というテーマを用いた静的なサイトを制作します。なお用いている環境は次の通りです。

```
OS: macOS High Sierra Version 10.13.6
```

### <a name = "install-hugo">STEP 1: Install `HUGO`</a>
まずは`HUGO`をインストールしましょう。`Homebrew`[^homebrew]があれば非常に簡単です。

```
$ brew install hugo

```

インストールが完了したらバージョンを確認して、インストールが正常に終了したことを確認します。本稿執筆時では次のようになりました。

```
$ hugo version
Hugo Static Site Generator v0.45.1/extended darwin/amd64 BuildDate: unknown
```

### <a name = "create-a-new-site">STEP 2: Create a New Site</a>
下のように実行するとサイトの雛形ができます。

```
$ 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`サイトができました。

### <a name = "add-a-theme">STEP 3: Add a Theme</a>
`HUGO`では公式から様々なサイトテーマが提供されています（🤛[こちら](https://themes.gohugo.io/)）。結構な数があるので好みのテーマを選んでみるのもいいかもしれません。今回は[`Ananke`](https://themes.gohugo.io/gohugo-theme-ananke/)というテーマを使います。
![`Ananke`のテーマイメージ](https://d33wubrfki0l68.cloudfront.net/9c91005983775b36c0467f3875082a075eea026d/976f1/gohugo-theme-ananke/screenshot-gohugo-theme-ananke_hu05e872823bf4dc022f268827105dd45c_394121_1500x1000_fill_catmullrom_top_2.png)

提供されているテーマは`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.toml`[^toml]ファイルに`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`ではサーバーがコンテンツの変更を常時監視して、変更があればサーバーの再起動なしで反映させることができます。便利ですね。

### <a name = "customize-the-theme">STEP 4: Customize the Theme</a>
すでにサイトはいい感じに出来上がっていますが、自分のサイトなのでタイトルなどを変更してみましょう。サイトの設定事項諸々は`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`のようなホスティングサービスを使って公開するのに次は挑戦します。

[^github-pages]: みんな大好きGitHubによる静的サイトホスティングサービス。GitHubアカウントがあれば誰でもできます。詳しくは公式ヘルプ（🤛[What is GiuHub Pages?](https://help.github.com/articles/what-is-github-pages/#usage-limits))まで。

[^homebrew]: `Homebrew`とは一般に「**パッケージ管理システム**」と称されるソフトウェアの一つです。パッケージ管理システムとは、**パッケージ**（あるソフトウェアについて実行ファイルや設定ファイル、ライブラリなどを含めて一つのファイルとしたものをパッケージと呼ぶ）**のインストール/アンインストールを一元的に管理する**ものです。これを使うと、ソフトウェアのバージョンが更新された時に容易に新しいものをインストール、古い方をアンインストールすることができます。詳しくはやや古い記事ですが、[@omega999](!https://qiita.com/omega999)さんが[homebrewとは何者か。仕組みについて調べてみた](!https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)で詳細に調査されています。

[^toml]: [TOML](https://github.com/toml-lang/toml)とは「**GitHubの中の人が提案した設定ファイルを記述するための小さな言語**」（「[設定ファイル記述言語 TOML](https://qiita.com/b4b4r07/items/77c327742fc2256d6cbe)」written by [@b4b4r07](https://qiita.com/b4b4r07)より引用）のことであるらしいです。上記記事で詳細に書かれていました。