hugo を使って爆速でブログ・サイトを作る - AWS S3 Cloudfront Route53

新たに記事投稿型の webサイトを構築しようと思い、hexoでも良かったんですが、せっかくなら使ったことのないFrameworkを使いたいと思い、今回は、多言語対応にも強い、GO言語で書かれたhugoを使ってみることにしました。


その際の構築手順をメモっておきます。

hugoインスコ

homebrew で入れる。

brew install hugo

サイト作成

作業dirで次のコマンドで作成します

hugo new site ~/○○○○○

結構時間かかる

テーマの追加

cd ○○○○○
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

設定ファイルにテーマを記述

echo 'theme = "ananke"' >> config.toml

記事作成

下記コマンドで記事を作成

hugo new posts/my-first-post.md

posts って部分は、contents以下のdir名になるので、なんでもOKです

作成された記事のファイルは下記

content/posts/my-first-post.md

このファイルをマークダウン形式で記述します。

ローカルで確認

hugo server -D
-D オプションは、ドラフト(下書き)記事もビルドするという意味

ドラフト機能

これは、Defaultで、下記ファイルの生成されるもとのファイルにて

archetypes/default.md
draft: true

この記述により、この記事はドラフトです。という内容になります。
その場合、ビルドした際、htmlファイルは生成されません。

ドラフト記事も含めてビルドする際(あんまり考えれらない)は、-D(–buildDrafts)コマンドを使うとhtmlファイルが生成されますが、
通常、記事中の、draft: falseに変更するのがいいと思います。

hugo undraft ○○○○

のundraftコマンドはなくなりました。

またドラフト中の記事の一覧を確認するには、

hugo list drafts

で確認できます。

http://localhost:1313/

で確認できます。

多言語対応

hugo は多言語対応に大変優れていますね。
とりあえず、日本語と英語を作成してみます。下記ファイルで設定を行います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
~/config.toml

DefaultContentLanguage = "en"
DefaultContentLanguageInSubdir = true
.
.
.

[Languages]
[Languages.en]
weight = 1

title = "○○○"

[Languages.ja]
weight = 2

title = "○○○"
  • DefaultContentLanguage で デフォルトの言語を設定
  • DefaultContentLanguageInSubdir を trueにすると、リクエストURLに言語ごとにpathを切ってくれます。

英語版

example.com/en/...

日本語版

example.com/ja/...

という感じです。

  • [Languages]では、それぞれのタイトルや言語ごとの必要事項を設定しておきます。使用するテーマなどに依存します。
  • weightは優先する方を低い数値にしておきます。いらないかも。

それぞれの記事を作成

1
2
3
4
5
6
7
ここでは、英語優先なので、
hugo new posts/sample.md

と、すると英語ページ

hugo new posts/sample.ja.md
で日本語ページとして読んでくれます。

/ja/へのアクセスで、xxxx.ja.md の記事が読まれ、/en/ もしくは / で、xxxx.md or xxxx.en.md の記事が読み込まれ勝手に切り替えてくれます。
あとはそれぞれの言語で記事を書くだけです。

公開

generateします

$ hugo

これだけです。そうするとpublic以下に生成されます。
これらをs3やgithubに上げればOKです。

hugoまとめ

非常にささっと簡単にwebサイトができました。またthemesもかなりたくさんありますが、それをoverride的な形でカスタマイズすることも可能です。
簡単な上に非常に柔軟性があり、hexoよりもいいかもしれません。