HUGOを使う

Hexoを使ってこのサイトのページを作成していましたが、中国語が気になり始めて、Hugoを使ってみることにしました。 JekyllとHexoを使ってきましたが、あまり早くはなかったですし、Hugoは早いというのがいいということです。

環境

OS X El Capitan バージョン 10.11.4
Hugo バージョン v0.15

インストール

Homebrewを先にインストールしておきます。

Homebrewのインストール

Hugoをインストールします。

$ brew update && brew install hugo

確認のコマンドを2つ入力しました。

$ hugo help

$ hugo version

Scaffold

サイトの雛形となるディレクトリーの構成を作ります。ここではbookshelfという名前のディレクトリーで作りました。

$ hugo new site bookshelf
$ cd bookshelf

$ tree -a
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
└── static

5 directories, 1 file

各ディレクトリーは次のような意味があるようです。

archetypes: hugo new で新しい記事を追加する時に雛形となるようなファイルのディレクトリー
config.toml: サイトの設定ファイル、TOMLというもの(YAMLに似たような種類のものがいくつかあるんだ・・)
content: 記事、コンテンツのディレクトリー
data: データ、テーマを見ると多言語にする場合に言語別のファイルを用意しているようなものがある
layouts: レイアウト、テーマより優先するレイアウトのディレクトリー
static: 静的ファイル、画像やcssなどのそのまま公開するようなファイルのディレクトリー

コンテンツを追加する

content以下のパスを指定して追加するようです。

$ hugo new post/good-to-great.md

$ tree -a content/
content/
└── post
   └── good-to-great.md

1 directory, 1 file

追加された直後の内容は次の通りです。ファイルの先頭はTOMLで、YAMLでも書けるみたいですけど、Hugoの標準はTOMLのようです。そこにはdate、draft、titleが設定されていました。最初は公開されないドラフトの状態のようです。 titleはファイル名の-がスペースになったものでした。

$ cat content/post/good-to-great.md
+++
date = "2016-03-28T15:47:40+09:00"
draft = true
title = "good to great"

+++

追加したファイルは次のように編集しました。

$ cat content/post/good-to-great.md
+++
date = "2016-03-28T15:47:40+09:00"
draft = true
title = "good to great"

+++

I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great.

Hugo - Hugo Quickstart Guideでは、ここでローカルでサーバーを起動して確認しているんだけど、何も表示されないので次のステップのテーマを追加することにします。

テーマを追加する

themesディレクトリーを作成します。

$ mkdir themes && cd themes

Hugo Themes SiteからROBUSTというテーマを選んでみました。

$ git clone https://github.com/dim0627/hugo_theme_robust.git

ローカルでサーバーを起動して確認します。 --themeでテーマを指定しています。ドラフトの記事しか追加していないので、--buildDraftsと指定してドラフトの記事も表示されるようにしています。

$ cd ..
$ hugo server --theme=hugo_theme_robust --buildDrafts

http://localhost:1313/ にアクセスします。テーマが適用された記事が表示できました。

投稿を公開する

ドラフトから公開の状態にします。

$ hugo undraft content/post/good-to-great.md

記事のTOMLのdraftのところがfalseになりました。

$ cat content/post/good-to-great.md
+++
date = "2016-03-28T16:14:56+09:00"
draft = false
title = "good to great"

+++

I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great.

ウェブサイトを生成する

あとでGitHub Pagesにpushするので、設定ファイルのbaseurlをGitHub PagesのURLに変更しておきます。 baseurlのところがhttp://replace-this-with-your-hugo-site.com/になっています。

$ cat config.toml
baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

baseurlを変更したものです。

$ cat config.toml
baseurl = "http://<github-username>.github.io/bookshelf/"
languageCode = "en-us"
title = "My New Hugo Site"

サイトの生成の前にディレクトリーの構成を確認しておきます。

$ tree -a -L 2
.
├── archetypes
├── config.toml
├── content
│   └── post
├── data
├── layouts
├── static
└── themes
    └── hugo_theme_robust

8 directories, 1 file

17ミリ秒で生成できました。 1記事しかないのですが・・

$ hugo --theme=hugo_theme_robust
0 draft content
0 future content
1 pages created
2 paginator pages created
0 tags created
0 categories created
in 17 ms

publicというディレクトリーにサイトが生成されたようです。

$ tree -a -L 2
.
├── archetypes
├── config.toml
├── content
│   └── post
├── data
├── layouts
├── public
│   ├── 404.html
│   ├── categories
│   ├── css
│   ├── images
│   ├── index.html
│   ├── index.xml
│   ├── page
│   ├── post
│   ├── sitemap.xml
│   └── tags
├── static
└── themes
    └── hugo_theme_robust

15 directories, 5 files

GitHub Pagesにデプロイする

先にGitHubにbookshelfという名前のリポジトリーを作成しておきます。

bookshelf-publicという名前のディレクトリーを、最初に作ったbookshelfディレクトリーの外に作っているようなので、それに習って作りました。それからgitの設定をしました。

$ cd ..
$ mkdir bookshelf-public
$ cd bookshelf-public
$ git init
$ git remote add origin https://github.com/<github-username>/bookshelf.git

bookshelfディレクトリーで生成したpublic以下のファイルをコピーします。

$ cp -r ../bookshelf/public/ .

gh-pagesというブランチに変えます。プロジェクトページはこういう慣習になっているようです。

$ git checkout -b gh-pages

コピーしたファイルをGitHubにpushします。

$ git add --all
$ git commit -am "bookshelf added"
$ git push origin gh-pages

http://<github-username>.github.io/bookshelf/ にアクセスするとデプロイされたページが確認できました。

終わり

これから自分でテーマを作ってみようと思います。

参考

Hugo - Hugo Quickstart Guide

環境