静的サイトジェネレータを Gatsby から Hugo に移行した
2018-10-24
前回
までで Gatsby の設定やデプロイ方法について書いてきましたが、色々と問題が出てきたため Hugo に移行しました。
移行といっても、記事の数が少なかったためほぼゼロからのスタートです。
今回は Gatsby の問題点と、Hugo のインストールについて書きます。
Gatsby の問題点・不満点
Gatsby というか、使っていた starter starter-personal-blog の問題が大きいです。
starter-personal-blog では Algolia というサービスを用いたブログ内検索機能があります。
ビルド時に Algolia にインデックスを生成して、ブログ内の検索をかなりの早さで実行できるという部分がとても良かったです。
が、問題として、インデックスに登録できるブログ記事の文字数、正確には記事の Markdown ファイルの容量に制限があり、その制限を超えているとビルドが失敗してしまうというものです。制限は下記の通り。
- 無償版 : 10 KB まで
- 有償版 : 20 KB まで
つまり、ちょっと長い文章を書こうとするとエラーになり、ビルドが失敗してしまうということです。
有償版は最低でも $35/月 ということで結構いい値段がします。
じゃあ、自前でブログ内検索を実装すればいいのでは？とも思いましたが、React の知識が足りないためカスタマイズも出来ず…。
ビルドの時間にも少し不満があったので、ビルドが爆速だと噂の Hugo に移行することにしました。
Hugo とは
Hugo は、Go で作られている静的サイトジェネレータです。
ローカルでの表示確認やビルドが爆速であること、テーマの数が豊富なところが売りとなっています。
インストール
インストールも簡単です。
macOS では Homebrew に hugo の cli があるので、それをインストールします。
$ brew install hugo
...
...
$ hugo version
Hugo Static Site Generator v0.49.2/extended darwin/amd64 BuildDate: unknown
公式サイトの手順 に従ってインストールを進めます。
$ hugo new site michimani.net
テーマを追加します。今回は indigo を使います。
$ cd michimani.net
$ git init
$ git submodule add https://github.com/AngeloStavrow/indigo.git themes/indigo
$ echo 'theme = "indigo"' >> config.toml
ブログの設定
設定は、直下にある config.toml を適宜編集します。
baseURL = "https://michimani.net/"
languageCode = "ja-JP"
copyright = "Copyright © 2018, michimani"
title = "michimani.net"
ここで注意が必要なのが、baseURL の値です。末尾には / を付ける必要があります。
レイアウトの修正
baseURL との兼ね合いで一部 asset へのリンクが正しく生成されない部分があるので、その部分を修正しておきます。
対象のファイルは themes/indigo/layouts/404.html と themes/indigo/layouts/partials/header.html ですが、修正方法は同じです。
<div id="sitelogo">
- <a class="glyph" alt="Home" href="{{ .Site.BaseURL }}"><img src="{{ .Site.BaseURL }}/images/site-logo.svg" alt="Site Logo" height="64px" width="64px"></a>
+ <a class="glyph" alt="Home" href="{{ .Site.BaseURL }}"><img src="{{ .Site.BaseURL }}images/site-logo.svg" alt="Site Logo" height="64px" width="64px"></a>
</div>
記事作成・ビルド
記事作成
ブログ記事は下記コマンドで新規作成します。
$ hugo new post/new-post-name.md
上記の場合、 https://michimani.net/post/new-post-name/ にアクセスして表示される記事が作成されます。
記事内で使用する画像類は static/images の中に置いて、 /images/***.png の形で挿入します。
ローカルで確認
ローカルでの確認は下記コマンドを実行します。
hugo server -D
| EN
+------------------+----+
Pages | 36
Paginator pages | 0
Non-page files | 0
Static files | 66
Processed images | 0
Aliases | 14
Sitemaps | 1
Cleaned | 0
Total in 40 ms
Watching for changes in /Users/hoge/michimani.net/{content,data,layouts,static,themes}
Watching for config changes in /Users/hoge/michimani.net/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
http://localhost:1313/ にアクセスして確認します。
このコマンドを実行した時点で hugo の売りである速さを感じることができます。Gatsby ではローカルサーバの起動まで数秒がかかりましたが、hugo では、出力されているとおり 40 ms です。
ビルド
ビルドは下記のコマンドです。
$ hugo
| EN
+------------------+----+
Pages | 36
Paginator pages | 0
Non-page files | 0
Static files | 66
Processed images | 0
Aliases | 14
Sitemaps | 1
Cleaned | 0
Total in 74 ms
こちらも一瞬で public ディレクトリが生成されます。
まとめ
以上、Go 言語でできている静的サイトジェネレータ hugo のインストールからビルドまででした。
Gatsby のときと同様に デプロイまでの自動化については次回書きたいと思います。
と言っても、Gatsby のときに構築したフローを少し変更するだけで済むので、新たに組み直す必要はありませんでした。では。
comments powered by Disqus