静的サイトジェネレータHugoを使えるようにする
はじめに
macOS CatalinaにStatic Site Generator(静的サイトジェネレータ) Hugoを導入し、使えるようにする。
Hugoとは
Hugoはオープンソースで開発されているStatic Site Generatorである。
一般的に、Webサイト構築ではWordpressのようなCMS（コンテンツ管理システム）が使用されることが多い。が、個人で運用してるようなblogなどのWebサイトでは静的サイトジェネレータを用いて構築したほうが、システム管理・保守の面でメリットがある。
ほかにも、WebページのコンテンツをGitのようなバージョン管理システムを用いて管理できるようになる利点などもある。
macOS Catalina にセットアップする
インストール
Hugoの公式サイトに記載の内容に基づいて、macOSにインストールする。
$ brew install hugo
$ hugo version
Hugo Static Site Generator v0.71.1/extended darwin/amd64 BuildDate: unknown
サンプルプロジェクトを作成する
Hugoの公式サイトには、以下の例が記載されている。
$ hugo new site quickstart
このコマンドは、カレントディレクトリのquickstartディレクトリが作成される。ユーザーのhomeディレクトリで実行した場合、/home/{user}/quickstartが作成される。
ここでは~/Sitesディレクトリ以下にsamplesiteプロジェクトを作成する。
$ mkdir Sites
$ cd Sites
$ hugo new site samplesite
$ ls samplesite
archetypes/ config.toml content/ data/ layouts/ static/ themes/
テーマを導入する
Hugoでは、公式サイトから様々なCSSテーマを入手できる。
ここではTwenty Fourteenというテーマを入手する。テーマの入手方法はzipアーカイブで取得する方法もあるが、ここではGitを使って取得する。
$ cd samplesite
$ git init
$ git submodule add https://github.com/jaden/twentyfourteen.git themes/twentyfourteen
config.tomlにテーマの設定を追記する。
echo 'theme = "twentyfourteen"' >> config.toml
コンテンツを用意する
記事を追加する。
$ hugo new posts/my-fast-post.md
/Users/{user}/Sites/samplesite/content/posts/my-first-post.md created
Hugoではsamplesite/content以下にコンテンツを格納する。
$ tree ./samplesite
./samplesite
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── posts
│ └── my-first-post.md //作成したコンテンツ
├── data
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── twentyfourteen
├── LICENSE.md
├── README.md
my-first-post.mdの内容は適当に記入する。これで記事の用意が完了。
サンプルサイトを立ち上げる
Hugoでは静的サイト出力する前にローカルサーバを起動して、内容を確認することができる。
$ pwd
/Users/{user}/Sites/samplesite
$ hugo server -D
( ローカルサーバは http://localhost:1313/ で起動する。Ctrl+C で終了)
サイトの設定をする
構築するWebサイトのURLや言語コードなどを設定する。
baseURL = "http://example.org/" //適時URLは修正する。
languageCode = "ja-JP"
title = "My New Hugo Site"
theme = "twentyfourteen"
静的サイトを出力する
$hugo -D
samplesite/public以下に静的サイトのファイルが出力される。
おわりに
作成されたファイルをドメイン付与したAmazon S3などにアップロードすれば、静的Webサイトとして公開できる。
テーマCSSなども自由に編集できるので、自分の好みに合わせてカスタマイズすることもできる。