AdventCalendar
Hugo
hugo-theme

Hugo で静的なサイト・ブログを構築しよう

この記事は Hugo でブログを始めようとしている方へ向けた Hugo 入門記事となっており、Hugo による静的なブログの構築・運用方法 を簡単にですが紹介します。


動的サイトから静的サイトへ

WordPress で構築する、というのが長らくブログ運用の主流でした。もちろん現在も多くのサイトが WordPress によって運用されていますが、最近では「 静的サイト 」という選択肢も広まってきています。(調査したわけではありませんがこの分野に関心がある人の中で実感している人は多いと思います。)


静的サイトとは


HTML, CSS, JavaScript のみで構成

サーバーサイドの処理を PHP で書いたりする、というような必要はありません。私たちが気にしなければならないのは HTML, CSS, JavaScript だけです。


Static Site Generator で生成

HTML, CSS, JavaScript をすべてちまちま書く必要はありません。Static Site Generator (静的サイトジェネレーター)というツール(この記事で言うところの Hugo)の テンプレート機能 を使って部品の使い回しができます。

記事は Markdown で執筆し、それを元に Hugo が HTML を生成してくれるので、記事の執筆の際に HTML タグを意識することもありません。


ページ表示が高速

サイトの閲覧者は配信サーバーから HTML, CSS, JavaScript をダウンロードするだけであり、リクエストごとにコンテンツを生成したりはしないため、動的サイトと比較して特に何もしなくてもページの表示が高速になります。


管理画面がない

管理画面というものは存在しません。ですから動的サイトのように管理画面から乗っ取られる、というリスクはありません。 GitHub のアカウントだけしっかり管理しておけば良い、というようなことが可能です。ちなみに管理画面のようなものを設置することもできます。


サーバーの管理は不要

配信サーバーだけあれば良い、それもクラウドサービスを使えば実際サーバーを管理したりする必要はありません。データベースも不要です。


Static Site Generator とは

上のサイトでは Static Site Generator (静的サイトジェネレーター) がまとめられており、多種多様の SSG が開発されていることがわかります。

Hugo, Mkdocs, Gatsby, GitBook, VuePress, Jekyll など色々ありますが、今回は Hugo の導入・運用方法の概要 をご紹介したいと思います。

Hugo を使うことで可能になるのは「 Markdown で書いた記事からテンプレートに従って HTML を生成する 」ことです。Markdown で記事を管理すれば良いのでHTML などを気にする必要はありません。もちろん HTML, CSS, JavaScript にとことんこだわることもできます。


Hugo とは

現在、StaticGen の中で GitHub Star 数3位につけているのが Hugo です。ブログ用途に限れば Jekyll に次ぐ Star 数だと言えるでしょう。

上の公式サイト・リポジトリを見ると次のようにうたわれています。


The world’s fastest framework for building websites


そうです、 Hugoはサイトの生成がとても高速 なのです。ベンチマーク的なものは今回以下の記事に譲りますが、

Jekyll と比べてとてつもなく高速なのがわかります。この速度は Go 言語実装である ことに起因すると言っても過言ではないでしょう。

Go 言語製である、ということは マルチプラットフォームで Hugo を利用できる ということでもあります。以下の Operating System で Hugo を実行可能です。もちろん Docker 上でも動きます。さらには Android でも実行できます。



  • macOS (Darwin) for x64, i386, and ARM architectures

  • Windows

  • Linux

  • OpenBSD

  • FreeBSD


Hugo を使えば高速に様々な環境でサイトを生成することができます。

ちなみにバージョン 0.53 で Hugo はさらにその速度を向上させています。


ブログはどこでホストすべきか


Netlify がオススメ

Hugo を使い始める人のよくある悩みのひとつがサイトのホスト先だと思いますが、悪いこと言わないので Netlify にしとけば間違いないです。


  • Netlify と Hugo がお互いを公式サポートしている


  • HugoDocs が Netlify を使って公開されている

  • GitHub・GitLab と簡単に連携できる

  • ビルド機能がある

  • Deploy preview 機能が使える

  • 無料で使える

ことが Netlify を強くオススメする理由です。GitHub に push したらそれを Netlify で検知・ビルドしてデプロイする、なんてことができて非常に便利です。


その他のホスト先

Netlify の次の選択肢は GitHub PagesGitLab Pages でしょう。その場合はローカルでビルドして生成コンテンツを push しても良いですし、CI・CD がやりたければ CircleCI や GitLab CI を利用できます。

また、最近だと AWS Amplify Console も Netlify のような機能を持っており、こちらは Password protection もブランチごとに設定可能(Netlify のパスワード保護は有料プラン)です。個人のメモなどはこちらを使うと非公開にできて便利です。

Firebase hosting や S3 (Amazon Simple Storage Service) もありますが、わざわざこれらを選ぶほどのメリットはないと思います。


Netlify からの引っ越し

「ホスト先の選択肢が多く切り替えが簡単」なのが静的サイトのメリットでもあります。独自ドメインを当てておけば引っ越しは楽 です。取りあえず Netlify で始めてみて、どうしても気に入らなければ引っ越しは簡単にできます。

ほとんどの場合、ブログ用途であれば Netlify が高機能で使いやすく、無料枠に収まるのでオススメです。

Hugo で生成したサイトのホスト先とデプロイ方法については次を参考にしてください。


Hugo Theme

現在 279 もの公開テーマを利用可能です。テーマは git submodule add で導入するとテーマの更新を取り込みやすいです。

テーマのカスタマイズに関しては以下でも書いたのですが、

もとのソースには触らずに、プロジェクトの方にコピーしてそれを編集する 」のが正しいやり方です。プロジェクトの方にコピーされたものが優先して反映されます。テーマを fork してブランチ切れる人はその方法でもいいです。


よくある質問とそれに対する回答

Qiita, Hatena Blog などのブログサービス、そして WordPress と比較して次のような意見をよくみますがどれも Hugo なりのやり方があります。


管理画面がなくスマホで執筆しにくい

これについては Netlify CMS を導入することである程度対応できます。ただ Hugo での生成サイトを確認しながらの編集はできないので、例えば Shortcode の表示を確認する、なんてことができないのが少し気になるかもしれません。


画像をドラッグ・アンド・ドロップで挿入したい

ブログサービスとかだとドラッグ・アンド・ドロップで画像の挿入ができたりしますが、Hugo でもやろうと思えばできます。以下の記事を参考にして、

「記事の Markdown ファイルと同じディレクトリに画像を配置する」ようにすれば、例えば執筆だけマークダウンをプレビューできて、画像のドラッグ・アンド・ドロップ挿入が可能なエディター (Visual Studio Code や Typora) で記事を執筆するようにすれば、画像の挿入も楽になるでしょう。

Hugo ならディレクトリに画像を自分で配置する必要がありますので、どのように管理するのかは自分で決めることができます。後でまとめてすべての画像に処理を施したい、となった時もスクリプトを書いての対処がしやすいです。


画像の圧縮・リサイズしたい

GitHub でホストするのであれば画像の圧縮は ImgBot がオススメです。

もちろん Hugo でも画像のリサイズ・品質調整が可能です。


フォームを設置したい

Netlify でホストしていれば簡単に入力フォームを用意することができます。無料で利用可能です。フォームから送信された情報は Slack に通知したりメールとして受信したりできます。


コメントシステムを設置したい

Disqus をオススメします。Google, Twitter, Facebook で SNS ログインしてコメントできる機能をサイトに用意することができます。たいていの用途で無料枠に収まるでしょう。


サムネイル付きリンクを設置したい

Iframely というサービスが便利です。


HTML, CSS, JavaScript の圧縮(Minify)がしたい。

HTML と <style> タグの中の CSS, <script> タグの中の JavaScript の圧縮(Minify)は hugo コマンドをオプション付きで実行すれば簡単にできます。

hugo --minify

*.css*.js などの外部ファイルの圧縮や bundle なども可能ですが、テーマが対応している必要があります。対応していなければ公開テーマを自分でカスタマイズしましょう。テーマの編集・カスタマイズについては以下の記事を参考にしてください。


Docker image for Hugo

このイメージは頻繁に更新されており、最新バージョンの Hugo もすぐ使えるようになります。CircleCI とかで Hugo を実行したい時に役に立つことでしょう。


Hugo をよろしくお願いします!

この記事は定期的にメンテナンスしており、最新の情報を反映するようにしています。今後も Hugo に関する情報を発信していきますので良かったら @piris314 - Twitter の方をフォローしていただくか、私の Hugo に関する記事をチェックしていただければと思います。peaceiris - Qiita

以上です。お付き合いいただきありがとうございました。ぜひ Hugo をよろしくお願いします!

ʕ◔ϖ◔ʔ