Cloudflare Pages × GitHubで作る、Astroベースのウェブページ

開発記録・創作物をまとめるパーソナルな拠点として

このウェブサイトは、ブログがメインではありません。日々の開発で得られた知見や、これまで作ってきたプロジェクト・創作物をストックするためのポートフォリオ兼開発記録としてスタートしました。

プロジェクトをしっかりと魅せるためのデザイン性にはこだわりつつ、裏側の管理やデプロイの手間は極力ゼロにするために、今回は Astro × GitHub × Cloudflare Pages というモダンなスタックを採用してこの場所を構築しました。

GitHub × Cloudflare Pagesの完全自動化フロー

日々の開発日記やプロジェクトの追加フローは、驚くほどシンプルです。

1. ローカルでMarkdownとして記録を書く
2. GitHubリポジトリにプッシュするだけ。

これだけでCloudflare Pagesが更新を検知し、自動的にビルドを走らせ数分後には最新のコンテンツが公開されます。サーバーにファイルを手動でアップロードしたり、ビルドコマンドを叩いたりする必要はありません。CI/CDの恩恵を最大限に受けることで、「作る・記録する」という本質的な活動に集中できます。

Cloudflare Registrarによるドメインの統合管理

この構成のもう一つの大きなメリットが、Cloudflareエコシステムによる統合管理です。

本サイトのドメインは、Cloudflare Registrarで取得・管理しています。これにより、以下のような恩恵があります。

• ホスティングとドメインの一元化: Cloudflare Pagesでのホスティング設定とカスタムドメインの設定が、すべて一つのCloudflareダッシュボード内で完結します。
• 強力なCDNとセキュリティ: DNS設定も自動的にCloudflareのエッジネットワークに乗り、高速なCDNと強固なセキュリティ設定がデフォルトで適用されます。
• 管理コストの低減: 複数のサービスを行ったり来たりする煩わしさがなく、ポートフォリオの運用コストを最小限に抑えられます。

Astro：マークダウンからリッチなUIを生成

ウェブサイトのフレームワークには Astro を採用しています。Astroは、プロジェクトの紹介や開発記録などを柔軟に構成するのに非常に適しています。

1. Markdownでサクサク記録できる: 開発日記やプロジェクトの概要はシンプルなMarkdownで執筆し、フロントマターでタグなどを簡単に管理できます。
2. 凝ったUI・デザインを適用可能: ただのテキストベースのページで終わらせず、Astroのコンポーネントシステムを使って、研究成果を魅力的に見せるリッチでインタラクティブなUIを自在に構築できます。
3. 圧倒的な表示速度: デフォルトでJavaScriptを出力しない（Zero JSアーキテクチャ）ため、ページの読み込みが爆速で、訪問者にストレスを与えません。

このサイトのデザインルール

• フォント : Google Sans Flex, Zen Kaku Gothic New
• カラーテーマ (ライトテーマ)
  • 文字色 : #111117
  • 背景色 : #f2f2f3
  • キーカラー : #8a0bd4
• カラーテーマ (ダークテーマ)
  • 文字色 : #f2f2f3
  • 背景色 : #111117
  • キーカラー : #b151ff

まとめ

凝ったデザインを作り、AstroによりMarkdownで手軽に開発記録を残し、GitHubにプッシュして、Cloudflareでドメインもホスティングも自動化・統合管理する

このフローは、開発や創作活動の記録を残していくための拠点として、最もパワフルかつストレスフリーな構成だと感じています。今後はこの場所をプロジェクト紹介場所 & 開発日記とします。

投稿予定

記事が完成次第以下を投稿します。

• 現在無し