一般的な CMS

ブログをなどを含む CMS を構築するとき、 WordPress がよく利用されています。 しかしそのパフォーマンスはサーバのスペックに依存しており、共有サーバに構築してしまうと時折もたつく動作が見られます。 よくよく考えると、 CMS で作成するページや記事は基本的に静的なものになります。それらを表示するために、バックグラウンドで PHP を動かす必要があるのでしょうか。本来であれば静的な HTML を読み込んだ方が、パフォーマンスが良いのは言うまでもありません。

Hugo

今回紹介する Hugo は、Go言語で記述された静的サイトジェネレーターです。 Go言語が用いられているため敬遠されそうですが、 PHP 言語を知らなくても WordPress が利用できるように、 Go 言語を知らなくても Hugo は利用可能です。 Wordpress のようなリッチなエディターは備わっていないものの、 Markdown により簡単にページや記事を作成することができます。そしてコマンド一つにより数秒で HTML ファイルなどの静的ファイルが生成できます。 これらは静的ファイルですので Amazon S3 や Google Cloud Storage へアップロードし、絶対に落ちないサイトを構築することも可能です。

Hugo のインストール

Hugo はオープンソースソフトウェアであり、 GitHub で公開されています。また各プラットフォーム向けにコンパイル済みのバイナリが用意されています。 Windows であればインストール後にパスを通すだけで利用可能になります。
https://github.com/gohugoio/hugo/releases
また Linux であれば、パッケージマネージャ経由でインストールすることもできます。サーバなどでファイルを生成するのであれば、こちらのほうが都合がいいでしょう。

サイトの作成

サイトの作成は至って簡単です。次のコマンドを入力するだけです。（「HugoProject」は任意の文字列に変更してください。）

$ hugo new site HugoProject

サイトのデザイン

サイトを作っただけでは、テーマがない状態なので HTML ファイルが出力されません。そのため、サイトを作成したら直ぐにデザインを追加しましょう。テーマは次の中から探すことができます。
https://themes.gohugo.io/
テーマをダウンロードしたら、作成したサイトの「themes」フォルダに配置します。

HugoProject/themes

「themes」フォルダとあるように複数のテーマを導入し切り替えることができますが、実際にはサイトの設定はテーマに依存するため、1つのテーマに絞る方が賢明です。 そのサイトの設定は、以下ファイルになります。テーマに応じてサイト詳細・メニューなどの設定を行いましょう。

HugoProject/config.toml

コンテンツを追加

それではブログの記事を書いてみましょう。テンプレートより記事を作成するには次のコマンドを入力します。

$ cd HugoProject
$ hugo new posts/2021-08-23-new-post.md

すると以下にファイルが生成されます。

HugoProject/content/posts/2021-08-23-new-post.md

このファイルは拡張子が「md」とあるように Markdown 形式となります。Markdown の書き方については割愛しますが、慣れれば軽快に記事を書くことができます。

静的ファイル出力

HTML ファイルを出力するために、次のコマンドを実行してください。

$ hugo

すると、次のフォルダに一連の HTML ファイルが生成されます。

HugoProject/public

フォルダの中身を見てみると、そのほかに sitemap.xml なども生成されていることが判ります。この「public」フォルダの中身をサーバなどアップロードするだけで、サイトが完成します。静的ファイルだけですので、Amazon S3 などにアップロードしても問題なく動作します。

まとめ

今回は、静的サイトジェネレーターである Hugo を紹介しました。導入から静的ファイル生成まで hugo コマンドだけで完結する非常に簡単なフレームワークであることが判って頂けたと思います。ぜひ次のブログで活用してみてください。