この章では、R100サイトの構築に使用したHugo、PaperModテーマ、Netlifyを組み合わせた基本的な構築手順を解説します。

1. Hugoのインストール

Hugoは静的サイトジェネレーターで、公式サイトからインストールできます。

macOSの場合（Homebrewを使用）

brew install hugo

Windowsの場合（Chocolateyを使用）

choco install hugo-extended

2. 新規サイトの作成

以下のコマンドで新しいHugoサイトを作成します。

hugo new site r100site --format yaml
cd r100site
git init

3. PaperModテーマの導入

PaperModはシンプルでカスタマイズ性の高いHugoテーマです。

テーマをサブモジュールとして追加します。

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

hugo.yaml（またはconfig.yaml）にテーマを指定します。

theme: PaperMod

4. サイトのローカルプレビュー

以下のコマンドでローカルサーバーを起動し、サイトをプレビューできます。

hugo server

ブラウザで http://localhost:1313 にアクセスして確認します。

5. 初期コンテンツの作成

新しい記事を作成するには、以下のコマンドを使用します。

hugo new posts/first-post.md

content/posts/first-post.md が作成されます。

6. Netlifyでのデプロイ設定

Netlifyは静的サイトのホスティングサービスで、Gitリポジトリと連携して自動デプロイが可能です。

手順

  1. Netlifyにログインし、「New site from Git」を選択します。

  2. GitHubなどのリポジトリを選択し、ビルド設定を行います。

    • Build command: hugo
    • Publish directory: public

  3. 必要に応じて、環境変数 HUGO_VERSION を設定します。

注意点

  • PaperModテーマはHugoの拡張版が必要なため、Netlifyでのビルド時に hugo-extended を使用するよう設定してください。
  • サブモジュールを使用している場合、Netlifyのビルド設定でサブモジュールの取得を有効にする必要があります。

このように、Hugo、PaperMod、Netlifyを組み合わせることで、無料で高速な静的サイトを構築・公開できます。

この段階でハマりやすいポイント・実際にハマった点

1. Hugoのバージョン差異（ExtendedでないとPaperModでエラー）

  • PaperModテーマの一部機能（特にSASS/SCSSサポート）は hugo-extended でないとビルドエラーになる。
  • Netlify標準イメージは通常版のHugo。HUGO_VERSION だけ指定しても extended でないことがある。
  • Netlifyのビルドイメージで hugo-extended を指定するには、environment variable を明示。

2. サブモジュール関連のミス

  • PaperModテーマをGitサブモジュールで導入した場合、Netlifyのビルド設定で「サブモジュールの取得」を有効化しないとビルドエラー。
  • GitHub上の権限やアクセス制限にも注意。

3. 設定ファイル名（config.toml/yaml/json/hugo.tomlなど）

  • Hugoは config.toml、config.yaml、config.json など複数方式が混在可能だが、複数残すと優先順位や上書きで混乱。
  • ローカルでは、config.tomlでテストしていたが、Netlifyにアップしたタイミングでサブモジュール設定
[build.environment]
  GIT_SUBMODULE_STRATEGY = "recursive"

が読み込まれない問題が発生hugo.toml。

  • 移行・変換時に意図しない挙動を起こしやすい。

4. ローカルと本番での表示差

  • ローカル開発環境では正常でも、Netlify上ではテーマ適用や画像リンクでパス違いのエラーが発生することがある。
  • baseURLや相対パス・絶対パスの設定を明示する。

5. その他

  • 記事ファイルやテーマを直編集していると、Git管理やサブモジュール管理が破綻しやすい。
  • .gitmodulesや.gitignoreの記述ミスにも注意。

次回は、サイト構造とUIのカスタマイズについて解説します。