Forestlight
Development │ このサイトの仕組み
← [BACK_TO_INDEX]
[FL-LOG-2026-001] │ REF::DEV │ REV.A ■ PUBLISHED
Development │ │ 4 min

このサイトの仕組み

このサイトの仕組み

当サイト（FORESTLIGHT BLOG）がどのように構築・運用されているかを解説しています。

ワークフロー概要

flowchart LR
    A[📝 Markdown] --> B[🚀 Astro]
    B --> C[🐙 GitHub]
    C --> D[▲ Vercel]
    D --> E[🌐 公開]
  1. Markdownでコンテンツを執筆
  2. Astroが静的HTMLに変換
  3. GitHubにプッシュ
  4. Vercelが自動でビルド＆デプロイ

このワークフローを採用することで、記事を書いてプッシュするだけで数十秒後にはサイトが更新されるようになっています。

各ステップの詳細

Markdownで執筆する

記事は全てMarkdownファイルで管理しています。ファイルの先頭にはYAMLフロントマターでメタデータを定義し、その下に本文を記述する形式です。

---
title: "記事タイトル"
description: "記事の説明文"
pubDate: 2026-01-01
category: "Development"
tags: ["Astro", "TypeScript"]
status: "PUBLISHED"
---

# 見出し

本文をここに書きます。

こうすることで、タイトル・日付・カテゴリなどのメタデータと本文を一つのファイルで管理できています。

image

また、専用のElectronエディタを自作しており、リアルタイムプレビューを見ながらの編集、画像のドラッグ＆ドロップアップロード、OGPメタデータの自動取得などが可能になっています。

Astroで静的変換する

AstroはContent Collectionsという機能を提供しており、Markdownファイルを型安全に管理できます。各記事は以下のようにルーティングされています。

src/content/blog/
  ├── article-1.md  ->  /blog/article-1/
  ├── article-2.md  ->  /blog/article-2/
  └── ...

ビルド時に全ページが事前生成（Static Site Generation）されるため、リクエスト時のサーバーサイド処理が不要です。こうすることで、表示速度の向上とサーバー負荷の軽減を実現しています。

カスタムプラグイン

標準のMarkdown記法を拡張するため、以下のプラグインを実装しています。

プラグイン機能
remark-ogp-cardURLからOGPカードを自動生成
remark-media-embedYouTube/Vimeo動画の埋め込み
rehype-image-size画像・動画・音声のサイズ制御

これらはremarkとrehypeのAST（抽象構文木）を操作するプラグインとして実装しています。こうすることで、Markdownの変換パイプラインに独自の処理を挿入できています。

GitHubにプッシュする

標準的なGitワークフローを採用しています。

git add .
git commit -m "Add new article"
git push origin master

リポジトリはGitHubでホスティングしており、全ての変更履歴がバージョン管理されています。こうすることで、記事の変更履歴の追跡や、問題発生時のロールバックが容易になっています。

Vercelで自動デプロイする

VercelはGitHubリポジトリと連携しており、masterブランチへのプッシュを検知すると以下の処理を自動実行します。

  1. クローン: リポジトリの最新コードを取得
  2. 依存関係インストール: npm install の実行
  3. ビルド: npm run build でAstroビルドを実行
  4. デプロイ: 生成された静的ファイルをグローバルCDNに配信
flowchart LR
    A[GitHub Push] --> B[Vercel Webhook]
    B --> C[Build]
    C --> D[CDN Deploy]
    B -.->|自動トリガー| B
    C -.->|約30-60秒| C

ビルドに失敗した場合は通知が送信され、前のバージョンがそのまま公開され続けます。こうすることで、デプロイ事故によるダウンタイムを防いでいます。

技術スタック

コアテクノロジー

役割技術バージョン
フレームワークAstro5.1.1
言語TypeScript5.7.2
スタイルTailwind CSS4.0.0
ビルドツールVite(Astro内蔵)
ホスティングVercel-
バージョン管理Git / GitHub-

コンテンツ処理

Markdownの処理には以下のパッケージを使用しています。

  • remark-directive: カスタムディレクティブ構文のパース
  • unist-util-visit: ASTのトラバーサルユーティリティ
  • Shiki: シンタックスハイライト
  • astro-expressive-code: コードブロックの拡張表示

デスクトップエディタ

ローカル編集用のデスクトップアプリケーションをElectronで構築しています。

  • Electron 33.0.0: クロスプラットフォームデスクトップアプリ
  • Sharp 0.34.5: 画像処理・WebP変換

なぜこの構成を選んだか

Markdownの利点

Markdownを採用することで、以下のメリットを得ています。

  • シンプル: 複雑なCMSのUIを操作する必要がない
  • ポータブル: どのエディタでも編集可能
  • バージョン管理: Gitで差分管理ができる
  • データベース不要: ファイルベースで完結

静的サイトの利点

Static Site Generationを採用することで、以下のメリットを得ています。

  • 高速表示: HTMLが事前生成されているため即座に配信可能
  • スケーラビリティ: CDNからの配信でアクセス集中に強い
  • セキュリティ: サーバーサイドの動的処理がないため攻撃面が少ない
  • 低コスト: Vercelの無料枠で十分に運用可能

自動デプロイの利点

CI/CDパイプラインを構築することで、以下のメリットを得ています。

  • ヒューマンエラー防止: 手動デプロイ作業が不要
  • 一貫性: 誰がプッシュしても同じ手順で公開される
  • 高速なイテレーション: 変更が即座に反映される

このワークフローの本質は「Markdownを書いてプッシュするだけ」というシンプルさにあります。こうすることで、インフラやデプロイのことを考えずにコンテンツ制作に集中できる環境を実現しています。

EOF │ FL-LOG-2026-001 │ 01/01/2026 11:24 UTC