Astro+GitHub+Cloudflare Pagesで無料ブログを作る
// CONTENTS
ブログ運営にはドメイン費、サーバー代がかかると思われがちだ。実際、独自ドメインを使うなら年間数千円ほど必要になる。ただ、サーバー代についてはCloudflare Pagesを使えば無料で運営できる。Astroでブログ構築し、Gitでバージョン管理し、Cloudflare pagesで公開すれば、お金をかけずにブログ運営できる道がある。
僕はエンジニアでもプログラマでも何でもないけど、この構成なら無料でブログを運営できている。そんな人にでも分かるように手順を残しておこうと思う。ターミナルを使うけど、そこまで難しいものでもない。一度設定すれば毎回やることはほとんど同じなのだ。Astroで構築するとものの1時間もかからず、新しいブログをスタートすることができるので、おすすめだ。
使うサービス
ブログに使うサービスは主に三つ。だいたいどのような機能を果たすものなのか、簡潔に説明するとこうなる。
Astro
ブログやサイトを高速に作れる雛形となるもの。Wordpressの代わりでブログのベースになる。静的サイトとして配信できるため、Wordpressよりも高速になりやすい。編集の柔軟性が高い。Astroのブログテンプレートを入れておくと、簡単にブログを始められる。 Astroのサイトからテンプレートのデザインも無料でダウンロードできるので、好きなデザインを選べる。ただ、独自にデザインを作りたい人はAIと相談して、デザインを組んでいくことも可能。
基本的にマークダウンの記述方式で記事を書いていくことになる。マークダウンは、見出しに#をつけたり、リストに- を付けたりするだけなので、そこまで取っ付きにくいものでもない。
GitHub
ブログ記事も含めて、ブログ内の全データを記録し、履歴として管理できるツール。GitHubというサイトでデータをいつ更新したか確認できる。そのGitHubで使われている履歴を管理するツールをGitと言う。Gitで管理するためにはコマンド操作が必要になるけど、一度覚えると毎度同じ操作なので慣れると習慣になると思う。
ただ、記事を書いていくだけならGitは無くてもAstroとCloudflare Pagesで運用できるけど、PCが急に壊れたり、何かデータが急に壊れたりした場合、クラウドにデータを置いておけるGitがあると、安心だし便利。それに後述のCloudflare Pagesとの連携で更に利点が多い。そのため、この運用方法ではGitを使う。
Cloudflare Pages
作ったサイトをインターネット上に公開・配信するためのホスティングサービス。いわば、インターネット上にある土地を提供してくれる。ローカル環境（PC内）で作ったブログを世界中から見られるようにしてくれる。GitHubとの連携、記事を更新してGitHubへプッシュするだけで、自動的にサイトも更新される。
手順
手順としては大まかに分けるとこうなる。
- Astroでブログフォルダを作る
- その作ったフォルダをGitに連携する
- Cloudflare PagesとGitを連携する（=ブログを公開する）
①フォルダを作る
まず、ブログを作りたい場所までターミナル内で移動する。ターミナルを開いて、cdと入力し、作る場所になるフォルダをターミナルへドラッグドロップする。 このコマンドをターミナルで打つだけでブログの初期設定がフォルダごと、ここにインストールされる。カッコ内は作成するブログのタイトルやドメインになる部分を入れておいたら良いと思う。でもこのコマンドだと、色々とあとで質問されて面倒である。
npm create astro@latest （作成するフォルダ名がここに入る）そのため、一気にブログテンプレートやGitの初期設定を行なってすべてセットで作れるこっちのコマンドを使っている。
npm create astro@latest （作成するフォルダ名がここに入る） -- --template blog --install --git --no--template blog Astroでブログのテンプレートを入れる
--install 作成後に自動で全てインストール
--git フォルダをGitの管理下にできる（git initと同じ）
--no 質問はいらない（これがないとTailwindは入れる？とか聞いてくる）
ローカル環境でそのブログがきちんと表示されるかチェック。https://localhostから始まるURLで見られる。URLはこのコマンドを走らせると書いてくれてる。
npm run devスマホでもチェックしたい場合はこちら。PCと同じWi-Fiを使っていれば、このコマンドを走らせるとIPアドレス込みのURLが表示されるので、それをスマホのブラウザで打ち込むだけ。
npm run dev -- --host②Gitに連携させる
GitHubにアカウントを作る。右上にあるサインアップを選択。
アカウントを作ると、管理画面の左サイドメニューにTop repositoriesと「New」がある。「New」を押すと、この画面が現れる。
Repository nameにブログタイトルを入れて、Choose visibilityをPublicからPrivateにし、Create repositoryをクリックする。Publicのままだと、データが全世界に公開されてしまう。サービスだとそれでもいい場合もあるけれど、ブログの場合は基本Privateで運用することが殆どだと思う。
ターミナルに戻り、ブログがある場所まで移動する。
cd （ドラッグドロップでフォルダをターミナルに移動）このコマンドを1行ずつ打ち込む。
git init
git add .
git commit -m "Initial commit"こうして、最初のコミットを作成する。 そのあと、リポジトリとローカルを繋げる。
git remote add origin https://github.com/（Gitのユーザー名がここに入る）/（リポジトリ名がここに入る）.gitこのコマンドを最後に1行ずつ打てば、完成。
git branch -M main
git push -u origin mainもうこれは初期コミットの呪文のようなもの。
③Cloudflare PagesでGitを連携する
Cloudflare Pagesにアカウントを作る。同じく右上にある「サインアップ」を選択。
アカウントを作ると、管理画面の左サイドメニューに Workers & Pagesというページがあるのでクリックし、「アプリケーションを作成する」からこの画面に行ける。
画面下の「Pagesを導入しようとお考えですか? 始める」からPagesを選択する。僕はこのPagesへのリンクがなかなか見つからなくて、このページに来る度にどこだっけと探しまくっている。進んでいるページがWorkersになってないか再度確認しよう。
すると、どんなふうにCloudflareと連携するか選択する画面が現れる。既存の Git リポジトリをインポートするの「始める」をクリック。すると、Gitのリポジトリを選択する画面に行ける。Gitの方で何の設定もしていない場合は、こんなふうに表示されると思う。GitHub側で Cloudflare Pagesに対して、そのリポジトリへのアクセス権限を与えていないことが原因。
これを連携させるために、Gitで右上のユーザーアイコンからApplicationsに進み、Installed GitHub AppsというタブでCloudflare Workers and Pagesの「Configure」を選択。
そうすると、下の方にアクセスできるリポリジトリの範囲を選択できる項目がある。僕の場合はもう作るたびにアクセスを許可するのは面倒なので、全てのリポジトリを許可している。
連携にしたところで今回のようにPagesの設定をしなければ勝手にWeb公開されることもない。でも心配な人は、選択したリポジトリのみにする方が良いと思う。
そうして、Pagesの方で進むと、ビルドとデプロイのセットアップという項目に行き着く。ここで用語を簡潔に説明すると、ビルドというのは今のAstroで作ったプロジェクトをHTMLやCSS、Javascriptなどの静的なページに変換する処理のこと。デプロイというのはビルドで生成したものをCloudflareのサーバーへアップロードする処理のこと。Web公開ってことだね。
公開URLはhttps://〇〇.pages.dev/になる。このドメイン名を決めたら、ビルドの設定。フレームワークプリセットでAstroを選択しよう。
そうすると自動で、ビルドコマンドやビルド出力ディレクトリが決定される。「保存してデプロイ」へ。数分待てば、https://〇〇.pages.dev/でアップしたものが見られるようになる。
記事の更新はどうする
どうやって今後新しい記事を書いたときにWebにアップロードしていけば良いのかだけど、Cloudflareにデプロイするためには連携したGitでプッシュするという作業が毎度必要になる。プッシュとは何だろうという感じであるが、簡単に言えばGitに記録を残すってことだね。記事更新の流れはこんな流れになる。
- マークダウンで記事を書く
- Git管理下にファイルを追加する
- Gitでコミット&プッシュする（自動デプロイ）
Visual Studio Codeというコード編集に向いたアプリがあるので、僕の場合はそれでブログフォルダを開いて管理している。そこからターミナルを開いて、コマンド操作で毎回Gitプッシュしている。 まず、追加&修正したファイルをGitに追加する 。
git add . そこでどのファイルがステージされている（Gitの追加候補になっている）か確認。
git statusこれで表示されたファイルに問題なければコミットする。コミットはGitに記録するってこと。
git commit -m “コミット内容”コミット内容だけど、この記事を書いた、この記事を修正した、など未来の自分が分かる形なら何でもOK。 そしてそれをプッシュする。コミットだけでは完全な記録として管理されなくて、プッシュをして初めて、Cloudflareにデプロイされる。もとい、Webサイトにアップされる。
git pushコミットした内容はGitHubでも編集履歴が全て見られるので、逐一チェックしても良いかも。GitHubのリポジトリのページでデータをいつ更新したか確認できる。Visual Stadio Coddの方でもプラグインを追加すれば見られる。
これさえ覚えておけばOK
- AstroとGit、Cloudflare Pagesがどんなサービスなのか頭に入れておく
- Gitで管理するコマンドも頭に入れておく（毎回同じ）
まとめ
ブログは今でも日本ではWordpressが主流だけども、Astroも良い選択肢であることを足早にだけどまとめてみた。この三つのサービスの連携で無料でブログ運営ができるのは財布に優しい。もしドメインを取ったとしても、年間2000円もかからず運用できるため、収益化の難しい趣味ブログなんかにもいいかもしれない。