#04：AWS-S3を使った静的Webサイトホスティング～webページ執筆環境構築編～
はじめに
このwebサイト記事は、AWS S3に格納したファイルをCloudFront経由でHTTPS配信することで成り立っています。
本記事にて、Webサイトページの作成を行うHugoの環境構築について説明します。
※本筋（AWSインフラ構築）ではないので、あっさり目に記載しています。
この記事でわかること
- Hugoプロジェクトの新規作成手順
- テーマ(テンプレート)の探し方と導入方法
- hugo.tomlの基本設定(baseURL、言語設定、テーマの指定)
- ローカル環境(localhost)でのプレビュー方法
- 新規記事の作成方法とフロントマターの基本
- ビルドしたファイルをAWS S3へ同期しデプロイする一連の流れ
全体の流れ
Hugoとは
HugoはSSG (Static Site Generator; 静的サイト生成)の1つで、Markdown形式で記述することで、htmlを生成することができるツールです。
Note
「静的サイト」は、html, css, javascriptで構成されるwebページです。基本的に、だれが見ても同じwebページが表示されます。
対義語の「動的サイト」は、上記に加えて、phpなどを使ったDBアクセスなどを含むwebページです。各ユーザーに応じたwebページを表示させることができます。
通常webページを作成するには、htmlを書く必要があり、htmlをまずは勉強しないといけません。いわゆる「お作法」的な要素で<head>、<main>、<body>、<section>、etc…毎回書くのはかなり面倒です。
しかし、Hugoを使うと、そのあたりの「お作法」はすべて自動でやってくれます。
人間が書くのは、<body>の中身だけ。リストを作るときも<li> </li>で囲む必要もなく、タグの終端し忘れも防げます。
Markdownで議事録などを取ったことのある人であれば、かなりなじみやすいものだと思います。
今回は、AWSインフラを構築することがメインであり、htmlを勉強することに時間コストをかけたくはなかったので、こちらを採用しています。 ついでに記事を書く速度が爆速で上がりますので、メリットが大きいです。
環境構築
Hugoをインストールして、webサイトテンプレートを使ってまずは構築しましょう。
step1. Hugoのインストール
Powershellを開き、下記コマンドを実行して、Hugoのインストール状況を確認してください。
hugo version
version情報が表示されない場合は未インストールなので、下記コマンドを実行して、Hugoをインストールしてください。
winget install Hugo.Hugo.Extended
インストールが完了したら、PowerShellを再起動してから、version確認を行い、インストールされていることを確認してください。
step2. webサイトページの新規作成
PowerShellにて、htmlファイルなどを含む「プロジェクト」を作成してもよいディレクトリにcdコマンドで移動します。
cd <プロジェクト作成ディレクトリ>
下記コマンドを実行して、Hugoのプロジェクトを作成します。プロジェクト名(<project name>)は、お好きな名前をどうぞ。
hugo new site <project name>
今いるディレクトリに、<project name>と同じ名前のディレクトリが生成されることを確認してください。
確認出来たら、そのディレクトリの中にcdで入っておきます。
cd <project name>
step3. テンプレートの導入
Hugoのテンプレートは下記サイトで確認できます。お気に入りのテンプレートを探してみてもよいかもしれません。
お気に入りのテンプレートが見つかったら、Downloadボタンを押して、githubのページに飛んで、URLを取得します。
そのうえで、下記git submoduleコマンドにより、テンプレートを導入します。
git init
git submodule add <githubのURL> themes/<テンプレート名>
例えば、公式サイトで紹介されている方法では、“Ananke"というテーマを用いる場合下記コマンドを実行します。
git init
git submodule add https://github.com/gohugo-ananke/ananke themes/ananke
gitのからのリポジトリを作成してから、themes/anankeディレクトリ配下に、URL先の構成をダウンロードしてくるイメージです。
テーマをHugoに認識させるために、hugo.tomlに下記を追記します。
ついでに、言語設定を日本語にしておくのと、base urlを自分のURLに書き換えておきましょう。
baseURL = "https://<独自ドメイン>/"
locale = 'ja-jp' #編集する
theme = 'ananke' #追記する
Note
hugo.tomlはconfigファイルです。
公式サイトは、echoコマンドで追加していますが、PowerShellで実行すると文字コードの問題でうまくいかないので、tomlファイルに直接書いてしまうことをお勧めします。
最後に、下記コマンドでlocalhostでサーバーを起動し、ページを表示させます。
hugo server
Powershellの最後のほうに、下記のようなアクセス方法が書かれていると思いますので、Webブラウザのアドレスバーに入力してアクセスします。
Web Server is available at http://localhost:50174/ (bind address 127.0.0.1)
下記のように表示されれば、構築完了です。
動作確認が終わったら、Ctrl + Cでサーバーを停止させてください。
step4. 記事を執筆してlocalhostでプレビュー
次に記事を執筆していきます。下記コマンドを実行して、markdownファイルを作成します。
hugo new content content/posts/<記事ファイル名>.md
content/postsディレクトリ配下に、mdファイルが生成されると思います。
mdファイルを開いてみるとあらかじめ必要な設定（フロントマター）が書かれています。
+++
date = '2026-09-27T20:45:31+09:00' #<date>T<time>+<timezone>の構文。公開時間になる。
draft = true #falseにすると、公開される
title = 'My First Post'
+++
#ここに記事を執筆します
下の余白に記事を書けばよいです。
適当な記事が書けたら、Powershellで下記コマンドを実行してみると、ポストが表示されるはずです。
hugo server -D
※ -Dは、draft = trueでも表示するためのオプションです。
下記のように、見えればOKです。
これでlocalhostでのwebページ確認ができるようになりました。
AWS S3へのデプロイ
最後に、本番環境（AWS S3）へデプロイしましょう。
step1. draftをオフにする
まず、mdファイル冒頭のdraftをfalseにして、本番環境で表示できるようにします。
+++
date = '2026-09-27T20:45:31+09:00' #未来の日付にすると表示されないので注意（予約公開）
draft = false #ここをfalseにすると、公開される
title = 'My First Post'
+++
step2. CloudFrontディストリビューションIDの確認
次に、CloudFrontディストリビューションIDを確認します。
AWSマネジメントコンソールより、CloudFrontの管理画面に入ってください。
画面左ペインから「ディストリビューション」を選択してもらうと、IDが確認できます。
step3. s3へファイルをsync
この情報がわかったら、Powershellで下記コマンドを実行していきます。
S3のバケット名 ( $BUCKET_NAME )と、CroudFrontディストリビューションID ( $DISTRIBUTION_ID )は、各自の値を入力してください。
# S3バケット名(Step 8)とCloudFrontディストリビューションID(Step 9)を設定
$BUCKET_NAME = <S3バケット名>
$DISTRIBUTION_ID = "XXXXXXXXXXXXX"
# ビルド
hugo --minify
# S3へ同期（deleteコマンドで、ローカルに存在しないファイルをすべて削除し、完全同期させます）
aws s3 sync .\public s3://$BUCKET_NAME --delete
# CloudFrontのキャッシュを無効化
aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths "/*"
心配性な方（と本番環境が大事な場合）は、aws s3 syncする際に、末尾に–dryrunオプションをつけて、確認しましょう。
step4. webサイトの確認
あとは、hugo.tomlでbaseURLとして指定した、独自ドメインのURL（https://<ドメイン>/）のトップページにアクセスしてwebページが表示されればOKです。
Webサイトの完成
おめでとうございます！
これでWebサイトページの執筆環境の構築も終わり、Webサイト作成の礎は完成しました。あとは自由に記事を書いていくだけです。
既存のテーマを使ってもいいのですが、レイアウト（css）はAIにぶん投げていろいろ調整してもらうと、理想を実現できておススメです。（このサイトの見た目も、Claudeくんに全部作ってもらっています）
また、私はMarkdownが書きやすいように、VS Codeを使っています。「Formatter CMS」という拡張機能を使うと、Hugoでのwebページ執筆環境を構築することができるので便利です。調べてみてください。（気が向いたら記事にします）
それでは楽しいWebサイトライフを！