RY2X Ry2X.NET
Back to Projects

Ry2X.NET - 思想と技術が交差する個人ホームページ

astro tailwind typescript cloudflare

このサイト自体を紹介するプロジェクトページです。単なる情報の置き場ではなく、自分自身の技術的なスタックと、保守・運用に対する思想を体現する場として構築しました。

構築の背景と動機

自分自身のドメインを持ち、プラットフォームに依存しない「自分の居場所」を作りたいと考えたのが出発点です。

それ以上に、DX（開発者体験）と運用の知見を深めることを大きな目的としています。仕事では Java や TypeScript を中心に開発していますが、個人のプロジェクトでは「いかに効率よく、かつシンプルに仕組みを維持できるか」という課題に対し、独自の設計を試みる実験場としての役割も持たせています。

また、Astro の思想への共感も大きな動機の一つです。Astro が提唱するアイランドアーキテクチャ（必要な箇所のみに JavaScript を適用する手法）は、私が愛用している Arch Linux の KISS 原則（Keep It Simple, Stupid）に通じるものがあり、このサイトの設計指針にもなっています。

技術スタックの選定理由

技術選定理由
Astro v5アイランドアーキテクチャによる高速な静的描画。v5 での Content Layer 等の進化を活用。
Tailwind CSS v4ユーティリティファーストによる迅速なスタイリング。v4 でのパフォーマンス向上と新機能の採用。
Cloudflare Pages高速なエッジネットワークでの配信と、SSG/APIルート（Workers）の統合。
Resend / Turnstileシンプルなメール送信 API と、Cookie に依存しない現代的なスパム対策。

徹底した「運用重視」の設計

1. コンテンツとアセットのコロケーション（共配置）設計

一般的なプロジェクトでは画像ファイルを public/ フォルダにまとめがちですが、本サイトでは記事ファイルと同じディレクトリに関連画像を置く戦略を採用しています。

src/content/projects/
  ├─ personal-homepage/
  │  ├─ index.md       <-- 記事本文
  │  └─ cover.png      <-- この記事専用の画像

この設計により、記事を移動・削除する際に画像が迷子になることを防ぎます。 Astro の画像最適化機能により、src/ 内の画像は自動的に WebP 変換やリサイズが行われるため、管理のしやすさとパフォーマンスが両立されています。

また将来的に、CMS 連携や GUI ベースのコンテンツ管理を検討する際にも、この構造は柔軟に対応できると考えています。

2. サーバーレス・コンタクトフォーム

静的サイトでありながら、Cloudflare Workers (SSR) を活用した動的な問い合わせフォームを実装しています。

  • Turnstile: ユーザーの操作を妨げないスマートな CAPTCHA。

  • Resend API: バックエンドから直接管理者のメールアドレスへ通知を送信。

    • これにより、外部のフォームサービスに依存せず、すべてのロジックをリポジトリ内で完結させています。

実装から４日程度が経過していますが、DNSの設定がまだ浸透していないためか、現時点ではフォームからのメール送信が正常に機能していません。 Resend のDNS認証が完了ステータスにならない状態が続いています。引き続き原因を調査中ですが、DNSの完全な浸透には最大で72時間程度かかることもあるため、もうしばらく様子を見てみます。

3. CI/CD と開発環境

GitHub Actions を用いた自動デプロイを構築しており、main ブランチへのプッシュで即座に Cloudflare Pages へ反映されます。 また、環境構築のコストをゼロにするため、.devcontainer による Docker 開発環境も整備しています。

デザインコンセプト

ミニマルでありながら、触れていて心地よい質感を追求しました。

  • ベントグリッド: トップページには情報の密度を保ちつつ美しく整列させるグリッドレイアウトを採用。

  • ダークモードの標準実装: システム設定の自動検知に加え、手動切り替え時のステート管理を最適化。

  • タイポグラフィ: コンテンツの読みやすさを最優先し、Tailwind Typography による洗練されたスタイルを適用。

今後の展望

このサイトは完成形ではなく、継続的に進化させていく予定です。

  • 検索機能の実装: 記事数が増えた際、ユーザーが目的の情報へ即座に辿り着けるようにする。

  • 多言語対応 (i18n): 海外の開発者とも交流できるよう、英語記事の併記を検討。

  • 記事執筆 UI: GUIから直接 Markdown を編集・プレビューできる管理画面のプロトタイプ構築。

自分自身の技術スタックを磨き、知見を共有するハブとして、この Ry2X.NET を育てていきます。