このサイト（hrstsh.com）を GitHub Pages で立ち上げ、カスタムドメイン・Search Console・Analytics まで設定しました。Perplexity や Cursor といった AI ツールを活用した開発の流れも含めて、実際にやったことを書きます。

GitHub Pages の作成

まずは GitHub でリポジトリを作成し、静的サイトとして公開する。Astro でビルドした静的ファイルを dist/ に出力し、GitHub Actions で自動デプロイする構成にした。

GitHub リポジトリの Settings → Pages で、Source を「GitHub Actions」に設定する。 ワークフローが push のたびにビルドしてデプロイしてくれる。

リポジトリ内の主要なフォルダ構成と役割は次のとおり。

├── .github/workflows/  ... デプロイ設定（GitHub Actions）
├── src/
│   ├── layouts/     ... 共通レイアウト（Layout.astro）
│   ├── data/        ... 最近の更新・やってみた一覧（手動管理）
│   ├── pages/       ... ページ（index, tried, tips, cheatsheets, tools）
│   ├── components/  ... 再利用コンポーネント
│   └── styles/      ... グローバルスタイル
├── public/          ... 静的ファイル（CNAME, robots.txt, 画像）
└── scripts/         ... ビルド・Git 用スクリプト

カスタムドメイン（Xserver でドメイン取得）

せっかくなので独自ドメインを取得しました。新しいアカウントを作るのが面倒だったため、既にアカウントを持っている Xserver でドメインを契約しました。Xserver のドメイン取得サービスで希望のドメインを検索し、契約。取得後、DNS 管理画面にアクセスできます。

apex ドメイン（例: hrstsh.com）の場合は、A レコードを 4 つ追加します。GitHub Pages の公式 IP は次のとおりです。

DNSレコード設定

GitHub リポジトリの Settings → Pages → Custom domain に取得したドメインを入力する。 また、リポジトリの public/CNAME にドメイン名を書いておくと、ビルド時に自動で dist にコピーされる。

GitHub Custom domain 設定

DNS の反映には数分〜最大 48 時間かかることがある。反映されると、独自ドメインでサイトにアクセスできるようになる。

Google Search Console

検索エンジンにサイトを登録し、インデックス状況を確認するために Google Search Console を設定した。

Search Console でプロパティを追加する際、ドメイン指定（hrstsh.com）でプロパティを作成した。 所有権の確認は、DNS に TXT レコードを登録する方法で行った。Xserver の DNS 管理画面で、Search Console から指示された TXT レコードを追加し、反映を待って確認した。

ドメイン指定の場合は DNS で確認する。HTML タグで確認する場合は Layout.astro の <head> に以下の meta タグを追加する。

<!-- Layout.astro の head 内 -->
<meta name="google-site-verification" content="検証用コード" />

Google Analytics

アクセス解析のため、Google Analytics 4（GA4）を導入した。 Layout.astro に gtag のスクリプトを追加し、本番環境でのみ読み込むようにした。

GA4 でプロパティを作成し、測定 ID（G-XXXXXXXXXX）を取得。その ID を Layout の gtag 設定に渡す。 本番環境でのみ読み込むように import.meta.env.PROD で分岐している。

Layout.astro の <head> に埋め込んでいるコード例。

<!-- Layout.astro の head 内・本番環境のみ -->
{isProd && (
  <>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script is:inline>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
  </>
)}

Perplexity での検索・コネクタソースを利用した PR 作成

記事の下書きや設計を考える際、Perplexity を活用した。検索機能で最新の情報を参照し、 コネクタソースを指定して、リポジトリの構成や README の内容を踏まえた提案を受け取ったり、記事の草案をリポジトリに作成させたりした。

「このリポジトリの構成に合わせて〇〇を作って」のような指示を出すと、 検索結果とリポジトリの内容を組み合わせたコードや説明文が返ってくる。 それをそのまま PR の説明文やコードのベースとして使うことができた。

Cursor でのコーディング

Perplexity の作成するコードは割とエラーだらけだったため、実際のコーディングは Cursor を使って行った。エディタ内で AI に質問しつつ、 ファイルの追加・修正を進められる。Astro のベストプラクティスや TypeScript の型定義も、 コンテキストに応じて提案してくれる。

.cursorrules にプロジェクトのルール（個人情報を書かない、README を更新する、 Astro のコードブロックで { } を直書きしないなど）を書いておくと、 AI がそれを守った提案をしてくれる。

Perplexity で「たたき」を作り、Cursor で仕上げる、という二段構えのやり方が効いていました。

よくある質問

GitHub Pages の作り方は？
GitHubでリポジトリを作成し、静的サイトのソースをpushする。Settings → Pages で Source を「GitHub Actions」に設定。Astro などのビルドツールを使う場合は、.github/workflows にデプロイ用のワークフローを用意し、pushのたびに自動デプロイされるようにする。
カスタムドメインの設定方法は？
ドメイン取得後、DNS で A レコードを GitHub Pages の IP（185.199.108.153 など4つ）に向ける。GitHub の Settings → Pages → Custom domain にドメインを入力。リポジトリの public/CNAME にドメイン名を記載する。反映には数分〜最大48時間かかることがある。
Xserverでドメインだけ取得できる？
できる。Xserverのドメイン取得サービスで契約し、DNS管理画面から GitHub 向けに A レコードを設定する。Xserverのホスティング契約は不要で、ドメインだけ取得する形で利用できる。