HugoまたはJekyllで静的ブログを構築する:現場からの実践的なヒント

Programming tutorial - IT technology blog
Programming tutorial - IT technology blog

動的ブログを運用する際の問題点

WordPressサイトを管理したことがある人なら、その繰り返しの作業はよくご存知でしょう:プラグインのアップデート、データベースのバックアップ、PHPバージョンの不一致、そして深夜2時の突然の500エラー。個人の技術ブログやドキュメントサイトであれば、このオーバーヘッドは割に合いません。

静的サイトジェネレーターがこれを解決してくれます。データベースなし、サーバーサイドスクリプトなし、実行時に動く部品もなし。Markdownで書いて、ビルドコマンドを実行し、プレーンなHTMLファイルをCDNにプッシュするだけです。ページは瞬時に読み込まれ、ホスティングは多くの場合無料で、壊れる箇所もほとんどありません。

私は3年前に静的ジェネレーターに移行してから、PHP設定に触れることもデータベースバックアップを実行することもなくなりました。メンテナンス時間は週に約1時間からほぼゼロに減りました。目標が執筆であり、サーバーの管理ではないなら、これが正しい選択です。

この分野では2つのツールが主流です:Hugo(Go製、驚異的な速度)とJekyll(Ruby製、GitHub Pagesとの緊密な統合)。どちらも堅実な選択肢です。決定は通常、ローカルのツールチェーンとデプロイ先によって決まります。

まず理解すべき基本概念

静的サイトジェネレーターの仕組み

静的サイトジェネレーターはコンテンツ(Markdownファイル)を読み込み、テンプレート(HTML/CSSレイアウト)を適用して、配信準備が整った静的ファイルのディレクトリを出力します。この出力フォルダがウェブサイト全体です — データベースクエリなし、PHP実行なし。

主要なコンポーネントは以下の通りです:

  • コンテンツファイル — フロントマター(先頭のYAML/TOMLメタデータ)を含むMarkdown(.md)ファイル
  • テーマ/レイアウト — ページの外観を定義するHTMLテンプレート
  • 設定ファイル — タイトル、ベースURL、テーマなどのサイト全体の設定
  • ビルド出力 — デプロイする最終的な public/ または _site/ ディレクトリ

Hugo vs Jekyll:主な違い

HugoはGoで書かれており、本当に高速です — 1,000件の投稿を持つサイトでも通常1秒以内にビルドが完了します。JekyllはRubyで書かれており、規模が大きくなると目に見えて遅くなりますが、GitHub Pagesのネイティブツールです。ブランチにプッシュするだけで、GitHubが自動的にビルドとデプロイを行います — CI設定不要です。

Hugoを選ぶべき場合:

  • 高速なビルド時間を望み、Ruby環境を管理したくない場合
  • Netlify、Cloudflare Pages、またはVPSにデプロイする場合
  • TOML設定構文が好みの場合

Jekyllを選ぶべき場合:

  • GitHub Pagesでホスティングし、ビルド設定をゼロにしたい場合
  • Rubyとgemエコシステムになじんでいる場合
  • よりシンプルで確立されたプラグインエコシステムが必要な場合

実践:静的ブログを構築する

オプションA — Hugoを始める

パッケージマネージャーでHugoをインストールします:

# macOS
brew install hugo

# Ubuntu/Debian
sudo apt install hugo

# バージョン確認
hugo version

新しいサイトを作成してテーマを追加します:

hugo new site myblog
cd myblog

# テーマを追加する(PaperModはシンプルで人気がある)
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

# 設定ファイルにテーマを指定する
echo 'theme = "PaperMod"' >> hugo.toml

最初の投稿を作成します:

hugo new posts/my-first-post.md

これにより content/posts/my-first-post.md にフロントマターが事前に入力されたファイルが生成されます:

---
title: "最初の投稿"
date: 2024-01-15T10:00:00+09:00
draft: true
tags: ["hugo", "blog"]
---

ここにコンテンツを書きます...

公開の準備ができたら draft: truedraft: false に変更します。その後、ローカルサーバーを起動します:

hugo server -D   # -D は開発中にドラフト投稿も含めてビルドする

http://localhost:1313 を開いてください — ファイルを編集するとHugoがホットリロードします。本番環境の準備ができたら:

hugo
# 出力は ./public/ にあります — このディレクトリをデプロイします

オプションB — Jekyllを始める

JekyllにはRubyが必要です。Ubuntuの場合:

sudo apt install ruby-full build-essential
gem install jekyll bundler

jekyll new myblog
cd myblog
bundle exec jekyll serve

サイトは http://localhost:4000 で確認できます。投稿ファイルは _posts/ ディレクトリに置き、以下の命名規則に従う必要があります:

# ファイル名は YYYY-MM-DD-タイトル.md の形式にする必要があります
touch _posts/2024-01-15-my-first-post.md
---
layout: post
title: "最初の投稿"
date: 2024-01-15
categories: [programming, linux]
tags: [jekyll, blog]
---

コンテンツはここから始まります。

本番用にビルドします:

bundle exec jekyll build
# 出力は ./_site/ にあります

無料でデプロイする

Hugoの場合、私はCloudflare Pagesを愛用しています。無料プランは月500ビルドまで対応し、無制限の帯域幅とグローバルCDNを提供してくれます — 個人ブログには十分すぎるほどです。セットアップは約5分で完了します:

  1. HugoプロジェクトをGitHubまたはGitLabリポジトリにプッシュする
  2. Cloudflare Pagesに接続する
  3. ビルドコマンドを hugo、出力ディレクトリを public に設定する
  4. main へのプッシュのたびに自動的に新しいデプロイが行われる

GitHub Pages上のJekyllの場合は、さらにシンプルです:

# リポジトリの Settings > Pages にアクセスする
# ソースブランチをmainに、フォルダを / (root) に設定する
# GitHubが自動的にビルドとデプロイを行う

1〜2分以内に https://yourusername.github.io/repo-name でブログが公開されます。

本当に時間を節約できるヒント

始めた当初に知っておきたかったことをいくつか紹介します:

  • アーキタイプ(Hugo)またはデフォルト(Jekyll)を活用することで、フロントマターテンプレートを事前に埋めておきましょう。すべての投稿にタグ、カテゴリー、SEOフィールドを追加することになります — アーキタイプに一度設定しておけば、後で忘れることがなくなります。
  • ローカルと本番の設定を分けておきましょう。Hugoの環境設定システムを使えば、環境ごとに設定を上書きできます。本番の baseURLconfig/production/hugo.toml に、ローカルのURLを config/development/hugo.toml に保存します。hugo --environment production を実行して適切な設定を有効にします。
  • テーマをカスタマイズしすぎないようにしましょう。シンプルでメンテナンスが行き届いたテーマを選び、CSSを少し調整する程度に留めましょう。大幅にカスタマイズしたテーマは、アップストリームのアップデートで上書き設定が崩れたときにメンテナンスの頭痛の種になります。
  • 執筆中の投稿には draft: true を使いましょう。書きかけの記事をメインのコンテンツディレクトリに直接コミットしてはいけません。
  • .gitignore にビルド出力を除外する設定を追加しましょう。CIからデプロイしましょう — public/ または _site/ フォルダをgitにコミットしないでください。
# Hugo の .gitignore
public/
resources/_gen/
.hugo_build.lock

# Jekyll の .gitignore
_site/
.sass-cache/
.jekyll-cache/

まとめ

静的ブログはもはやニッチなものではありません。個人サイトやプロフェッショナルサイトを運営する開発者にとって、CMSよりも高速で安価、メンテナンスの手間もはるかに少ない明白な選択肢となっています。

HugoとJekyllはどちらも優れたツールです。Hugoはビルド速度とデプロイの柔軟性で勝ります。JekyllはGitHub Pages統合で勝ります。既存のセットアップに合う方から始めましょう。すでにGitHubを使っていてCI設定なしで始めたい?Jekyllの方が導入が簡単です。CloudflareやNetlifyにデプロイする?Hugoを選びましょう。

とにかく一つ選んで、何か公開しましょう。後から静的ジェネレーターを移行するのは半日もあれば十分です — すべてがプレーンなMarkdownファイルであり、フロントマターの構文もツール間でほとんど違いがありません。

Share: