ShingoLab
個人ポートフォリオ & ブログサイト。Astro 6 + Tailwind CSS v4 で構築。
ShingoLab
個人のポートフォリオとブログを兼ね備えた静的サイトです。技術ブログ、制作物の紹介、プロフィールを一箇所にまとめています。
なぜ作ったか
自分が学んだことや作ったものを記録・公開する場所が欲しかったのがきっかけです。既存のブログサービスではなく自分でサイトを構築することで、Web 開発の実践的な学びにもなると考えました。
技術的なポイント
Astro のアイランドアーキテクチャ
ページの大部分を静的 HTML として配信し、インタラクティブな部分（モバイルメニューなど）だけ React コンポーネントを読み込む構成です。JavaScript の配信量を最小限に抑えつつ、必要な箇所にはリッチな UI を実現しています。
テーマ切替（ライト / ダーク / システム）
ライト・ダーク・システム連動の3モード切替に対応しています。<head> 内のインラインスクリプトでテーマを事前適用するため、ページ読み込み時のチラつき（FOUC）が発生しません。Astro の View Transitions によるページ遷移時も、テーマが途切れなく維持されます。
コンテンツ管理
ブログ記事は MDX で記述し、Astro の Content Collections で型安全に管理しています。記事の執筆・下書きは Obsidian で行い、完成した記事をリポジトリに反映する運用です。
レスポンシブデザイン
モバイルファーストで設計しています。小さい画面ではハンバーガーメニュー（React Island）、デスクトップでは通常のナビゲーションバーが表示されます。
SEO
- OGP メタタグの自動生成
- JSON-LD 構造化データの埋め込み
- サイトマップ・RSS フィードの自動生成
- canonical URL の設定
CI/CD
GitHub Actions で main ブランチへの push をトリガーに、Docker でビルドし SSH 経由で Xserver へ自動デプロイしています。手動でのファイルアップロードは不要です。
開発環境
Docker Compose で開発環境を統一しています。docker compose up だけで開発サーバーが起動し、E2E テストも同じコンテナ内で実行できます。
アーキテクチャ
shingolab/
apps/web/ # Astro アプリ本体
tests/e2e/ # Playwright E2E テスト
package.json # pnpm workspace ルート
turbo.json # Turborepo タスク設定pnpm workspace による monorepo 構成で、アプリ本体と E2E テストを分離しつつ、共通設定をルートで一元管理しています。
使用ライブラリ
| ライブラリ | 用途 |
|---|---|
| Astro 6 | フレームワーク・静的サイト生成 |
| Tailwind CSS v4 | ユーティリティファーストのスタイリング |
| React | インタラクティブコンポーネント（Islands） |
| MDX | ブログ記事の記述形式 |
| Playwright | E2E テスト |
| Turborepo | monorepo のタスク管理 |
| Biome | リント・フォーマット |
| Docker | 開発環境・ビルド・デプロイ |
コンポーネント
| コンポーネント | 説明 |
|---|---|
| 共通ヘッド | SEO・OGP・JSON-LD・テーマ初期化などページ共通の <head> を管理 |
| テーマ切替 | ライト / ダーク / システムの3モード切替ボタン |
| モバイルメニュー | ハンバーガーメニュー（React Island） |
| 記事カード | ブログ記事カード（サムネイル・カテゴリ・日付・タグ） |
| カテゴリバッジ | 記事のカテゴリをバッジで表示 |
| 目次 | スクロール連動する目次（記事詳細ページ） |
| コードコピー | コードブロックのコピーボタン |
| フッター | プライバシーポリシー・ライセンスリンク・著作権表記 |
| アナリティクス | Google Analytics 埋め込み |