AstroとCloudflareでブログを独自ドメインで作成した話

環境

OS: macOS M1 Macbook Air
Node.js: v18.20.4
npm: 10.8.2
Astro: 5.6

目的

独自ドメインで技術記事を作成する
AstroとCloudflareで高速な静的サイト作成の手法を学ぶ

具体的な手順

1. Astroプロジェクトの初期設定

私はこちらのAstroPaperテーマのUIに強く惹かれたため、こちらを元に作成しました

npm create astro@latest -- --template satnaing/astro-paper

2. ブログのカスタマイズ

日本語化と不要な機能の削除

私はアーカイブ機能やテレグラムへの共有機能は削除しました

テレグラム怖いイメージあります

記事の日付表示形式の変更

デフォルトの日付形式もクールでしたが、わかりづらかったので
見慣れているYYYY-MM-dd形式に変更しました

自己紹介記事の作成

こちらの自己紹介記事を作成しました

25卒未経験からエンジニアへの第一歩

未経験から25卒でエンジニアとなった筆者の自己紹介と、このブログの目的について

poniblog.com

予約投稿機能に苦戦

はじめ、markdownファイルtopのdraftに悩まされました

draft: false

draftの値に関係なく、ローカルで確認した際は記事が全部表示されていました → デプロイするとdraft: trueの記事が表示されなくなりましたおそらく、ローカルとデプロイ時では参照している時間が違うため、このようになったかと思われます

テーマの色変更

src/styles/global.cssで全体の色を設定することができます
黒にピンクの組み合わせが好きなので以下のように変更しました

:root,
html[data-theme="light"] {
  --background: #ffffff;
  --foreground: #1a1a1a;
  --accent: #007bff;
  --muted: #f4f6f8;
  --border: #e1e4e8;
}

html[data-theme="dark"] {
  --background: #0d1117;
  --foreground: #c9d1d9;
  --accent: #ff69b4;
  --muted: #161b22;
  --border: #30363d;
}

3. Cloudflareへのデプロイ

こちらの記事を参考にデプロイしました

CloudflareでAstroアプリケーションをデプロイする

CloudflareのPagesサービスを使用してAstroで作成したアプリケーションをデプロイする方法を解説

Qiita

結果

完成したブログ: https://poniblog.com/
AstroPaperテーマのカスタマイズに成功
GitHubとCloudflareの連携による継続的デプロイの実現

気づき

技術的学び

Astroってすごい
Cloudflareもすごい

コスト面の考察

無料プランでも十分な機能が揃っている
ドメイン費用（年間約1,500円）のみで運用可能

安い！！

おわりに

AstroとCloudflareがとにかく凄いなと思いました

このブログを通じて、フロントエンドからインフラまでの幅広い技術に触れながら、学びを共有していきたいと思います
同じように技術ブログを始めたいと考えている方の参考になれば幸いです