Hugo + S3 + CloudFrontで技術ブログを構築した話

カルロ

- One minute read - 160 words

はじめに

このブログは Hugo（静的サイトジェネレーター）+ S3 + CloudFront で構築しています。セットアップ手順と重要なポイントをまとめました。

前提条件

  • macOS環境（Homebrewが利用可能）
  • AWS CLIが設定済み
  • Gitがインストール済み
  • AWSアカウントでS3バケットとCloudFrontの設定権限があること

費用について

  • S3: 月額数十円程度（ストレージ容量とリクエスト数による）
  • CloudFront: 転送量による（少量であれば無料枠内）

基本セットアップ手順

1. Hugoプロジェクトの作成

# Hugoのインストール（macOS）
brew install hugo

# 新しいサイトを作成
hugo new site my-blog
cd my-blog

# Gitリポジトリとして初期化
git init

# テーマを追加（Anankeテーマを使用）
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

2. 設定ファイルの作成

# config.toml
baseURL = 'https://yourdomain.com'
languageCode = 'ja'
title = 'Your Blog Title'
theme = 'ananke'

# CloudFrontでの404回避のためHTML拡張子を明示
[permalinks]
  posts = '/:section/:title.html'

[params]
  show_reading_time = true
  recent_posts_number = 5

3. デプロイ設定

# 静的ファイル生成
hugo --minify

# S3へアップロード
aws s3 sync public/ s3://your-bucket-name --delete

重要なポイント・ハマりどころ

1. 設定ファイルの競合問題

Hugo v0.110以降では hugo.toml が自動生成されるため、config.toml と競合する場合があります。今回は参考記事に合わせて config.toml に統一しましたが、新規プロジェクトでは hugo.toml の使用の方が良いと思います。

2. CloudFront + S3でのサブページ404問題

/posts/article-name/ 形式のURLだとCloudFrontで404エラーになりました。

S3の静的ウェブサイトホスティングでは、ディレクトリ形式のURLに対してindex.htmlを自動で探しますが、CloudFront経由だとこの機能が働きません。permalinks 設定で .html 拡張子を明示することで解決しました。

運用のワークフロー

  1. 記事作成: hugo new posts/article-name.md
  2. ローカル確認: hugo server
  3. ビルド: hugo --minify
  4. デプロイ: aws s3 sync public/ s3://bucket-name --delete
  5. CloudFront無効化: aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

まとめ

Hugo + S3 + CloudFront構成により、安価な技術ブログを構築できました。

同じような構成を検討している方の参考になれば幸いです。

参考リンク