RY2X Ry2X.NET
Back to Projects

Ry2X.NET — 個人ホームページ

astro tailwind typescript

Ry2X.NET — 個人ホームページ

このサイト自体のプロジェクトページです。

作ったきっかけ

自分だけのドメインを取得して、自分だけのホームページを持ちたいと思ったのがそもそものきっかけです。

それだけでなく、記事を書いてそれを継続的に管理・運用していくことで、DX（開発者体験）や運用まわりの知見を業務の外でも深めていきたいという気持ちもありました。コードを書くだけではなく、コンテンツを継続して届けていくためのしくみを自分で設計・回していく経験を積みたいと考えています。

また、コンテンツを扱うのにぴったりなフレームワークとして Astro の存在を知り、その思想に共感したことも大きな動機です。Astro が採用するアイランドアーキテクチャは、「必要なものだけを、必要な場所に」という考え方でインタラクティブなコンポーネント（島）だけに JS を送り込み、それ以外は静的な HTML として扱います。これは普段使っている Arch Linux の KISS 原則（Keep It Simple, Stupid — 余計なものを持たず、シンプルに保つ）と同じ思想だと感じ、すぐに気に入りました。

技術スタック

技術用途
Astro静的サイトジェネレーター
Tailwind CSSスタイリング
TypeScript型安全なスクリプト
Markdownコンテンツ管理

こだわりポイント

デザイン

ミニマルで余白を重視したデザインを目指しました。トップページはベントグリッドレイアウトを採用し、ホバーエフェクトや背景のブラーなど細部の質感にもこだわっています。ダークモードにも対応しており、ライト・ダーク両方で気持ちよく見られるよう調整しています。

コンテンツのディレクトリ戦略

記事と画像の管理方法にも工夫しています。よくある構成では画像を public/assets/ にまとめて置きますが、このサイトでは記事と関連画像を同じディレクトリに置く方針を採用しました。

src/content/projects/
  ├─ my-project/
  │  ├─ index.md       ← 記事本文
  │  ├─ thumb.png      ← サムネイル
  │  └─ screenshot.jpg ← スクリーンショット
  └─ simple.md         ← 画像なし記事はファイル単体でもOK

画像をコンテンツと隣に置くことで、「どの画像がどの記事のものか」が一目でわかるようになります。記事を削除・移動するときも画像を一緒に動かせるので管理が楽です。Astro は src/ 配下に置いた画像であればすべて最適化（WebP 変換・リサイズなど）の対象になるため、コンテンツと同居させた画像も当然その恩恵を受けられます。

Astro が得意とするゼロ JS デフォルトの思想を活かし、インタラクティブな処理に必要な最小限のスクリプトのみをブラウザに送るよう設計しています。また、OGP メタタグ・サイトマップ・canonical URL などの SEO 設定を一箇所にまとめ、全ページで一貫して適用されるように整備しました。