今回は未経験エンジニアの私が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形式に変更しました
自己紹介記事の作成
こちらの自己紹介記事を作成しました
予約投稿機能に苦戦
はじめ、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へのデプロイ
こちらの記事を参考にデプロイしました
結果
完成したブログ:
AstroPaperテーマのカスタマイズに成功
GitHubとCloudflareの連携による継続的デプロイの実現
気づき
技術的学び
- Astroってすごい
- Cloudflareもすごい
コスト面の考察
- 無料プランでも十分な機能が揃っている
- ドメイン費用（年間約1,500円）のみで運用可能
安い！！
おわりに
AstroとCloudflareがとにかく凄いなと思いました
このブログを通じて、フロントエンドからインフラまでの幅広い技術に触れながら、学びを共有していきたいと思います
同じように技術ブログを始めたいと考えている方の参考になれば幸いです