静的サイトジェネレータHugoを試してみた

このサイトは編集をいつでもどこでも簡単にできるようにWordPressで作成していますが、内容を固定したサイトの場合には、WordPressで作成すると定期的にアップデートが必要となるので結構管理が面倒です。(それでも、WordPressはセキュリティアップデートは勝手にやってくれるので、だいぶ楽ですが)

また、プラグインやテーマもちょっとマイナーなものを入れると、本体のアップデートについていけず、結構悩むことになります。

で、最近知ったのが静的サイトジェネレータというもので、マークダウン言語で書いた記事をHTMLとCSSに変換してくれるものだそうです。HTMLとCSSだけでデータベースなどはないのでセキュリティ上の心配も少なくて済むようです。で、変換したHTMLとCSSをまるごとサーバ上にアップロードすればOK(実際には同期するのかもしれませんが)ということらしいです。

今回はその静的サイトジェネレータの中からHugoというのを試してみることにしました。

1.Hugoの環境構築

今回は諸般の事情から、素のUbuntu18.04LTS環境に導入してみます。Hugoで検索すると、WindowsかMacOSのものが大部分で、Linux環境の場合にはどういうわけか(探し方が悪いのか)古いものしか見つかりません。どうせなら最新版をインストールしたいところです。そこで参考にしたのは一つ目はこちらの記事です。何はともあれ、参考にしながら最新版をgithubからダウンロードしてインストールしてみます。

下記手順で素のUbuntu18.04LTSに対してアップデートとVirtualBoxのGuest Addtionsのインストールを行った後、Hugoのバイナリパッケージをインストールします。
※今後の再テストを短時間で行うため、VirtualBoxのディスクイメージのスナップショットも採取しています。

$ sudo apt update
$ sudo apt upgrade
(一旦再起動)
$ sudo apt install build-essential perl make gcc git
(VirtualBoxのGuest Additionsをインストールして一旦シャットダウン、スナップショットを取って再起動)
$ wget https://github.com/gohugoio/hugo/releases/download/v0.54.0/hugo_0.54.0_Linux-64bit.deb
$ sudo apt install ./hugo_0.54.0_Linux-64bit.deb
$ hugo version

2.新しいサイトの作成

$ mkdir WebSite
$ cd WebSite
$ hugo new site hugo.example.com

3.新しいページの作成

以下の方法で新しいページを作成します。

$ hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>

実際にやってみます。

$ cd hugo.example.com
$ ls
$ hugo new post/test-page.md

として、contentディレクトリの下のpostディレクトリの下に記事を生成します。生成したら、自動生成されたファイルcontent/post/test-page.md を編集します。冒頭の draft: の行は削除します。(この行があると、記事が生成されません)

---
title: "Test Page"
date: 2019-03-05T01:02:03Z
---

# Hello World

This is my first hugo site, wooo!!

```
hugo_install="success"
if [[ $hugo_install == "success" ]]; then
  echo "Happy me"
```

bye!

4.テーマをダウンロード

テーマをダウンロードします。ここでは試しに mainroad というのを使ってみます。

$ cd theme
$ git clone https://github.com/vimux/mainroad
$ cd ..

mainroadというテーマを使うために、config.toml に

theme = "mainroad"

を書き足します。

5.サイトを生成してみる

$ hugo

で、publicというディレクトリが生成されて中にデータが生成されます。

$ hugo server

で組み込みサーバーが起動するようです。http://localhost:1313/ でインデックスページにアクセスできますが、かなり質素です(mainroadというテーマはこんなに質素じゃないはずなので要調査)。Ctrl+C で停止できます。

このまま、

$ cd hugo.example.com
$ hugo new post/sample.md

として、もう1ページを作成、content/post/sample.md を編集します。冒頭の draft: の行は削除しつつ適当に内容を作成すると、自動的にブラウザで開いていた記事のリストが更新されます。

記事を一通り作成したら、publicディレクトリを丸ごとWebサーバにアップロードすることで、公開完了、ということみたいです。(実際には rsync などで同期を取る形で運用するのが楽なのだと思います)

6.参考になりそうなもの

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)