ブログ(静的サイト)をHUGOを使って作成する

blog
ブログ(静的サイト)をHUGOを使って作成する
目次

本サイトでは jekyll を使用してブログを作成しているのですが、他にも HUGO や hexo を使用されている方も多くいらっしゃるようなので、今回はHUGOを使用してブログコンテンツを作成する方法を紹介したいと思います。

ゴール

  • HUGOで静的サイトの作成ができるようになる

事前準備

HUGOをインストールする前に…

以下がローカルマシン上にインストールされていると以降の手順が捗ります。

  • Homebrew
  • git

HUGOのインストール(MacOSの場合)

Homebrewを使用するとHUGOを簡単にインストールできます。

brew install hugo

HUGOのバージョンを確認してみましょう。

hugo version
> Hugo Static Site Generator v0.20.7 darwin/amd64 BuildDate: 2017-05-05T22:14:37+09:00

v0.20.7(2017/05時点で最新)がインストールされていることがわかります。

HUGOを使ってコンテンツを作成する

HUGOテンプレートで生成する

hugo new siteのサブコマンドを実行するだけで静的サイトのテンプレートをgenerateしてくれます。今回は hoge というディレクトリ配下に作成します。

hugo new site hoge

hoge 配下で tree コマンドを実行すると以下のようなファイルレイアウトが生成されていることがわかります。

cd hoge
tree -L 1                                                          .
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
ディレクトリ or ファイル用途
archetypeshugo new コマンドを実行した場合に使用されるデフォルトの雛形の定義ファイルを配備しておくディレクトリ
config.tomlサイト全体の設定を記述する設定ファイル。yaml や json 形式もサポートしている
content記事そのものを配備するディレクトリ
data特定のデータファイルを置くディレクトリ。yaml や json や toml をサポート。 layoutsディレクトリ内のテンプレートに依存する。
layoutsサイトレイアウトを配備するディレクトリ。UIパーツ毎のHTMLテンプレートを置くようなイメージ
staticCSSやjavascript、画像ファイルといった静的ファイルを格納するディレクトリ
themesサイトのテーマを配置するディレクトリ

サイトのデザイン(theme)を設定する

themeを探す

HUGOのthemeサイト から好みのサイトデザインを選びます。今回は Hello Programerのテーマ にしてみましょう。HUGOの場合、Jekyllと比較してthemeの数が少ないように感じられますが、1つ1つが個性的なので、概ね自身の用途に応じたthemeが見つかるのではないでしょうか。本家サイトにて layouts をどう作成すればよいか説明がありますので、気に入るものがない場合にはそちらを参照してください。

themeをインストールする

themes ディレクトリに移動し、直接themeを git clone します。

cd themes
git clone https://github.com/lubang/hugo-hello-programmer-theme

themeを設定する

設定ファイル(config.toml)を開いて、以下のように編集をします。

vi config.toml
 1baseurl = "https://www.soudegesu.com/diary"
 2title = "そうでげす diary"
 3DefaultContentLanguage = "ja"
 4languageCode = "ja-JP"
 5
 6contentDir = "content/ja"
 7publishDir = "public/ja"
 8
 9theme = "hugo-hello-programmer-theme"
10
11paginate = 2
12
13disqusShortname = "XXXX"
14googleAnalytics = "UA-XXXXXXXX-X"
15
16[author]
17    name = "soudegesu"
18
19[permalinks]
20  post = "/blog/:year/:month/:day/:slug/"
21  page = "/:slug/"
22
23[taxonomies]
24  tag = "tags"
25  category = "categories"
26
27[indexes]
28    category = "categories"
29    tag = "tags"
30
31[params]
32    locale = "ja-JP"

theme の項目には themes ディレクトリ配下にある適用したいthemeのディレクトリ名を指定する必要があります。

記事を作成する

プロジェクトルートにて hugo new のサブコマンドを実行すると記事のファイルを生成することができます。 今回は sample.md を作成してみます。

  • hugo new (ファイル名) でファイルを生成する
hugo new post/sample.md
/絶対パス/post/sample.md created
  • ファイルが生成されたことを tree コマンドにて確認
tree -a content
content
└── ja
    └── post
        └── sample.md
  • date と title のみ記載がされているファイルが生成されたことを確認
cat content/ja/post/sample.md
+++
date = "2017-05-06T11:11:46+09:00"
title = "sample"

+++

(余談)archetypes/defaults.md を利用して手間を減らす

HUGOをインストールした直後にhugo new (ファイル名) コマンドで記事ファイルを作成すると、dateとtitleしか埋め込まれていません。 archetypes/defaults.md を以下のように予め作成しておくことで、hugo new した際に、定義されている内容を雛形として、新規ファイルを作成してくれるようになります。

1+++
2draft = true
3slug = ""
4tags = ["", ""]
5categories = ["", ""]
6
7+++

最新バージョンでは date や title を default.md に記載する必要はなくなりました。

コンテンツの出来栄えをローカル環境で確認する

hugo serve のサブコマンドを実行すると、ローカル環境で内容の確認ができます。 ブラウザから http://localhost:1313/ を入力してビルドされたコンテンツにアクセスできるようになります。

hugo serve -D

なお、-D オプションを付けることで、下書き扱いのコンテンツもページ出力対象にすることができます。

コンテンツをビルドする

hugo コマンドを実行することで、コンテンツのビルドが行われます。

hugo

public ディレクトリが生成され、その中に静的ファイルが生成されていることを確認できます。

まとめ

今回は HUGO を使って静的サイトの生成ができました。 使ってみた感想として、

  • 導入までの敷居が低い(Jekyllが高すぎる)
  • 本家サイトの出来が良く、とりあえず読めば理解できる
  • ローカルビルドの体感が早く感じる

といった印象を持ちました。 今後JekyllとHUGOを併用してみて、良し悪しを判断できればと思います。