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

はじめに

このブログは 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 の使用の方が良いと思います。

By カルロ

カルロのブログ

日々の思考と技術ブログ