この記事は Hugo でブログを始めようとしている方へ向けた Hugo 入門記事となっており、Hugo による静的なブログの構築・運用方法 を簡単にですが紹介します。
Hugo の Awesome は以下をどうぞ。
動的サイトから静的サイトへ
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 の中で Next.js に次いで GitHub Star 数2位につけているのが Hugo です。ブログ用途に限ればもっとも人気のある静的サイトジェネレーターだと言えるでしょう。
上の公式サイト・リポジトリを見ると次のようにうたわれています。
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 Pages や GitLab Pages でしょう。その場合はローカルでビルドして生成コンテンツを push しても良いですし、CI・CD がやりたければ CircleCI や GitLab CI を利用できます。
また、最近だと AWS Amplify Console も Netlify のような機能を持っており、こちらは Password protection もブランチごとに設定可能(Netlify のパスワード保護は有料プラン)です。個人のメモなどはこちらを使うと非公開にできて便利です。
(追記 2020-06-05) Azure Static Web Apps が登場しました。 Netlify や AWS Amplify Console に近いサービスなのでオススメです。
Tutorial: Publish a Hugo site to Azure Static Web Apps | Microsoft Docs
(追記 2021-06-08) Cloudflare Pages が登場しました！ Netlify や AWS Amplify Console と肩を並べるサービスに成長しそうです。
Firebase hosting や S3 (Amazon Simple Storage Service) もありますが、わざわざこれらを選ぶほどのメリットはないと思います。
Netlify からの引っ越し
「ホスト先の選択肢が多く切り替えが簡単」なのが静的サイトのメリットでもあります。独自ドメインを当てておけば引っ越しは楽 です。取りあえず Netlify で始めてみて、どうしても気に入らなければ引っ越しは簡単にできます。
ほとんどの場合、ブログ用途であれば Netlify が高機能で使いやすく、無料枠に収まるのでオススメです。
Hugo で生成したサイトのホスト先とデプロイ方法については次を参考にしてください。
GitHub Actions と GitHub Pages
GitHub Actions による GitHub Pages への自動デプロイ - Qiita を書いたのでこちらを参照してください。
- peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages with Static Site Generators
- peaceiris/actions-hugo: GitHub Actions for Hugo extended
peaceiris/actions-hugo でビルドをして peaceiris/actions-gh-pages で GitHub Pages へデプロイをする CI/CD を GitHub Actions で実現できます。
Hugo Theme
現在 279 もの公開テーマを利用可能です。テーマは git submodule add で導入するとテーマの更新を取り込みやすいです。
テーマのカスタマイズに関しては以下でも書いたのですが、
「 もとのソースには触らずに、プロジェクトの方にコピーしてそれを編集する 」のが正しいやり方です。プロジェクトの方にコピーされたものが優先して反映されます。テーマを fork してブランチ切れる人はその方法でもいいです。
よくある質問とそれに対する回答
Qiita, Hatena Blog などのブログサービス、そして WordPress と比較して次のような勘違い・誤解・不満を目にすることがありますが、どれも Hugo なりの事情・やり方があります。
Hugo は Production-ready ではない？
Production-ready です。
現在 Hugo は v0.x.x の形式のタグでリリースされており、メジャーバージョンはゼロですが Production-ready のプロジェクトです。Go Modules の事情でタグの major を気軽に上げることができないのでこのようなバージョニングとなっています。
基本的に minor は破壊的変更を含む運用になっていますが、廃止される機能などは廃止前に warning を出して知らせる期間を設けているので、毎 minor update に破壊的変更が含まれる訳ではありません。
ちなみに、このようなバージョニングのプロジェクトは https://0ver.org/ として有名です。
Hugo を使うにあたり Go を書く必要がある?
ありません。
管理画面がなくスマホで執筆しにくい
これについては Netlify CMS を導入することである程度対応できます。ただ Hugo での生成サイトを確認しながらの編集はできないので、例えば Shortcode の表示を確認する、なんてことができないのが少し気になるかもしれません。
画像をドラッグ・アンド・ドロップで挿入したい
ブログサービスとかだとドラッグ・アンド・ドロップで画像の挿入ができたりしますが、Hugo でもやろうと思えばできます。以下の記事を参考にして、
- Hugo 0.32から記事と同じ場所に画像を置けるようになった - blog.ton-up.net
- hugo page resourceを使って，relative pathで画像を指定する · こくたんのーと
「記事の 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
上記記事を参考にしてください。
JavaScript/TypeScript をバンドルしたい
webpack の仕事を esbuild で置き換えることができます。
不要な CSS を削除したい
bep/hugo-starter-tailwind-basic: A basic and simple to set up Hugo with TailwindCSS starter project.
A very simple starter set up with TailwindCSS and its typography plugin and a build setup using PostCSS and PurgeCSS (when running the production build).
Hugo をよろしくお願いします!
この記事は定期的にメンテナンスしており、最新の情報を反映するようにしています。今後も Hugo に関する情報を発信していきますので良かったら @piris314 - Twitter の方をフォローしていただくか、私の Hugo に関する記事をチェックしていただければと思います。peaceiris - Qiita
以上です。お付き合いいただきありがとうございました。ぜひ Hugo をよろしくお願いします!
ʕ◔ϖ◔ʔ