Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

VitePress

最終更新 Markdown で表示Agent セットアップ

VitePress ↗ は、高速でコンテンツ中心のウェブサイトを作るための 静的サイトジェネレーター ↗（SSG）です。VitePress は Markdown ↗ で書いたソースコンテンツにテーマを適用し、どこへでもデプロイしやすい静的 HTML ページを生成します。

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

新しいプロジェクトをセットアップする

VitePress には、基本的なプロジェクトを足場にするコマンドラインのセットアップウィザードがあります。

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

npx vitepress@latest init

ほかの質問に加えて、セットアップウィザードは新しいプロジェクトの保存先ディレクトリを尋ねます。プロジェクトのディレクトリに移動してから、次のコマンドで vitepress 依存関係をインストールします。

npm i -D vitepress@latest

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

node_modules
.vitepress/cache
.vitepress/dist

この手順で、不要なファイルがプロジェクトの Git リポジトリ（次にセットアップします）に含まれないようにします。

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

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 ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選択します。

  3. Pages タブを選択します。

  4. Import an existing Git repository を選択します。

  5. 作成した新しい GitHub リポジトリを選択し、Begin setup を選択します。

  6. Build settings セクションで、Framework preset に VitePress を選びます。選ぶと、次の情報が表示されます。

設定項目値
本番ブランチmain
ビルドコマンドnpx vitepress build
ビルドディレクトリ.vitepress/dist

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

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。VitePress プロジェクトに新しいコードをコミットしてプッシュするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も利用できるので、本番に出す前に変更後の見た目を確認できます。

さらに学ぶ

このガイドを完了すると、VitePress サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？