いまさらの Hugo

Hugoを試してみた感想

Jekyll はもう古くなってきていると一部では言われている。ただ静的サイトジェネレータとして老舗なのでユーザもまだ多く、使いやすい仕組みが沢山盛り込まれている。問題は記事レンダリングのスピードが遅くなってきていること。Ruby の問題も大きいかもしれないが、その点は Python製のサイトジェネレータでも同じなので、それらがいまひとつ流行らない一因かもしれない。

何に乗り換えようかと Gatsby、Hugo, Gridsome などいろいろ試している。Gridsome が一番気に入っているが、まだまだ日本語ドキュメントが少なく、自分で記事を書くにはまだ早い。もう少し試しながら待ちたいところ。

それで今は、割と古くからある Hugoを試している。

静的サイトジェネレータとしては、今現在 Gatsby が一番流行りみたいだが、ライブラリなどの導入が馴れるまでは面倒で、サーバの立ち上がりも遅い印象がある。JavaScriptで書けるのはメリットだが、速いのはできあがったSPAサイトのスピードであり、記事生成ツールとしての速さはまだまだ Hugo のほうが速いと思える(あくまで個人の意見)。

Hugoはサーバの立ち上がりが非常に速く、マークダウンの記事からHTMLを生成するのもすごく速い。Go言語の威力だろうか。

ただ、ユーザがプラグインをカスタマイズできる仕組みが無いのかあるのか、よくわからない。既存のプラグインはあるので、Go言語が書ければ作れるのだろうが、この点は Jekyll のようにプラグインをカスタマイズする仕組みが備わっていて公開されているものと比べると、敷居はやや高いと思える。

Hugo のインストール

github のリリースサイトで使用するプラットフォームに対応したコンパイル済みバイナリファイルをダウンロードする. SassやSCSSなどのCSSプリプロセッサ機能が有効になったextendedバージョンがあり、一部のテーマではこの機能が必要なので今回はこれをインストールする. extendedバージョンは「hugo_extended」から始まるファイル名で配布されている。 2020/7/20現在の最新のUbuntu向け Hugo の extendedバージョン(hugo_extended_0.74.2_Linux-64bit.deb)をダウンロードする.

$ wget https://github.com/gohugoio/hugo/releases/download/v0.74.2/hugo_extended_0.74.2_Linux-64bit.deb

$ sudo apt install ./hugo_extended_0.74.2_Linux-64bit.deb

hugo versionで確認

$ hugo version
Hugo Static Site Generator v0.74.2-48565DE6/extended linux/amd64 BuildDate: 2020-07-17T17:32:27Z

新規サイトの作成

hugo new site サイト名で新規のサイトを作る.実行すると、その後にすべき作業の指示が出てくる.

$ hugo new site hugo-blog
Congratulations! Your new Hugo site is created in /home/user/Hugo/hugo-blog.

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.

作成されたサイトDIRへ移動し、開発用サーバを立ち上げる.

$ cd hugo-blog
$ hugo server

このhugo serverで開発用サーバが立ち上がり、http://localhost:1313/に初期画面が表示される.ただしテーマをインストールしていない段階では真っ白で何も無い(テーマを指定しないとHTMLの生成を行うことができない).

Ctrl-C でいったんサーバを終了させ、テーマのインストールを行う.

テーマのインストール

Hugo Themesサイト(https://themes.gohugo.io/)でテーマを選ぶ.

使用するテーマを決めて git cloneコマンドで themesディレクトリ以下にコピーする。

Minimo というシンプルなブログ向けテーマをインストールしてみる.

$ cd themes
$ git clone https://github.com/MunifTanjim/minimo.git

サイトルートにあるconfig.tomlが設定ファイル.これを変更しテーマ名を指定.

[config.toml]

baseURL = "http://example.org/"
languageCode = "ja-jp"
title = "My New Hugo Site"
theme = "minimo"

設定ファイルにはテーマ以外にも、言語やサイト全体のタイトル、ベースURLなどを設定しておく.

ここまでで再度hugo serverすると最低限の画面が表示されるはず.まだ記事が無いのでタイトルしか見えていないが、テーマを指定したのでHTMLが生成されている.

記事の公開

オプションなしでhugoコマンドを実行することで、publicDIRの中に(publicというDIRが無ければ作成され)公開用のビルド済みファイルが作成される。

$ hugo

                   | EN  
-------------------+-----
  Pages            | 20  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 28 ms

公開用ファイルをGitHub Pagesなどのホスティングサービスに登録するとか、他の公開用サーバなどにアップロードするだけ。