ブログ開設において、主要なソフトと言えばWordpressが上がるでしょう。
しかし、その構成の場合だと大抵、サーバー代等が別途に必要になります。
サーバーによっては月額数百円と、私のような学生の身として地味手痛い金額です。
そこで、「Cloudflareを使って経費を抑えよう。」となりました。
学生故、説明不足な箇所があるかもしれません。
それを踏まえて楽しみながらやっていただければ幸いです。

今回は環境構築を行い、最初のCloudflareのbuildまで行います。

そもそも何故Astro x Cloudflare?

A.無料かつ爆速だから。

主流のWordPress x レンタルサーバーと比較します。

	WordPress x レンタルサーバー	Astro x Cloudflare
料金	月数百円のサーバー代＋ドメイン代年1200円以上	ドメイン代1200円以上のみ
SEO	普通	超強い（PageSpeed Insightsオール90点越え余裕）
管理	WordPressのダッシュボードで行う	mdxやmdを直書き(CMS連携でダッシュボード化可能)
拡張性	プラグイン連携で高い	非常に高い（が自分で作る必要もある）
セキュリティ	普通	非常に高い（Cloudflareが守ってくれる）
難易度	簡単	難しい（gitやhtmlなどの理解が要る）

Cloudflare x Astroの組み合わせは、実質無料なのにSEOやセキュリティの面で非常に強力です。
ややハードルが高いですが、プログラミングの心得がある初心者には非常におすすめな選択肢となります。
しかし、CMSと連携するまでは ダッシュボード形式で書けないので面倒が多かったりします。
また、バグの対応も自分で行わなければなりません。
安い分、手間もかかるのがデメリットです。

事前準備

用意するもの

• domain
• Cloudflareアカウントの作成
• VSCodeのインストール
• githubの環境構築
• Node.jsのインストール
  「githubの環境構築」に関しては説明すると長くなるので、本記事では省略させていただきます。
  また別の機会に解説する予定です。

ドメインはお持ちの前提で話します。
ドメインがない場合は、Cloudflareで購入することを推奨します。

Cloudflareで購入する際の注意点をまとめたサイトがあるので、参考にしていただければ幸いです。
Cloudflare Registrarでドメイン購入できない？　入力エラーの解決方法

1.VSCodeのインストール

VSCodeとは？

開発者専用のソフトです。基本的にはこのソフトを使って開発を行います。

VSCodeのインストール方法

• VSCodeインストール
  
  〇で囲っているところをクリックしましょう。
  本記事ではwindows11をベースに進めていきますので、Macの場合は右のMacをクリックしましょう。
  インストールしたら、exeファイルを開きます。
  基本的には、下手に選択せず「次へ」を選択してください。
  規約の合意が求められたら合意しましょう。
  「デスクトップ上にアプリを作成する」はショートカットを自動で作ってくれるので、選択しておくといいと思います。
  最終的に、VSCodeが立ち上がったら成功です。

2.Node.jsをインストール

Node.jsとは？

Astroを入れるのに必要なツールと捉えてもらえればOKです。
これを入れないと、Astroを入れる際にエラーを吐きます。

Node.jsのインストール方法

• Node.jsインストール
  
  自身の環境に合わせて選択しましょう。
  windowsの場合は.msiを選択してもらえれば大丈夫です。
  VScodeと同じように、規約に同意しつつ次へで問題ないです。
  インストールしたらタスクバーの検索→コマンドプロンプトを開きましょう。

node -v

これをCopy&Pastして、enter。
バージョンの数値が返ってきたらインストールは成功です。
確認次第コマンドプロンプトは閉じてもらって構いません。

3.Cloudflareのアカウントを作成する

メールアドレスとパスワードを入力して作るだけですので、割愛します。
githubと連携するとスムーズですので、同じアカウントを使うことを推奨します。

開発を始める

Astroを入れる

エクスプローラーから任意の場所に適当なフォルダを作成。
名前は半角英数字、場所は任意です。
VSCodeを起動します。
「ファイル(F)」から「フォルダーを開く」で先ほど作ったフォルダを選択
ターミナルを開いて、下のコードを実行します。

npm create astro@latest

いくつか質問が出てくるので答えましょう。

• Where should we create your new project?
  今開いているフォルダにそのまま作りたい場合は、キーボードの . （ドット）を入力してEnter。新しくフォルダを作りたい場合は、半角英数字でプロジェクト名を入力します。

• How would you like to start your new project?
  ブログを作るので「Use blog template」を選択します。

• Install dependencies? (依存関係のインストール)
  「Yes」を選択。

• Do you plan to write TypeScript?
  特にこだわりがなければ「Recommended（推奨）」を選択。

• Initialize a new git repository? (Gitの初期化)
  「Yes」を選択します。

インストールが終わったら以下のコマンドを入力しましょう

//最初の質問で「.（ドット）」を入れた人は、1行目の `cd` は不要です。
cd ここに作成したプロジェクト名
npm run dev

しばらくしたらターミナルに以下のようなURLが表示されるのでクリック

http://localhost:4321/

Astroのテンプレのサイトが見れるようなったら成功です。
ここでサイトが見れない場合、後のbuildでも必ず失敗するので要チェックです。

リポジトリをリモートのgithubにアップロードします。
VSCodeのソース管理

Branchの発行を押します。

基本的には「private」を選択しましょう。
暫くしたら、githubにアクセスして確認しましょう。
リポジトリがあれば成功です。

Cloudflareと連携してbuild

Cloudflareを開きます。
左上の検索バーから
「pages」
と入力。
「Cloudflare workers&pages」
と出るのでクリック

「create application」
をクリック。
今回は静的サイト(SSG)で作るので一番下の「get started」を選択します。

ウィンドウのサイズによっては見切れてしまうので、見えない場合はウィンドウのサイズを調節してください。

開いたら、「Import an existing Git repository」を選択。
先ほどGitHubにアップロードした自分のリポジトリを選択し、「Begin setup」。

上記のようになったら「Save and Deploy」
buildが始まりますので、待ちましょう。
全て通ったらwebサイトの完成です。

buildが通らない？

確認事項

• クラウドのリポジトリにそもそもプロジェクトが上がっていない。
  githubにアクセスして確認しましょう。リポジトリがない場合は作成しましょう。

• エラーを吐いている。
  この場合、要因が複数絡まっていることが多いです。
  原因の特定が難しいので、調べるかChatgptなどのaiに頼りましょう。

domainと紐づけ

最後はdomainと紐づけましょう。
同じようにCloudflare Workers&Pagesを開き、自分の作ったサイトをクリック
「Custom domain」
という項目を選び、
「Set up a custom domain」

Domainのところに決めたブログのURLを入力しましょう。
フォーマットは下記のとおりです。

サブドメイン名.ドメイン（例:blog.example.com）

continueを押したら確認が入るので、問題がなければ
「active domain」
これで紐づけが終わりました。

うまくいかない場合

Cloudflareにドメインが登録されていないか確認しましょう。
domain>Registrations
から確認ができます。
Cloudflare経由で購入した場合は基本的に自動で登録されますが、それ以外のサイトから購入した場合は登録する必要があるので注意です。

確認する

実際にアクセスしましょう。
ブラウザの検索バーから作ったブログのurlを直付けし、確認します。
サイトが表示されたら完成です。

感想

初めてのブログ挑戦なので、buildが通るまでかなり苦戦しました。
特にCloudflareの頻繁なui変更は大変でした。
ネット記事をあさってaiに頼ってもエラーを吐くことが多かったり…。
しかし乗り越えれば維持費がドメイン代のみで本当に済みます。
挑んでみる価値は大いにあると実感できました。
事前準備の段階でも初心者にはなかなかにハードかと思いますが、めげずに頑張ってください！