今回はAstroとCloudflareを使用して、無料でブログを開設する方法について解説していきます。
ブログの立ち上げ自体は簡単なものの、レイアウトを作るのが結構難しいため、プログラムをやってみたい人向けです。
今回はブログの公開まで紹介します。

※メリット・デメリットについてはGeminiに聞いてみたものなので、間違っているかもしれません。

Astroでブログを構築するメリット

圧倒的な表示速度

デフォルトでJavaScriptを一切出力しない（静的HTMLを出力する）ため、サイトの読み込みが非常に高速です。

SEOとUXに有利

表示が速いため、Googleの検索順位（SEO）やユーザー体験において高い評価を得やすくなります。

Markdown標準対応

記事をMarkdown（またはMDX）で直感的に書くための機能が最初から備わっています。

好きなUIフレームワークが使える

必要に応じて、React、Vue、Svelteなどを部分的に組み込む（アイランドアーキテクチャ）ことができます。

Astroでブログを構築するデメリット

複雑な動的機能には不向き

コメント機能やユーザー認証、リアルタイムのデータ更新など、JavaScriptを多用する複雑なWebアプリ化には、Next.jsなどの方が向いています。

学習コスト

既存のブログサービス（WordPressなど）に比べると、エンジニア向けの技術であるため、HTML/CSSやプログラミングの知識が必要です。

※以下からブログ管理人が書いてます

なぜAstroを選んだのか

WordPressにトラウマがあるから

以前WordPressでブログを書いていたことがあったが、うっかり手違いで消してしまったという経歴があります。
あとはセキュリティとかプラグインとか、いろいろ考慮しないといけないことが多くて難しい！
設定画面にインターネットからアクセスできたり、プラグインの脆弱性で乗っ取られたり、テーマの選択でどれがいいか迷ったり、、
あとはレイアウトを変えたいなとおもっても、WordPressの仕様がよくわからん！で、ブログレイアウトが初期値のままだったりと、、、
初心者でも追い込めばレイアウトをきれいにできると思うのですが、自分の場合はCSSなりHTMLなりで書いたほうが早いのでは？と思っていました。

わりとモダン？らしく、面白そうだったから

これは完全な主観ですが、WordPress以外でなにかいいフレームワークないかなとGemini君に聞いてみたら、Astroがおすすめだよ！ といわれたので、そのまま導入してみました。
ブログ記事自体はマークダウンで記入でき、プラスαで自分で作成したマークダウン記号も使える（正確にはMDXで、独自関数作れる＆JavaScriptつかえるイメージ）ということで、ブログ自体書くのが楽になるかなと思いました。
最悪HTMLをガリガリ書くか、マークダウンで書いたものをHTMLに変換するかとかおもっていたけど、使ったことのない技術のほうが面白いよね、というだけで、Astroを選びました。
ReactやNext.jsなどのガチなWebサイトにでもしてみようかとも思ったのですが、ちょっとめんどくさそうなのとやったことがないことだらけなので、時間がかかりそうだったのでやめました。
そのうちに簡易的なサイトでも作ってみたいなとは思ってます（さて、いつになることやら、、、、）。
ログイン機能をもたせるのは難しそうなので、本当にHTMLでブログを作るみたいなイメージで、表示専用サイトとしては比較的簡単に導入できると思います。
個人的にはコメント機能ほしいんだけどな、、、どうにかしようぞ。。。

Astroを導入してみた感想

やっぱりよくわからん

自分はGeminiに都度聞きながら導入していきました。
正直、自分一人だけだったら厳しかったかもしれない、、、そんな感じです。

上記のように、公式サイトあり　かつ　日本語！で記載されているため、これを読んでからのほうが理解が深まると思います。

マークダウンだと完成形がわかりにくい

WordPressだと記事を表示する状態のまま書いていくことができますが、マークダウン形式だと完成形がわかりにくいかなと感じました。
特に、表を多用する場合はとくにわかりにくくなるかなと思いますが、H1やH2タグなどのシンプルなものは、何かしらのエディタで書いていれば勝手に色分けしてくれるので、そこまでは苦ではないかなと思います。
これは慣れですね。

画像の挿入が一番めんどくさい

これが一番困った問題で、画像を挿入する場合、画像のパスを貼る必要があり、これの管理をどうするかなと、、、
一つのフォルダに画像をまとめると、ファイル名の被りが発生したり、以前使った画像をつかいたいけどどれだっけ、、、になりそうでこわい
今は画像フォルダと記事フォルダ2つ運用ですが、ちょっと考えます。
多分ですが、一つの記事に一つのフォルダにするのが管理が一番楽になるかな？

あとは画像を貼るうえで一番気をつけないと行けないのが、GPS情報です。
スマホで撮影したものだと、GPSを切っていない限りはGPS情報が付与されてしまうので気をつけましょう。

Astroの導入方法

さて、ここまで長かったですが、これから導入方法について解説していきます。
私が使用している端末がMacbookなので、Macでの導入方法になります。
Windowsではおそらく使えないとおもうので、きをつけてください。
（余力があれば、Windows環境での構築も書きたいと思います。）

準備するもの

• Mac
  今回の解説はMac専用なので、Macが必須です。
• Homebrew
  Homebrewというのは、ざっくりいうと「macOS（およびLinux）向けのパッケージマネージャー」のことです。
  ターミナルを使って、アプリのインストール・管理ができる、そんなイメージです。
  （自分もその程度の知識しかない、、、、）
  Homebrewのインストールは、公式サイトにコマンドがあるため、これをコピーしてターミナルに貼り付けてReturnキー（WindowsだとEnterキー）を押せばインストール可能です。

• Node.js.
  Astroは「Node.js」でうごいているため、インストール必須です。
  また、 偶数バージョン のみサポートしているようです。
  Node.jsがインストールされているかどうか　バージョンについては下記コマンドで確認できます。

node -v

kanta@kantanoMacBook-Pro ~ % node -v
v26.0.0

インストールされていない場合は、下記コマンドで実行可能です。（下記コマンドだと最新のものがインストールされます）

brew install node

• コードエディタ
  ちょこちょととソースを編集するため、コードエディタはあったほうがいいと思います。
  自分はなんとなくですが、VScodeを使っています。

VScodeも下記コマンドでインストール可能です。

brew install --cask visual-studio-code

• 簡単なターミナルの知識
  カレントディレクトリ、ディレクトリの移動のやり方などは知っておいたほうがいいのかなと思います。
  自分もよく知っているわけではないですが、ls、cd、pwdぐらい分かれば、問題ないかと思います。

• githubのアカウント
  今回はGithubでコード管理するため、アカウントを作っておきましょう。

• Cloudflareのアカウント
  サーバーとして、今回はCloudflareを使います。
  GoogleアカウントやAppleアカウント、Githubアカウントでもログインできるため、そこまで大変ではないとおもいます。

まずはローカルにAstroをインストールする

ターミナルを起動する

まずはターミナルを起動しましょう。
ターミナルはmac標準でインストールされているため、特別な対応は不要です。
場所としては、アプリケーションフォルダのユーティリティフォルダ内にあります。
もしくは、キーボードの【command ＋ SPACE】で、検索すると一番早く見つけられますね。

Astroをインストールするフォルダへ移動する

下記内容は、簡単説明のため、不要の方は飛ばしてください。
今回の例では、「/Users/[ユーザー名]/Documents/astro/template」にしていますが、どこでも構いません。

簡単なターミナルの説明

起動すると上記のような画面が出てきます。
まずは、いま自分が今どこにいるのかを下記コマンドを入力して、確認してみましょう。

pwd

おそらく「/Users/[ログインしているユーザ名]」と表示されていると思います。
「pwd」は、カレントディレクトリを表示するコマンドで、イメージとしては、いまどのフォルダを開いているかを確認できます。

では次に下記コマンドを実行してみましょう。

ls

今度はカレントディレクトリにどんなフォルダ・ファイルが存在するかを表示するコマンドです。
Finderでカレントディレクトリのところをひらくと、コマンドで表示されているフォルダ・ファイルが存在していることがわかります。
（あまり整理できていないことは内緒です）

さて、今回は書類フォルダ（Documents）の、Astroというフォルダの中に新しいフォルダを作成して、その中にインストールしたいと思います。
フォルダを移動するには、【cd フォルダパス】という内容のコマンドを入力するだけです。
ためしに、cd Documents と入力してReturnキーを押すと、、、、
上記の画像のようになるかと思います。
あとはlsで移動したい先を探し、cdで移動するを繰り返すことで目的の場所へたどり着けます。

上記のように、目的のフォルダまで移動します。
これで、インストールまでの準備は完了です。

Astroプロジェクトを作成する

ターミナルで下記コマンドを実行してください。

npm create astro@latest

あとは色々質問を聞かれます。
①Where should we create your new project?
　（どこに新規プロジェクトを作成しますか？）
→今回は「template」フォルダに作成します。（自由に設定してください）

②How would you like to start your new project?
（どのテンプレートで始めますか？）
→Use blog templateを選択します。（上下のキーで移動して、Return）

③Install dependencies?
　（必要なパッケージをインストールしますか？）
→Yes

④Do you plan to write TypeScript?
　（TypeScriptを使いますか？）
→これはなんとなくYesを選択しました

⑤Initialize a new git repository?
　（Gitを使いますか？）
→Yes

上記選択をし、しばらく立つと、下記のような画像になるとおもいます。
問題なければ、インストール完了です。

あとは、①で入力したフォルダへ移動し、下記コマンドを入力することで、ローカルへのインストールは完了し、動作確認できます。

npm run dev

__ 矢印のところにURLが表示されているため、これをコピーし、ブラウザへ貼り付けると、画面が表示できると思います。

MDX対応する

「マークダウンの中でHTMLの部品（コンポーネント）を使う機能」である MDX は、Astroの標準機能ですが、使う前に有効化するコマンドを1つ打つ必要があります。

npx astro add mdx

これでローカル環境への設定は完了です。

GitHubの設定

githubのマイページに行き、「＋」アイコン ＞ 「New repository」 をクリックします。

①Repository name に、好きな名前（例：astro-blog など）を入力します。
②Public（公開） か Private（非公開） を選びます。（最初はPrivateでも大丈夫です）。
　→今回はブログテンプレート公開用のため、Publicにしています。
③右下の緑のボタン 「Create repository」 をクリックします。
作成すると、画面にいくつかコマンド（echo ”# astro-blog” >> README.md など）が表示されたページになります。
この画面は後で使うのでそのまま開いておいてください。

GitHubへプッシュ（アップロード）

今度はターミナルに戻り、下記コマンド２つ入力します。

git add .
git commit -m "最初のコミット"

“最初のコミット”はコミットメッセージのため、なんでも構いません。 「…or push an existing repository from the command line」と書いてあるコマンド（画像だと一番した）の３行をコピーしてターミナルで実行します。
これでエラーにならなければ、プッシュ（アップロード）完了です！

Cloudflareの設定

cloudflareにアクセスをし、ログインをします。
左側メニュの「Compute」をクリックし、「Workers & Pages」をクリックします。

右上の「Create application」をクリックします。

下の「Get started」をクリックします。

上の「Get started」をクリックします。

Githubアカウント連携後、今回追加したリポジトリ名をクリックし、Begin setupをクリックします。

プロジェクト名: 好きな名前（これがURLの一部になります）
プロダクションブランチ: main
フレームワーク プリセット: ここをクリックして、リストの中から 「Astro」 を選んでください。
（選ぶと下の2項目が自動で入力されます）
ビルドコマンド: npm run build
ビルド出力ディレクトリ: dist

無事選択できたら、Save and Deployをクリックします。
そうするとデプロイが始まります。

デプロイが完了すると、上の画像の通りに、URLが発行されるため、クリックすると、先程ローカルで作成したブログがインターネットに公開されているはずです。
これでブログの公開まで終わりました！
お疲れ様でした。

記事の更新方法

ざっくり手順でいうと、

①リモートリポジトリ（Github）からpull（念のため）
②記事の追加
③リモートリポジトリ（Github）へcommit＆push

これでサーバー側で自動的にデプロイして公開してくれます。

Gitのツールプレゼント

せっかくなので、今自分が使用しているツールをプレゼントしようと思います。
一応動作確認ができていますが、自己責任でお願いします （ウイルスはないですが、変な動きになった・データが消えた etc…）

ツールを使えるようにするまで

①上からZipファイルをダウンロードして解答
②フォルダを配置する
　（場所としては、srcやpublicなどのフォルダがあるところを想定しています。フォルダ名は何でもOK）
③権限付与（３つとも必須）

chmod +x [コマンドファイル]

ファイルを置く場所↓

ツールの解説

いずれもFinderのダブルクリックで実行できるようになっています。

記事を書く前に「pull.command」で最新の資産を取得する。
記事をある程度書いたら「run_local.command」でローカルサーバーを立ち上げ、レイアウトを確認する。
記事が書き終わったら「publish_article.command」でGithubへ更新をする

こんな感じで、簡単にできるようにしてみたので、ぜひ使ってみてください。