Gridsome
Gridsome ↗ は、デフォルトで高速な静的生成されたウェブサイトやアプリケーションを構築するための Vue.js ベースの Jamstack フレームワークです。このガイドでは、新しい Gridsome プロジェクトを作成し、Cloudflare Pages を使用してデプロイします。新しい Gridsome プロジェクトを作成するためのコマンドラインツールである @gridsome/cli ↗ を使用します。
ターミナルで以下のコマンドを実行して @gridsome/cli をインストールします。
npm install --global @gridsome/cliGridsome をインストールしたら、gridsome create を実行して新しいプロジェクトをセットアップします。create コマンドは、作成されるプロジェクトのディレクトリを定義する名前と、オプションのスターターキット名を受け入れます。より多くのスターターについては、Gridsome スターターセクション ↗を確認できます。
npx gridsome create my-gridsome-websiteAll 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 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 initgit remote add origin https://github.com/<your-gh-username>/<repository-name>git add .git commit -m "Initial commit"git branch -M maingit push -u origin mainサイトを Pages にデプロイするには：
- Cloudflare ダッシュボード ↗ にログインし、アカウントを選択します。
- アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Git に接続を選択します。
- 作成した新しい GitHub リポジトリを選択し、ビルドとデプロイの設定セクションで、以下の情報が提供されます：
| Configuration option | Value |
|---|---|
| Production branch | main |
| Build command | npx gridsome build |
| Build directory | dist |
サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pages が vuepress、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイするのを見ることができるはずです。
サイトをデプロイした後、*.pages.dev のプロジェクト用のユニークなサブドメインが提供されます。Gridsome プロジェクトに新しいコードをコミットするたびに、Cloudflare Pages は自動的にプロジェクトを再ビルドしてデプロイします。また、新しいプルリクエストで プレビュー デプロイメント にアクセスできるため、変更を本番環境にデプロイする前にサイトの変更がどのように見えるかをプレビューできます。
By completing this guide, you have successfully deployed your Gridsome site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.