VitePress

VitePress ↗ は、迅速でコンテンツ中心のウェブサイトを構築するために設計された 静的サイトジェネレーター ↗ (SSG) です。VitePress は、Markdown ↗ で書かれたソースコンテンツにテーマを適用し、どこにでも簡単にデプロイできる静的 HTML ページを生成します。

このガイドでは、新しい VitePress プロジェクトを作成し、Cloudflare Pages を使用してデプロイします。

新しいプロジェクトのセットアップ

VitePress には、基本的なプロジェクトをスキャフォールドするのを助けるコマンドラインセットアップウィザードが付属しています。

ターミナルで以下のコマンドを実行して、新しい VitePress プロジェクトを作成します：

npm

npx vitepress@latest init

pnpm

pnpm dlx vitepress@latest init

yarn

yarn dlx vitepress@latest init

bun

bunx vitepress@latest init

セットアップウィザードは、他の質問の中で新しいプロジェクトを保存するディレクトリを尋ねますので、プロジェクトのディレクトリにいることを確認し、次のコマンドで vitepress 依存関係をインストールします：

npm

npm add -D vitepress

pnpm

pnpm add -D vitepress

yarn

yarn add -D vitepress

bun

bun add -D vitepress

ノート

エラーが発生した場合は、ローカルマシンが VitePress の前提条件 ↗ を満たしていることを確認してください。

最後に、以下の内容で .gitignore ファイルを作成します：

node_modules
.vitepress

このステップは、不要なファイルがプロジェクトの git リポジトリに含まれないようにします（次に設定する予定です）。

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pages でデプロイ

サイトを Pages にデプロイするには：

1. Cloudflare ダッシュボード ↗ にログインし、アカウントを選択します。
2. アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Git に接続を選択します。
3. 作成した新しい GitHub リポジトリを選択し、ビルドとデプロイの設定セクションで、以下の情報が提供されます：

Configuration option	Value
Production branch	main
Build command	npx vitepress build
Build directory	.vitepress/dist

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pages は vitepress、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイします。

ノート

Cloudflare Pages に最初のサイトをデプロイするための完全なガイドについては、はじめにガイド を参照してください。

サイトをデプロイした後、プロジェクトに対して *.pages.dev のユニークなサブドメインが提供されます。VitePress プロジェクトに新しいコードをコミットしてプッシュするたびに、Cloudflare Pages は自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストに対して プレビュー デプロイメント にアクセスできるため、変更を本番環境にデプロイする前にサイトの変更をプレビューできます。

Learn more

By completing this guide, you have successfully deployed your VitePress site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.