クイックスタート (3分で起動)

最終更新日: 2026/09/22 / EpoCanvas 公式アーキテクチャ仕様

このドキュメントサイトを動かす方法は 2 つあり、目的に合わせてどちらかを選べば大丈夫です:

すぐに公開サイトを見たいだけ: 環境は何もインストールする必要がありません。下のワンクリックデプロイのセクションに進み、ボタンを押せば 2 分後には自分の URL が手に入ります。
ドキュメントを書きたい・内容を変えたい: まず事前準備に従ってプロジェクトをローカルで動かし、変更しながら結果を確認します。書き終えたらよく使うコマンドのデプロイコマンドで公開します。

ワンクリックデプロイ：ボタン1つで公開

下のボタンは Cloudflare、Vercel、Netlify 3 社の公式「デプロイボタン」です。クリックすると各プラットフォームのデプロイウィザードが開き、プラットフォームがこのリポジトリをあなたの GitHub アカウント配下に自動でクローンし、クラウドでのビルドと公開まで自動で行います。必要なのは GitHub アカウント 1 つだけで、PC に Node.js や pnpm をインストールする必要も、コマンドを打つ必要もありません。

Cloudflare へデプロイ（推奨）

ボタンをクリックすると、ウィザードは次の 3 ステップで進みます:

ログインと認可: GitHub と Cloudflare に順番にログインします。どちらも無料プランがあり、アカウントがなければその場で登録できます。
リポジトリのクローン: Cloudflare がこのリポジトリをあなたの GitHub アカウント配下に自動でコピーします。以降のコンテンツ修正はすべて自分のリポジトリに対して行います。
設定の確認とデプロイ: ウィザードの最後に設定ページが表示されるので、下の表どおりか確認して Deploy をクリックします:

設定項目	ウィザードのデフォルト表示	対処
リポジトリ名 / プロジェクト名	`epocanvas-docs` が事前入力済み	デフォルトのままにする
ビルドコマンド	このリポジトリの `pnpm run build` と自動認識	デフォルトのままにする
デプロイコマンド	`pnpm run deploy` が事前入力済み	`npx wrangler deploy` に変更する

初回デプロイ時、Cloudflare はリポジトリに Workers 設定ファイルがないことを検出すると、これが Astro 静的サイトだと自動認識し、自動生成された設定の Pull Request（PR）をリポジトリに送ってきます。マージすればよく、以降はプッシュするたびに自動でビルドして公開されます。ボタンをクリックしてから URL が表示されるまで、順調にいけば 2〜3 分です。

デプロイが完了すると、Cloudflare は https://epocanvas-docs.<あなたのサブドメイン>.workers.dev 形式の公開 URL を割り当て、HTTPS 証明書も自動で付きます。自分のドメインに変えたいときは、ダッシュボードで Workers & Pages → 自分のプロジェクト → Settings → Domains & Routes と進んで追加します。実際に公開されている本站を確かめるには、Pages のデフォルトドメイン https://epocanvas-docs.pages.dev とカスタムドメイン https://docs.epocanvas.com を直接開いてください。

Vercel と Netlify へのデプロイ

他のプラットフォームに慣れている方のために、下の 2 つのボタンは同じことをします。どちらのプラットフォームも Astro プロジェクトを自動認識するので、ビルド設定を手動で入力する必要はありません:

Vercel: ボタンをクリック → GitHub を認可 → デフォルトのまま Deploy をクリック。完了すると epocanvas-docs.vercel.app のドメインが得られ、個人用の Hobby プランは無料です。
Netlify: ボタンをクリック → GitHub と接続 → プラットフォームが自動でリポジトリをクローンし、初回ビルドまで行います。完了すると epocanvas-docs.netlify.app のドメインが得られ、無料枠で十分使えます。

事前準備

ワンクリックデプロイは「まずサイトを公開してしまう」のに向いていますが、ドキュメントの執筆や修正は結局ローカルで行うことになります。内容を書くつもりなら、まず PC に次の基本の開発環境が入っているか確認してください:

ツール	推奨バージョン	確認コマンド	説明
Node.js	`>= 18.20.8`（推奨は 20.3+ または 22 LTS）	`node -v`	JavaScript の実行と静的ページのビルドを支える土台となる環境
pnpm	`>= 9`（CI 環境では 10 を使用）	`pnpm -v`	推奨パッケージマネージャー。インストールが速くディスク容量も節約できる
Git	最新安定版	`git --version`	コードの取得とバージョン管理に使用

3 ステップでローカルで動かす

ステップ 1：リポジトリをローカルにクローンする

ターミナルを開き、次のコマンドでプロジェクトのコードをクローンして、プロジェクトフォルダに入ります:

git clone https://github.com/shijianus/epocanvas-docs.git
cd epocanvas-docs

ステップ 2：プロジェクトの依存関係をインストールする

プロジェクトのルートディレクトリでインストールコマンドを実行します:

pnpm install

pnpm が pnpm-lock.yaml に従って必要なフロントエンド依存関係（Astro、Starlight、ローカル画像処理モジュールなど）を自動でダウンロードし、通常は数十秒で完了します。インストールが終わるとターミナルに所要時間が表示されます:

Done in 1m 3.2s using pnpm v9.15.9

ステップ 3：ローカル開発プレビューサーバーを起動する

依存関係のインストールが終わったら、起動コマンドを実行します:

pnpm run dev

ターミナルには次のような出力が表示されます（初回起動は依存関係の事前コンパイルが必要なため、数秒かかります）:

astro  v5.18.2  ready in 5152 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

watching for file changes...

この状態でブラウザから http://localhost:4321 にアクセスすると、ドキュメントサイト一式が表示されます。任意の .md ファイルを修正して保存すると、ブラウザのページが自動で更新され、最新の内容が表示されます。

クイックスタートページのローカル開発サーバー上での実際のレンダリング結果

図：http://localhost:4321/canvas/deployment/ の実際のレンダリング結果。いま読んでいるこのページそのものです。

よく使う開発コマンド早見表

日常のドキュメント執筆やプロジェクト保守では、主に次のコマンドを使います:

コマンド	使う場面	詳細説明
`pnpm run dev`	日々のドキュメント執筆	ローカルデバッグサーバーを起動します。ホットリロード（HMR）対応で、任意の `.md` ファイルを修正するとブラウザが自動で更新して最新内容を表示します。
`pnpm run build`	ビルドのテスト	サイト全体の静的ページをローカルで完全にコンパイルし、`dist/` ディレクトリに HTML、CSS、Pagefind の検索インデックスを生成します。
`pnpm run preview`	ビルド成果物のプレビュー	軽量 Web サーバーをローカルで起動して `dist/` の成果物を実行します。正式な公開前にリンクやスタイルが正常か確認するのに使います。
`pnpm run deploy`	ワンクリックで公開	まず自動で build を実行し、次に Wrangler を呼び出して `dist/` を Cloudflare Pages の本番環境へプッシュします。

公開の完全な手順と公開後の確認方法は、Cloudflare Pages へのデプロイ をご覧ください。

コア設定ファイルはどこ？

サイトの基本情報を変更する場合は、主に次のファイルを確認します:

サイト名と目次メニュー: ルートディレクトリの astro.config.mjs を修正します。サイトの title（サイトタイトル）、site（本番ドメイン）、sidebar（左側の目次メニュー）を変更できます。
トップナビゲーションバーのボタン: src/config/navigation.ts を修正します。上部の「ホーム」「製品概要」などのボタンとそのリンク先を追加・削除できます。
ページの色と文字スタイル: src/styles/custom.css を修正します。ライトモードとダークモードのテーマカラーはここで調整します。
新しいドキュメントの追加: src/content/docs/canvas/ ディレクトリに .md ファイルを新規作成し、サイドバーに登録します。詳しくは Markdown 執筆と整形ガイドを参照してください。

次のステップ

ローカルサーバーが無事に動いたら、次の内容も見てみてください:

ページレイアウトと閲覧体験: トップバー、サイドバー、本文画面のレイアウトの詳細。
レンダリングルールの詳細: Markdown がどう最終ページにレンダリングされるかを把握し、整形構文でのつまずきを防ぎます。
Cloudflare Pages へのデプロイ: ドキュメントを公開して独自ドメインを設定します。