ShingoLab - Projects

個人のポートフォリオとブログを兼ね備えた静的サイトです。技術ブログ、制作物の紹介、プロフィールを一箇所にまとめています。

なぜ作ったか

前身は WordPress で運用していたサイトです。ログイン画面の防御（試行回数制限・CAPTCHA・管理 URL の変更）を積み増していくうちに、個人サイトに動的な管理画面は要らない、攻撃面そのものをなくしてしまえばいい、と気づいて静的サイトへ書き直したのが現在の ShingoLab です。

自分が学んだことや作ったものを記録・公開する場所も欲しかったため、ポートフォリオとブログを一つのサイトに集約する構成にしました。既存のブログサービスではなく自分でサイトを構築することで、Web 開発の実践的な学びにもなると考えました。

なお、サイト自体は公開していますが、ソースコードのリポジトリは現在非公開です。コードや構成を整理した上で公開予定です。

技術的なポイント

JavaScript を最小限にする構成

ページはすべて静的 HTML として配信しています。モバイルメニューやテーマ切替のように動きが必要なところだけ、Astro コンポーネントに書いた小さなスクリプトで動かしています。UI フレームワークは使っていないので、配信する JavaScript はごくわずかです。

テーマ切替（ライト / ダーク / システム）

ライト・ダーク・システム連動の3モード切替に対応しています。<head> 内のインラインスクリプトでテーマを事前適用するため、ページ読み込み時のチラつき（FOUC）が発生しません。選んだモードは保存され、ページを移動しても引き継がれます。

コンテンツ管理

ブログ記事は Markdown で記述し、Astro の Content Collections で型安全に管理しています。記事の執筆・下書きは Obsidian で行い、完成した記事をリポジトリに反映する運用です。

レスポンシブデザイン

モバイルファーストで設計しています。小さい画面ではハンバーガーメニュー、デスクトップでは通常のナビゲーションバーが表示されます。

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.yaml  # pnpm workspace の設定

pnpm workspace による monorepo 構成で、アプリ本体と E2E テストを分離しつつ、共通設定をルートで一元管理しています。

使用ライブラリ

ライブラリ	用途
Astro 7	フレームワーク・静的サイト生成
Tailwind CSS v4	ユーティリティファーストのスタイリング
Markdown	ブログ記事の記述形式
Playwright	E2E テスト
Biome	リント・フォーマット
Docker	開発環境・ビルド・デプロイ

コンポーネント

コンポーネント	説明
共通ヘッド	SEO・OGP・JSON-LD・テーマ初期化などページ共通の `<head>` を管理
テーマ切替	ライト / ダーク / システムの3モード切替ボタン
モバイルメニュー	ハンバーガーメニュー
記事カード	ブログ記事カード（サムネイル・カテゴリ・日付・タグ）
カテゴリバッジ	記事のカテゴリをバッジで表示
目次	スクロール連動する目次（記事詳細ページ）
コードコピー	コードブロックのコピーボタン
フッター	プライバシーポリシー・ライセンスリンク・著作権表記
アナリティクス	Google Analytics 埋め込み