Skip navigation

おこじょめもらんど

CloudflareとXserverドメインでAstroブログをデプロイした

CloudflareとXserverドメインでAstroブログをデプロイした

Created At
diary
astro cloudflare

タイトルの通りですが、 Astro を使って構築したブログを Cloudflare でホスティングして、 Xserver でドメイン名を取得して、Google Search Console でインデックス登録して Google さんに自分のブログが表示されるようにしました。

ここまでくればやっとブログを持ってるよ!と言えると思います。

あくまでも自分のためのメモというところで下記については触れません。

こちらで少しブログ作りました!って言っていますが、技術的なところはzennにでも書こうと思います。


目次

Cloudflareに作ったブログをデプロイする

Cloudflareに作成したAstroブログをデプロイする手順はめちゃくちゃ簡単で、公式ドキュメントに従うだけでデプロイできます。

Deploy your Astro Site to Cloudflare Pages 🚀 Astroドキュメント

もしかしたらCloudflareの公式(Deploy an Astro site · Cloudflare Pages docs)の方が詳細に説明してくれているのでそちらのほうがいいかもしれないです。

事前準備としてCloudflareのアカウントを作成しておきます。

また、作成したAstroブログはgitlabgithubのリポジトリで管理するようにしておきます。

  1. Cloudflare PagesからGit リポジトリに接続する

    CloudflareのダッシュボードからPagesにいってAstroブログのGit レポジトリに接続します。

    github or gitlabに接続完了したら、デプロイするastroブログのリポジトリを選択します。自分はgithubのリポジトリを使っていますが、プライベートリポジトリで作っています。

  2. astroブログのビルド設定

    公式ドキュメントに従って下記をビルド・デプロイ設定します。

    注意するポイントとしては、Cloudflare PagesではNode.js 12.18.0を使用してビルドされるので、astroブログのビルドに対応できるようにビルド時のNode.jsのバージョンを上げる必要があります。

    astroの公式では上記の設定でNODE_VERSIONをEnvironment variablesに設定するか、.nvmrcファイルをプロジェクトに作成するかみたいな感じで対応すると書いてありますが、自分はnvm使っていないので、.node-versionを作成してastroブログのプロジェクトに置いています。(.node-versionの書き方にも色々あるんですね)

  3. デプロイして最低限のアクセス制限をする

    2のビルド設定して、Save and Deployでデプロイします。 いい感じに成功すればmainブランチの内容がそのままデプロイされるようになるので管理画面から確認します。 site-name.pages.devでアクセスできるはず。

    Xserverでドメインを取得して設定するためにも、今の時点で最低限のアクセス制限をしておきます。

    例えば間違ってリポジトリに投げたものはビルドしてほしくないし、一時的に動作確認のためのページは特定の人しかアクセスできないようにしたくなると思います。

    Cloudflare Pagesではビルド・デプロイごとにUUIDが振られる(6f7as71.site-name.pages.devみたいな)ので、特定のブランチ以外はビルドが実行されないように、かつ*.site-name.pages.devへのアクセスは特定の人のみしかできないようにします。

    はじめにビルドの設定ですが、Pages -> Settings -> Build & deploymentsのBranch deploymentsで自分は下記の設定をしています。 mainにpushされたらproduction 環境でデプロイして、ブログの内容の最終確認とかはdevにpushされたらpreviewとして見るようにしています。

    続いてアクセス制限ですが、Pages -> Settings -> General の Access PolicyEnable access policyを有効化してあげると、*.site-name.pages.devへのアクセスにメールアドレス入力とOTP入力が求められるようになります。簡単ですね。

ここまででCloudflareにastroブログがデプロイできたので、独自のドメインを取得します。

Xserverでドメインを取得する

Xserverを使用してドメインを取得するには以下の手順で進めます。

  1. Xserverの公式ウェブサイトにアクセスしアカウントを作成
  2. ドメインの検索を行い、希望するドメイン名が利用可能か確認
  3. 利用可能なドメインを選択し、支払いをして取得完了

特に詰まったところとか注意する部分はなかったですが、whois情報公開代行のサービスを行っているところでドメイン取得するようにしました。whois情報公開代行についてはお名前.comさんの解説が参考になります。

余談ですが、Xserverで取得した理由みたいなものは特になく、ある程度安くて信頼できるようなところならどこでも良かったかなというところです。

CloudflareにXserverで取得したドメインを設定する

下記の方々が詳しく説明していただいてますので、こちらを参照していただければと思います。

Google Search Consoleに登録する

Google Search Consoleを利用してGoogle の検索結果にastroブログの内容が出るようにします。

Google Search Consoleでプロパティを追加してドメインを設定していきます。

取得したドメインを入力してもらって。。。

上記のようにドメインの所有権の確認が行われるので、Cloudflareの DNS設定にTXTレコードを追加していきます。

CloudflareのコンソールのHomeダッシュボードから2で設定したドメインのアプリケーション(このブログではokojomemorandum.comですね)を開きます。

左のメニューからDNS -> Recordsと選択して、レコードを追加します。

そしたらgoogle search consoleに戻って確認を押して所有権が確認されるはずです。

英語ですがこちら参考になると思います(Verify Google Search Console Ownership using Cloudflare Tutorial - YouTube)。

あとはURL検査してみて、インデックスが登録されていなければインデックス登録をリクエストというボタンがあるので、そちらを押してインデックス登録をリクエストします(自分の場合は登録済みなので下記の表示ですが登録されていませんみたいなエラーが出てた気が)。

確か2,3日くらい?でgoogleの検索結果にこのブログがでるようになりました。

あとはサイトマップも送信しておけば完璧です。

おわり

以上で、CloudflareとXserverドメインでastroブログをデプロイできました。

色々な人が苦労した軌跡をたどっていけば、意外と簡単に自分のブログを公開することができます。astroブログの中身の話は別として、今後もcloudflareなどは触っていきたいと思います。

ポエム

なんとかお金をなるべくかけずに。。。と思って、最初pages.devの状態でgoogle search consoleへのインデックス登録とかサイトマップ送信とかやっていましたが、なかなかうまくいかなくて最終的にドメイン取得に踏み切ったというのがあります。

が、実際お金かけてドメイン取得してみると、自分でこのサイト持っているぞ!という気持ちが強くなったので結果満足しています。 某動画配信サイトとかにお金をかけるくらいなら、数百円でドメインもつのが良いなと考えが変わりました。

個人ブログだしastroだしなので正直CMSはいらないかなと思っていますが、ポエムの量が増えてきたらCMS使いたくなってくるかしら。