🌐 独自ドメインでGitHub Pages公開したら壊れた話

GitHub Pages に独自ドメインを設定したとき、リダイレクトやCSSが崩れるトラブルに見舞われました。

おはようございます😄
今日は暖かくていい天気ですね☀️

朝から気合を入れて、アプリの不具合解消に取り組みました🔧
そしてついに、足し算アプリの更新が完了しました！ 🎉

スマホで表示するとボタンや数字が大きすぎて見づらかったため、全体をコンパクトに調整しました📱
つまり、以前よりずっとスッキリして見やすくなっています✨

ただ、「数を図形で表す表示」を5個ごとに折り返す仕様にしていたのですが、画面サイズによって崩れてしまうことが判明…😅
そのため、レスポンシブ対応の難しさを改めて実感しました。この部分は今後の課題です。

しかし、ひとまずアップデートできたので一安心です😊
少しずつ、確実に改善していきます。

GitHub Pages 独自ドメインで起きたトラブルの原因

一昨日から不具合解消に取り組みましたが、何が問題だったのか自分ではよくわからなかったので😓
AIにまとめてもらいました。以下、その解説です。

独自ドメイン（kaotyan.com）で運用しているサイトに足し算アプリを追加しようとしたところ、GitHub Pages の独自ドメイン設定でトラブルが発生しました。

具体的には、以下の3つです。

一方で、なぜこれらが起きたのかを整理すると、原因は明確でした。
順番に見ていきます。

DNSとは、「このドメイン名のサイトは、どのサーバーにありますか？」を教えてくれる仕組みです。

たとえば kaotyan.com を入力すると、DNSがGitHubのサーバーへ変換してくれます。
これを「名前解決」と言います。

正常な状態では、こんな一本道になっています。

ブラウザ → kaotyan.com → DNS → GitHub Pages → メインサイト

つまり、ドメインも配信元も1つずつ。シンプルな構成です。

アプリ用のリポジトリにも同じ独自ドメインを設定してしまいました。

そのため、DNSからすると「どちらに行けばいいの？」という状態に😵
リダイレクトが起きたり、DNS Checkが終わらなかったりと、不安定な状況が続きました。

アプリのURLは kaotyan.com/add-math/ だったにもかかわらず、CSSの読み込みパスが /style.css（ルート参照）になっていました。

しかし実際のファイルは /add-math/style.css にあるため、ファイルが見つからずデザインが崩れていました。

DNSには TTL（生存期間） という仕組みがあり、古い情報をしばらく保持し続けます。

そのため、設定を直してもすぐには反映されません。
Ctrl＋F5で強制再読み込みするか、少し時間を置くことが必要です。

GitHub Pages の独自ドメインは、1つのリポジトリだけに設定するのが正解です。

つまり、以下のような構成が最もシンプルで安定します。

最初は焦りましたが、実践で起きたエラーは一番の勉強になりますね。
しかも、GitHub Pages の独自ドメイン設定の仕組みまで理解できたので、結果的に大きな収穫でした😊