2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@wanakh

Astro・Cloudflare Workers・お名前.comを使って無料でブログを公開する

2
Posted at

自分が学んだことやつまづいたことをまとめておくことで、将来の自分のためにも、他の人のためにもなるのではないかと思い、ブログを作った。
既存のブログサービスを使っても良かったのだが、技術の勉強も兼ねて自分でブログを作ることにした。

学習コストが少なそうで、またドキュメントや仕様が洗練されていたAstroでブログを作り、無料で使えて商用利用も可能なCloudflare Workersにデプロイした。カスタムドメインはお名前.comwを利用した。

ここではざっくりとした道筋と、特につまづいた点をまとめる。

AstroPaperをクローンして自分好みのブログを作る

自前でブログを作っても良かったのだが、ここは時間を省略して先人が作ってテーマを使わせていただく。

Astroでは先人が作ったブログやポートフォリオなどのテンプレートが「テーマ」として公開されている。以下のサイトから公開されているテーマを確認できる。無料（free)と有料（paid）のものがある。

今回はAstroPaperというブログのテーマを選んだ。

無料であること、デザインがシンプルでありながらブログとして必要な機能は揃っていること、現在も更新が続けられていることを基準に選んだ。

自分でいろいろとカスタマイズできるので、ブログの色や日本での表示などを設定した。詳しくは別記事で解説する。

お名前ドメインでドメインを取得する

Cloudflareでもドメインを購入することはできる、取得にお金がかかりそうだったのでお名前.comを利用した。

まだ取得されていない言葉なら、.comなどの有名なドメインでも初年無料で取得できる。2年目以降は年に1000円ちょっとかかるはず。

ドメインを取得しようとすると、「無料サーバーを開設するとドメインが永年無料！」といった広告が出てくる、不要なので無視した。

ブログをビルドしてCloudflare Workersにデプロイ

Astroは静的サイトの生成（SSG）を目的としたWebフレームワーク。そのため、デプロイの際にはビルドして本番用ファイルを作る必要がある。

Astroの公式サイトで解説されていたのでこちらを参考にした。

1. wrangler CLI をインストール

npm install wrangler@latest --save-dev

公式サイトでは、この後にオンデマンドレンダリング（ユーザーの入力によって表示するページの見た目を変更する）をするならnpx astro add cloudflareするように書かれている。
ですが、ブログでは記事を読むだけなので私はこの過程を飛ばした。

2. wrangler.jsoncの設定

wrangler.jsoncはwranglerの設定ファイル。　
公式サイトにあるのに加えて、いくつか設定した。

wrangler.jsonc
{
  "name": "blog-name", //ブログ名
  "compatibility_date": "00-00-00", // デプロイする日
  "assets": {
    "directory": "./dist", //本番環境が入ったディレクトリ
    "not_found_handling": "404-page" //ページがない時の表示（指定文言）
  },
  "workers_dev": false  //デプロイ時にデフォルトのURLでデプロイしない
}

"workers_dev": falseを書いていないと、デプロイした時にCloudflare WorkersのデフォルトのURLプロジェクト名.ユーザー名.workers.devが公開されてしまう。

この後でカスタムドメインを設定していたとしてもデフォルトのURLが公開されてしまうので注意。

さらに、Cloudflareのユーザー名はデフォルトだと登録したメールアドレスのドメイン名になるので、プライバシーの観点からも設定した方が良い。

3. ローカルでプレビュー

npx astro build && npx wrangler dev

4. 本番環境へデプロイ

npx astro build && npx wrangler deploy

初回はCloudflareのページが開いてログインするように求められる。

CI/CDなどで自動デプロイしたい場合は公式サイトを参照。

Cloudflare Workersでカスタムドメインを設定

お名前ドメインで取得したURLでデプロイしたブログにアクセスできるようにする。

1. Cloudflareにドメインを登録

Cloudflareのダッシュボードにログインして、左側のメニューから「ドメイン」→「概要」を選ぶ。ここで、「概要」の下の「登録」は選ばないこと。

右上の青い「ドメインを追加」というボタンをクリック。

すると、「サイトを追加」と言う画面になるので、一番上の「ドメインを接続」を選ぶ。

ここに取得したドメイン名を入力し、（例：abc.com)右下の青い「続行」をクリックする。その下にいろいろと設定画面があるが、全て初期設定で構わない。

この後で、ネームサーバーが二つ表示されるので、必ず手元に控えておく。

2. お名前ドメインにCloudflareのネームサーバーを登録

その後に、お名前ドメインにログイン。

そのあとはこちらの手順に従って、先ほどのCloudflareで控えておいたネームサーバー2つを登録する。

ネームサーバーの選択は「その他のサービス」にする。

登録したら、Cloudflareのページに戻る。変更が反映されるまで最大72時間ほどかかるので気長に待つ。ちなみに私は数十分で反映された。反映されると緑色のチェックが表示されるはず。

3. カスタムドメインを設定

先ほどのCloudflareのダッシュボードに戻り、「コンピュート」→「Workers&Pages」を選ぶ。プロジェクトの一覧が表示されるので、ドメインを変更したいWorkersのプロジェクトを選ぶ。

上の方のタブから「ドメイン」を選び、真ん中右あたりにある青い「＋ドメインを追加」をクリック。

ここで、先ほど登録したカスタムドメインを入力。ちなみに、サブドメインも設定可能。例えば、abc.comを登録したならば、def.abc.comをURLとして使うこともできる。

無事に追加されると、入力したURLが「ドメイン」の画面で「本番」として表示される。

その上の「Workers URL」の「プロダクション」にはデフォルトのworkers.devが表示されていると思うので、トグルボタンを押して無効にしておく。

Google Search Consoleを設定

Google Search Consoleは検索での見られ方やクリックされたかなどを分析できるツール。

登録自体はこちらのサイトを参考にした。

所有権の確認はCloudflareのサイトに飛んで確認されるのだが、ここでエラーが発生。

ドメインの TXT レコードで確認トークンが見つかりませんでした。DNS の変更が反映されるまでに時間がかかる場合があります。しばらく時間をおいてから、Search Console でプロパティを再度開いてください。確認に再度失敗した場合は、別の DNS TXT レコードを追加してみてください。

と言うエラーが発生した。

こちらの解決策としては、Astroのほうに直接Google Search Consoleを認証するコードを書くこと。
Astro Paperだと、astro-paper.cofing.tsにこのように書く。

astro-paper.config.ts
export default defineAstroPaperConfig({
  site: {
    url: "https://abc.com/",
    title: "blog-name",
    description: "description",
    author: "author",
    lang: "ja",
    timezone: "Asia/Tokyo",
    dir: "ltr",
    googleVerification: "your googleVerification" //ここに認証するコードを書く
  },

認証コードは一度小有権の確認をCloudflareのサイトでやっているなら、以下のようにして見つけられる。

  1. Cloudflareのダッシューボードのクイック検索から「DNS」→「レコード」を検索する。
  2. 「DNSレコードを検索」で「google」と入力
  3. コンテンツが"google-site-verification=..."のものを探し、認証コードの部分を上のファイルに書く

Google Analyticsを設定

Google Analyticsの設定は以下のサイトを見ながら行った。

AstroでGoogle Analyticsを設定する方法はいくつかあるらしいが、こちらのサイトを参考にさせていただいた。

partytownというサードパーティ製のスクリプトを遅延ロードするライブラリを使用する。

1. partytownのインストール

npx astro add partytown

このコマンドを実行すると、astro.config.tsをあわせて修正するか訊かれるので、Yesで実行する。

2. レイアウトのファイルの<head>に記述

src/layouts/Layout.astroの<head>の中に以下のように追記する。測定IDの部分を変更する。

html file="src/layouts/Layout.astro"
<head>
  <script
    is:inline
    type="text/partytown"
    async
    src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>
  <script is:inline type="text/partytown">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());
    gtag("config", "測定ID");
  </script>
</head>

まとめ

先人が作ってくださったライブラリやサービスを利用して、初期費用0円でブログを開設することができた。

Astroに関する日本語の情報はそれなりにあるものの、ReactやVueといった有名どころに比べると少ないため、今回の記事が誰かの役に立てればうれしい。

特に、カスタムドメインの設定とGoogle Search Consoleの設定の部分ですこし時間がかかった。

今後もブログ自体はより使いやすく、見やすくなるように随時見直していきたい。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?