HUGOとは

HUGOはMarkdownで書かれたファイルをもとに、定義したテンプレートからHTMLを作成することができるフレームワークです。HUGOのように静的なHTMLを作成するフレームワークは静的サイトジェネレーターと呼ばれ、その他の代表的なフレームワークとしてGatsby、Hexoなどがあります。

本ブログでは導入が簡単なHUGOを使っていますが、その導入手順を紹介します。

HUGOインストール

※開発環境：Mac, Homebrewインストール済

以下のコマンドを実行してHUGOをインストールします。

brew install hugo

インストール完了後、以下のコマンド実行してバージョンを確認します。

hugo version

実行後のメッセージは以下のとおりです。（今回はversion0.61.0）

Hugo Static Site Generator v0.61.0/extended darwin/amd64 BuildDate: unknown

HUGOプロジェクト（HTML）作成

インストール後にまずはサンプルでHTMLを作成してみてください。以下のコマンドで新規プロジェクト「hellohugo」を作成することができます。

hugo new site hellohugo

テーマの追加

作成したプロジェクトのディレクトリに移動して、HTMLデザインのテーマをダウンロードします。ここでは、Ananke Gohugo Themeをダウンロードします。

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

ダウンロードしたテーマを以下のコマンドでconfigファイルに追加します。

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

プロジェクト直下のconfig.tomlにダウンロードしたテーマの情報が追加されます。

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

ローカル環境で確認するためには以下のコマンドを実行します。

hugo server

コマンド実行後にブラウザで確認してみてください。 デフォルトではポート1313を使用するWebサーバーが立ち上がります。 http://localhost:1313/

コンテンツの追加

次にコンテンツを追加してみます。 以下のコマンドを実行すると新規コンテンツを追加することができます。

hugo new posts/sample.md

プロジェクト直下のcontent/postsに作成したMarkdownコンテンツが以下のように作成されます。 draftがtrueの場合はコンテンツが下書きの状態になるため、falseに変更するかローカルサーバーを立ち上げるコマンドに-Dオプションを追加してください。

---
title: "Sample"
date: 2019-12-13T00:07:36+09:00
draft: true
---

コンテンツ追加後のイメージは以下のようになります。

静的ファイル(HTML)の出力

最後にローカル環境で作成したコンテンツが問題なければ静的ファイルをを出力します。 静的ファイルを圧縮して出力する場合は以下のコマンドを実行します。

hugo --minify

本コマンドを実行するとHUGOプロジェクトの"public"フォルダにHTMLファイルなど、Webサイトを表示するために必要なファイル一式が出力されます。 “public"フォルダに出力されるファイルをサーバなどに配置すれば無事サイトを公開できます。 次回以降の記事ではAWSのSaaSを利用したWebサイト(S3)の公開方法を紹介したいと思います。