+++

いよいよデプロイ編の最終回、そしてサイト制作の総仕上げとも言えるステップです!
現在のサイトのURLは https://***.web.app のようなFirebase側から割り当てられた初期状態の形になっていますが、これを
https://example.com のような 「あなただけのオリジナルドメイン(独自ドメイン)」 に変更します。

独自ドメインを取得して設定するだけで、サイトの信頼性(ブランディング)と検索エンジンからの評価が上がり、なにより「自分だけの城(Webサイト)が完成した!」という愛着がグッと増しますよ!


1. ドメインの入手

まだドメインを持っていない場合は、ドメイン登録サービスで取得が必要です。
(お名前.com, Xserver Domain, Google Domains, Cloudflare など、どこでもOKです)


2. Firebase Consoleでの設定

Google側の受け入れ設定を行います。

  1. Firebase Console を開き、Hostingの管理画面へ行きます。
  2. 「カスタムドメインを追加」 ボタンをクリック。
  3. 取得したドメイン(例: example.com)を入力して「次へ」。

3. DNSの設定 (難関ポイント!)

ここで「このドメインは私のものです」という証明と、「このドメインへのアクセスをFirebaseに送る」設定をします。

Firebaseの画面に、以下のような情報が表示されます。

タイプホスト
TXT@google-site-verification=...
A@199.36.158.100 (IPアドレス)

これを、ドメイン管理会社の管理画面(DNS設定画面) に登録します。

手順(一般的な例)

  1. ドメイン管理サイトの「DNSレコード設定」を開く。
  2. TXTレコード を追加(所有権の確認用)。
  3. Firebase側で「確認」ボタンを押して、所有権が確認されるのを待つ(数分〜数時間かかることがあります)。
  4. Aレコード を追加(アクセスの転送用)。
    • 以前のIPアドレスがある場合は削除または上書きします。

※ 反映には最大で24時間〜48時間かかることがありますが、最近は数分で済むことも多いです。
SSL証明書(https://)も、Firebaseが自動で発行してくれます(最高!)。


4. Hugoの設定変更 (忘れがち!)

ドメインが変わったら、Hugoにも「新しいURLになったよ」と教えてあげる必要があります。
これを忘れると、記事内のリンクやSNSシェアボタンのURLが古いままになってしまいます。

hugo.toml を開いて、baseURL を書き換えてください。

# hugo.toml

# 変更前
baseURL = 'https://my-hugo-blog.web.app/'

# 変更後
baseURL = 'https://example.com/'

Q&A: よくある質問

Q. なぜ最後に設定するの?

いきなり独自ドメインを設定してサイトが見れないと、「ドメイン設定(DNS)が間違っているのか?」「Hugoのデプロイ失敗なのか?」の原因究明が難しくなるからです。
まずは無料のURL(run.appweb.app)で確実に動くことを確認してから、最後にドメインを切り替えるのが安全な手順です。

Q. 無料のURL(web.app)はどうなるの?

独自ドメインを設定しても、無料のURLはそのまま使えます
リダイレクト(転送)はされませんが、「本番公開前のテスト環境」として便利に使えます。

Q. URLが2つあるとSEO的にまずくない?

同じ内容のサイトが複数あると、「重複コンテンツ」として検索エンジンの評価が下がることがあります。
これを防ぐために、Canonical(カノニカル)タグ を設定しておきましょう。

layouts/baseof.html<head> 内に以下の一行を追加します。

<link rel="canonical" href="{{ .Permalink }}">

これがあると、Googleに対して 「正規のURLはこちら(独自ドメインの方)ですよ!」 と伝えることができ、無料URL側の評価を無視させることができます。安心ですね!

Q. 無料URLにアクセスさせたくない(非公開にしたい)場合は?

完全に消すことはできませんが、「無料URLにアクセスしたら、勝手に独自ドメインに飛ばす(リダイレクト)」 という設定は可能です。

firebase.json というファイルを開き、以下のように書き換えてみてください。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    // ▼ここから追加
    "redirects": [
      {
        "source": "**",
        "destination": "https://example.com/:0",
        "type": 301
      }
    ]
    // ▲ここまで追加
  }
}

https://example.com の部分は自分のドメインに変えてください。
:0 は「パスをそのまま引き継ぐ」という魔法の記号です。

これをデプロイすると、無料URL(web.app)にアクセスした人は強制的に独自ドメインに転送されます。これで実質的に「非公開」と同じ状態になります!


5. 最後のデプロイ

設定を変更したので、GitHubにプッシュして反映させましょう。

git add .
git commit -m "Update baseURL for custom domain"
git push

数分後、GitHub Actionsが完了すれば作業終了です。
新しいドメインにアクセスしてみてください。


これにて「デプロイ編」完結!最強のブログ環境の完成🎉

お疲れ様でした!これらすべての設定を乗り越えたことで、あなたのPC(ローカル環境)で書いた記事が、世界中の人に見てもらえる本格的なサイトとして完全公開されました。

しかも、毎月のサーバーの維持費は(独自ドメインの年間数千円の更新料を除けば)実質無料で、コンテンツの更新作業はGitHubへのPushだけの全自動という、プロのWebエンジニア顔負けのモダンな構成です。
テーマ作成からデプロイまで、Hugoの基礎は全て習得できました。最強のブログシステムと環境が整いましたので、あとは日々の運用を通して存分に記事(コンテンツ)を書き溜めていくだけです!継続して素晴らしいWebサイトに育てていってくださいね✍️