Hugoでブログを始める

May 13, 2021

無職になったのでブログを作ることにしました。無難にWordPressで作ると飽きて続かなそうなので、使ったことのない「静的サイトジェネレーター」を試してみることにします。

WordPressなどのCMSはブログを作成するための豊富な機能があります。そのため、データベースやPHP等スクリプト言語の実行環境などサーバー設定が複雑になります。ウェブページはサーバーにアクセスがあったときに、動的に作成するためサーバーに処理能力が要求されます。サーバーにあるCMSのセキュリティ対策もしないといけません。

静的サイトジェネレーターはMarkdown等で記述されたファイルをローカルのPCでウェブページに変換し、そのままWebサーバーへアップロードするだけです。生成されたファイルはそのままブラウザで見れる状態のためサーバーの負荷も少なく済みます。 Webサーバーの管理は必要ですが、サーバー上に複雑なシステムがないのでセキュリティ的にも楽です。

いりあえず使ってみないと分からないので、「Hugo」というGo言語で作成されたツールを使うことにしました。

この記事での対象OSは"Ubuntu 20.04.2 LTS"です。なお、テーマのインストールにGitを使用するので事前に使えるようにしてください。以下続けてやったことを記述します。

Hugoのインストール

下記の公式インストール手順に従います。

https://gohugo.io/getting-started/installing/

いくつか方法がありますが簡単にインストールできるSnapを使用します。オプションに"extended"バージョンを指定することでSass(Syntactically Awesome Style Sheets)が使えるようになります。

$ snap install hugo --channel=extended

インストールされたバージョンをチェックします。

$ hugo version
Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2020-12-31T20:02:59Z

サイトを新規に作成する

さっそくHugoを使ってサイトを作成していきます。新しいサイトは下記のコマンドで作成します。

hugo new site 作成するサイトディレクトリ名

$ hugo new site quickstart
Congratulations! Your new Hugo site is created in /home/izumi/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.

以下のようなディレクトリが作成されます。

作成したサイトディレクトリ名
│ config.toml
├─ archetypes
│     default.md
├─ content
├─ data
├─ layouts
├─ static
└─ themes

ファイル・ディレクトリ名	説明
config.toml	Hugoで作成するサイトの設定ファイル
archetypes	Hugoで作成するコンテンツの原型を格納するディレクトリ
archetypes/default.md	newコマンドで作成されるmdファイルのテンプレート
content	サイトで公開するコンテンツを格納するディレクトリ
data	Hugoがデータファイルを読み取るディレクトリ
layouts	Hugoがテンプレートを読み取るディレクトリ
static	サイトで使用する画像などの静的ファイルを格納するディレクトリ
themes	サイトのテーマを格納するディレクトリ

サイトを設定する

config.tomlファイルを必要に応じて編集します。

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

項目	説明
baseURL	このサイトのURL
defaultContentLanguage	コンテンツのデフォルト言語（日本語なら"ja"）
languageCode	このサイトの言語（日本語なら"ja-jp"）
title	このサイトのタイトル
theme	このサイトで使用するテーマ

設定項目の一覧は下記の"Configure Hugo"にあります。

https://gohugo.io/getting-started/configuration/

テーマを加える

テーマはサイトの外観を定義したテンプレートファイル群です。 Hugoはこのテンプレートに従って、Webサーバーに配置するホームページやリストページを生成します。

テーマはhttps://themes.gohugo.io/に紹介されています。例として"nanke"テーマを使用します。 Gitでテーマをダウンロードします。

$ cd quickstart
$ git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Hugoの設定ファイル(config.toml)にインストールしたテーマを追加します。

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

記事を追加する

Hugoのnewコマンドでページを作成します。作成するのはmarkdownファイルのため拡張子は.mdにします。 hugo new 作成するページファイル名

hugo new posts/my-first-post.md

contentディレクトリにpostsディレクトリが作成され、下記のような内容のファイルが作成されるので、そのファイルの内容を編集します。

---
title: "My First Post"
date: 2021-05-10T13:46:47+09:00
draft: true
---

---で囲まれた箇所はフロントマターといい、内容をYAML形式で記述していることを表していま。フロントマターとは最終的に出力するコンテンツファイルに埋め込むメタデータで下記の意味があります。

項目	意味
title	記事のタイトル
date	投稿日
draft	下書き（trueの場合ページは作成されません）

詳しくは下記の"Front Matter"を参照してください。

https://gohugo.io/content-management/front-matter/

サイトを確認する

サイトのディレクトリでコマンドを実行するとローカルサーバーで確認ができます。

$ hugo server -D

オプション	意味
-D, –buildDrafts	下書き(draft)も含めて確認する

これでローカルサーバーが立ち上がったので下記のアドレスにアクセスしてサイトを確認できます。 http://localhost:1313/ 確認が終わったらCtrl + Cでローカルサーバーを終了させます。

ホームページ

詳細は下記の公式ページにあります。

https://gohugo.io/commands/hugo_server/

静的サイトを生成する

サイトのディレクトリでhugoコマンドを実行するだけです。実行後public/ディレクトリに必要なファイルが全て作成されるのですが、実行前に作成されたファイルは削除されません。つまりpublicディレクトリの中身をあらかじめ削除しておかないと古いファイルが残ったままになります。以下の手順では’rm’コマンドでpublicディレクトリの中身を削除し、サイトを作成しています。

$ rm -r public/*
$ hugo

Webサーバーに配置するファイルはpublicディレクトリに作成されます。 publicディレクトリを内容をWebサーバーへ配置して完了です。