はじめに#
前回Hugoでセットアップしたブログを、Netlifyで公開して独自ドメインを設定しました。Value Domainでドメインを取得し、Google Cloud DNSでDNS管理をしているケースでの設定方法をまとめます。
Netlifyへのデプロイ準備#
netlify.tomlの作成#
まず、プロジェクトのルートディレクトリにnetlify.tomlを作成しました。このファイルでNetlifyのビルド設定を定義します。
[build]
publish = "public"
command = "hugo --gc --minify"
[build.environment]
HUGO_VERSION = "0.148.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[[redirects]]
from = "/netlify/*"
to = "/index.xml"
status = 200
[[headers]]
for = "/*"
[headers.values]
Referrer-Policy = "strict-origin-when-cross-origin"
X-Content-Type-Options = "nosniff"
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
[[headers]]
for = "/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
[[headers]]
for = "/css/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
[[headers]]
for = "/js/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
設定のポイント#
ビルド設定
publish = "public": Hugoが生成する公開ディレクトリcommand = "hugo --gc --minify": ビルドコマンド（不要ファイル削除とHTML圧縮）HUGO_VERSION: 使用するHugoのバージョンを明示的に指定
セキュリティヘッダー
- XSS攻撃やクリックジャッキングを防ぐためのヘッダーを設定
- Referrer-Policyで参照元情報の送信を制御
キャッシュ設定
- 静的アセット（CSS、JS、画像）に長期キャッシュを設定
- サイトの高速化に貢献
.gitignoreの作成#
ビルド成果物をGitに含めないよう.gitignoreも作成：
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json
# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux
# Temporary lock file while building
/.hugo_build.lock
# Node
node_modules/
# Mac
.DS_Store
GitHubへのプッシュ#
git add .
git commit -m "Netlifyデプロイ設定を追加"
git push origin main
Netlifyでのデプロイ#
- Netlifyでアカウント作成
- 「Add new site」→「Import an existing project」を選択
- GitHubと連携し、リポジトリを選択
- ビルド設定は
netlify.tomlから自動的に読み込まれる - 「Deploy site」をクリック
数分でデプロイが完了し、https://[ランダムな名前].netlify.appでサイトが公開されます。
独自ドメインの設定#
1. Value Domainでドメイン取得#
Value Domainで希望のドメインを取得しました。今回はサブドメインでブログを運用することにしました。
2. Google Cloud DNSの設定#
Value DomainのネームサーバーをGoogle Cloud DNSに変更済みの場合：
- Google Cloud Consoleで該当のDNSゾーンを開く
- 新しいレコードセットを追加：
- 名前： blog（使用したいサブドメイン）
- タイプ： CNAME
- TTL： 300
- データ： [あなたのサイト名].netlify.app
3. Netlifyでカスタムドメインを設定#
- Netlifyのサイト設定 → Domain management
- 「Add custom domain」をクリック
blog.yourdomain.comを入力- DNS設定の確認が行われ、正しく設定されていれば自動的に有効化
4. HTTPS証明書の設定#
NetlifyはLet’s Encryptを使って自動的にSSL証明書を発行してくれます。
- Domain settingsで「HTTPS」セクションを確認
- 「Verify DNS configuration」をクリック
- 数分待つと自動的に証明書が発行される
HugoのbaseURL設定#
最後に、Hugoの設定ファイルでbaseURLを更新：
# config/_default/hugo.toml
baseURL = "https://blog.yourdomain.com/"
まとめ#
Netlifyを使うことで、以下のメリットがありました。
- 簡単なデプロイ: GitHubにプッシュするだけで自動デプロイ
- 高速なCDN: 世界中のエッジサーバーから配信
- 無料のHTTPS: Let’s Encrypt証明書を自動管理
- カスタムドメイン: サブドメインでもCNAMEで簡単設定
- 自動ビルド: netlify.tomlで環境を適切に制御
Value Domain + Google Cloud DNS + Netlifyの組み合わせは、柔軟性が高く、管理もしやすいのでおすすめです。