diff --git a/content/pages/_partials/__create-github-repository-prefix.md b/content/pages/_partials/__create-github-repository-prefix.md deleted file mode 100644 index ced2c63149f8d7..00000000000000 --- a/content/pages/_partials/__create-github-repository-prefix.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -_build: - publishResources: false - render: never - list: never ---- - -## Create a GitHub repository - -Create a new GitHub repository by visiting [repo.new](https://repo.new). After creating a new repository, prepare and push your local application to GitHub by running the following commands in your terminal: diff --git a/content/pages/_partials/_framework-guides/_bindings_definition.md b/content/pages/_partials/_framework-guides/_bindings_definition.md new file mode 100644 index 00000000000000..a9ec55fbc06f34 --- /dev/null +++ b/content/pages/_partials/_framework-guides/_bindings_definition.md @@ -0,0 +1,10 @@ +--- +_build: + publishResources: false + render: never + list: never +--- + +A [binding](/pages/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](/kv/), [Durable Objects](/durable-objects/), [R2](/r2/), and [D1](/d1/). + +If you intend to use bindings in your project, you must first set up your bindings for local and remote development. \ No newline at end of file diff --git a/content/pages/_partials/_framework-guides/_create-gh-repo.md b/content/pages/_partials/_framework-guides/_create-gh-repo.md new file mode 100644 index 00000000000000..2aac71149357f9 --- /dev/null +++ b/content/pages/_partials/_framework-guides/_create-gh-repo.md @@ -0,0 +1,8 @@ +--- +_build: + publishResources: false + render: never + list: never +--- + +Create a new GitHub repository by visiting [repo.new](https://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: \ No newline at end of file diff --git a/content/pages/_partials/_framework-guides/_create-github-repository-prefix.md b/content/pages/_partials/_framework-guides/_create-github-repository-prefix.md new file mode 100644 index 00000000000000..eac19358cc25f7 --- /dev/null +++ b/content/pages/_partials/_framework-guides/_create-github-repository-prefix.md @@ -0,0 +1,10 @@ +--- +_build: + publishResources: false + render: never + list: never +--- + +## Create a GitHub repository + +Create a new GitHub repository by visiting [repo.new](https://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: diff --git a/content/pages/_partials/_create-github-repository.md b/content/pages/_partials/_framework-guides/_create-github-repository.md similarity index 78% rename from content/pages/_partials/_create-github-repository.md rename to content/pages/_partials/_framework-guides/_create-github-repository.md index 6a5ad8a2e62b49..28b60d85694000 100644 --- a/content/pages/_partials/_create-github-repository.md +++ b/content/pages/_partials/_framework-guides/_create-github-repository.md @@ -5,7 +5,7 @@ _build: list: never --- -{{}} +{{}} ```sh $ git init diff --git a/content/pages/_partials/_create-github-repository_no_init.md b/content/pages/_partials/_framework-guides/_create-github-repository_no_init.md similarity index 73% rename from content/pages/_partials/_create-github-repository_no_init.md rename to content/pages/_partials/_framework-guides/_create-github-repository_no_init.md index 85d60263e25032..567ee68201c24e 100644 --- a/content/pages/_partials/_create-github-repository_no_init.md +++ b/content/pages/_partials/_framework-guides/_create-github-repository_no_init.md @@ -5,7 +5,7 @@ _build: list: never --- -{{}} +{{}} ```sh $ git remote add origin https://github.com// diff --git a/content/pages/_partials/_framework-guides/_git-integration.md b/content/pages/_partials/_framework-guides/_git-integration.md new file mode 100644 index 00000000000000..b556d529c33b08 --- /dev/null +++ b/content/pages/_partials/_framework-guides/_git-integration.md @@ -0,0 +1,14 @@ +--- +_build: + publishResources: false + render: never + list: never +--- + +## Git integration + +In addition to [Direct Upload](/pages/get-started/direct-upload/) deployments, you can deploy projects via [Git integration](/pages/configuration/git-integration). Git integration allows you to connect a GitHub or GitLab repository to your Pages application and have your Pages application automatically built and deployed after each new commit is pushed to it. + +{{}} + +Setup requires a basic understanding of [Git](https://git-scm.com/). If you are new to Git, refer to GitHub's [summarized Git handbook](https://guides.github.com/introduction/git-handbook/) on how to set up Git on your local machine. \ No newline at end of file diff --git a/content/pages/_partials/_learn-more.md b/content/pages/_partials/_framework-guides/_learn-more.md similarity index 100% rename from content/pages/_partials/_learn-more.md rename to content/pages/_partials/_framework-guides/_learn-more.md diff --git a/content/pages/_partials/_git-integration-warning.md b/content/pages/_partials/_git-integration-warning.md new file mode 100644 index 00000000000000..a55cd00dd75c52 --- /dev/null +++ b/content/pages/_partials/_git-integration-warning.md @@ -0,0 +1,12 @@ +--- +_build: + publishResources: false + render: never + list: never +--- + +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-blazor-site.md b/content/pages/framework-guides/deploy-a-blazor-site.md index 1fb0e5e0898774..f97264d0490a86 100644 --- a/content/pages/framework-guides/deploy-a-blazor-site.md +++ b/content/pages/framework-guides/deploy-a-blazor-site.md @@ -44,7 +44,7 @@ Creating a `.gitignore` file ensures that only what is needed gets pushed onto y $ dotnet new gitignore ``` -{{}} +{{}} {{}} -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-jekyll-site.md b/content/pages/framework-guides/deploy-a-jekyll-site.md index eb554305f9a975..514b18608b012b 100644 --- a/content/pages/framework-guides/deploy-a-jekyll-site.md +++ b/content/pages/framework-guides/deploy-a-jekyll-site.md @@ -56,7 +56,7 @@ Optionally, you may use a theme with your new Jekyll site if you would like to s {{}} -{{}} +{{}} If you are migrating an existing Jekyll project to Pages, confirm that your `Gemfile` is committed as part of your codebase. Pages will look at your Gemfile and run `bundle install` to install the required dependencies for your project, including the `jekyll` gem. @@ -87,4 +87,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`. Every time you commit new code to your Jekyll site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-nuxt-site.md b/content/pages/framework-guides/deploy-a-nuxt-site.md index 3b4b97852a8c9a..1f462985d18e69 100644 --- a/content/pages/framework-guides/deploy-a-nuxt-site.md +++ b/content/pages/framework-guides/deploy-a-nuxt-site.md @@ -1,83 +1,172 @@ --- pcx_content_type: how-to title: Deploy a Nuxt site +meta: + description: Web framework making Vue.js-based development simple and powerful. --- # Deploy a Nuxt site -[Nuxt](https://nuxt.com) is a web framework making web Vue.js-based development simple and powerful. +[Nuxt](https://nuxt.com) is a web framework making Vue.js-based development simple and powerful. In this guide, you will create a new Nuxt application and deploy it using Cloudflare Pages. -## Create a new project +## Create a new project using the `create-cloudflare` CLI (C3) -Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Nuxt's official setup tool, and provide the option to deploy instantly. - -To use `create-cloudflare` to create a new Nuxt project, run the following command: +The [`create-cloudflare` CLI (C3)](/pages/get-started/c3/) will configure your Nuxt site for Cloudflare Pages. Run the following command in your terminal to create a new Nuxt site: ```sh $ npm create cloudflare@latest my-nuxt-app -- --framework=nuxt ``` -`create-cloudflare` will then install dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI, and ask you setup questions. +C3 will ask you a series of setup questions and create a new project with [`nuxi` (the official Nuxt CLI)](https://github.com/nuxt/cli). C3 will also install the necessary adapters along with the [Wrangler CLI](/workers/wrangler/install-and-update/#check-your-wrangler-version). + +After creating your project, C3 will generate a new `my-nuxt-app` directory using the default Nuxt template, updated to be fully compatible with Cloudflare Pages. -After you have installed your project dependencies, start your application: +When creating your new project, C3 will give you the option of deploying an initial version of your application via [Direct Upload](/pages/how-to/use-direct-upload-with-continuous-integration/). You can redeploy your application at any time by running following command inside your project directory: ```sh -$ npm run dev +$ npm run deploy ``` -{{}} +{{}} + +## Configure and deploy a project without C3 -{{}} +To deploy a Nuxt project without C3, follow the [Nuxt Get Started guide](https://nuxt.com/docs/getting-started/installation). After you have set up your Nuxt project, choose either the [Git integration guide](/pages/get-started/guide/) or [Direct Upload guide](/pages/get-started/direct-upload/) to deploy your Nuxt project on Cloudflare Pages. -## Deploy with Cloudflare Pages +{{}} -{{}} +### Create a GitHub repository -### Deploy via the Cloudflare dashboard +{{}} + +```sh +# Skip the following three commands if you have built your application +# using C3 or already committed your changes +$ git init +$ git add . +$ git commit -m "Initial commit" + +$ git branch -M main +$ git remote add origin https://github.com// +$ git push -u origin main +``` + +### Create a Pages project 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. -2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**. +2. Go to **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** and create a new Pages project. You will be asked to authorize access to your GitHub account if you have not already done so. Cloudflare needs this so that it can monitor and deploy your projects from the source. You may narrow access to specific repositories if you prefer; however, you will have to manually update this list [within your GitHub settings](https://github.com/settings/installations) when you want to add more repositories to Cloudflare Pages. -Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information: +3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information: {{}} Optionally, you can customize the **Project name** field. It defaults to the GitHub repository's name, but it does not need to match. The **Project name** value is assigned as your `*.pages.dev` subdomain. -After completing configuration, click the **Save and Deploy** button. +4. After completing configuration, select the **Save and Deploy**. + +Review your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified. Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit. -You will see your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified. +Additionally, you will have access to [preview deployments](/pages/configuration/preview-deployments/), which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying your changes to production. -Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit. +## Use bindings in your Nuxt application + +{{}} + +### Set up bindings for local development -Additionally, you will have access to [preview deployments](/pages/configuration/preview-deployments/), which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying them to production. +Projects created via C3 come with `nitro-cloudflare-dev`, a `nitro` module that simplifies the process of working with bindings during development: + +```typescript +--- +filename: nuxt.config.ts +highlights: [2] +--- +export default defineNuxtConfig({ + modules: ["nitro-cloudflare-dev"], +}); +``` + +This module is powered by the [`getPlatformProxy` helper function](/workers/wrangler/api#getplatformproxy). `getPlatformProxy` will automatically detect any bindings defined in your project's `wrangler.toml` file and emulate those bindings in local development. Review [Wrangler configuration information on bindings](/workers/wrangler/configuration/#bindings) for more information on how to configure bindings in `wrangler.toml`. {{}} -## Use bindings in your Nuxt application +### Set up bindings for a deployed application -A [binding](/pages/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](/kv/reference/how-kv-works/), [Durable Object](/durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/). +In order to access bindings in a deployed application, you will need to [configure your bindings](/pages/functions/bindings/) in the Cloudflare dashboard. + +### Add bindings to TypeScript projects + +To get proper type support, you need to create a new `env.d.ts` file in the root of your project and declare a [binding](/pages/functions/bindings/). + +The following is an example of adding a `KVNamespace` binding: + +```ts +--- +filename: env.d.ts +highlight: [9] +--- +import { CfProperties, Request, ExecutionContext, KVNamespace } from '@cloudflare/workers-types'; + +declare module 'h3' { + interface H3EventContext { + cf: CfProperties, + cloudflare: { + request: Request, + env: { + MY_KV: KVNamespace, + } + context: ExecutionContext, + }; + } +} +``` + +### Access bindings in your Nuxt application In Nuxt, add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory). The `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field. The `context` field allows you to access any bindings set for your application. The following code block shows an example of accessing a KV namespace in Nuxt. + +{{}} +{{}} + +```javascript +--- +filename: server/api/hello.js +highlight: [2] +--- +export default defineEventHandler(({ context }) => { + const MY_KV = context.cloudflare.env.MY_KV; + + return { + // ... + }; +}); +``` + +{{}} +{{}} + ```typescript --- -filename: src/my-endpoint.get.ts -highlight: [2, 3] +filename: server/api/hello.ts +highlight: [2] --- export default defineEventHandler(({ context }) => { - // the type `KVNamespace` comes from the @cloudflare/workers-types package - const MY_KV: KVNamespace = context.cloudflare.env.MY_KV; + const MY_KV = context.cloudflare.env.MY_KV; return { // ... @@ -85,4 +174,7 @@ export default defineEventHandler(({ context }) => { }); ``` -{{}} \ No newline at end of file +{{}} +{{}} + +{{}} diff --git a/content/pages/framework-guides/deploy-a-pelican-site.md b/content/pages/framework-guides/deploy-a-pelican-site.md index 634530a9711784..e13f8ee82f96ac 100644 --- a/content/pages/framework-guides/deploy-a-pelican-site.md +++ b/content/pages/framework-guides/deploy-a-pelican-site.md @@ -31,7 +31,7 @@ This is the directory name that you will set in the build command. {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -51,4 +51,4 @@ After deploying your site, you will receive a unique subdomain for your project Every time you commit new code to your Pelican site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests and be able to preview how changes look to your site before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-preact-site.md b/content/pages/framework-guides/deploy-a-preact-site.md index 28307375a6d7df..ec4d6fb9806201 100644 --- a/content/pages/framework-guides/deploy-a-preact-site.md +++ b/content/pages/framework-guides/deploy-a-preact-site.md @@ -21,7 +21,7 @@ $ cd your-project-name {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -68,4 +68,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t {{}} -{{}} +{{}} diff --git a/content/pages/framework-guides/deploy-a-qwik-site.md b/content/pages/framework-guides/deploy-a-qwik-site.md index 2e3a26d6399417..ec0e9784c95cf1 100644 --- a/content/pages/framework-guides/deploy-a-qwik-site.md +++ b/content/pages/framework-guides/deploy-a-qwik-site.md @@ -31,7 +31,7 @@ $ npm start {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -81,4 +81,4 @@ export const useGetServerTime = routeLoader$(({ platform }) => { }); ``` -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-react-site.md b/content/pages/framework-guides/deploy-a-react-site.md index 63e7d012be992e..62f4d0b461a7f1 100644 --- a/content/pages/framework-guides/deploy-a-react-site.md +++ b/content/pages/framework-guides/deploy-a-react-site.md @@ -35,7 +35,7 @@ $ npm start {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -70,4 +70,4 @@ By default, Cloudflare Pages assumes you are developing a single-page applicatio {{}} -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-remix-site.md b/content/pages/framework-guides/deploy-a-remix-site.md index e7543ed7d795f6..8f052dc41e6204 100644 --- a/content/pages/framework-guides/deploy-a-remix-site.md +++ b/content/pages/framework-guides/deploy-a-remix-site.md @@ -37,7 +37,7 @@ $ npm run dev {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -137,4 +137,4 @@ export const loader = async ({ context, params }: LoaderArgs) => { Refer to the Durable Objects documentation to learn about deploying a [Durable Object](/durable-objects/). -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-solid-site.md b/content/pages/framework-guides/deploy-a-solid-site.md index a92101b1abc4c4..9574a37dcdbd3d 100644 --- a/content/pages/framework-guides/deploy-a-solid-site.md +++ b/content/pages/framework-guides/deploy-a-solid-site.md @@ -63,7 +63,7 @@ export default defineConfig({ {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -143,4 +143,4 @@ The Cloudflare adapter accepts the same options as [Miniflare](https://miniflare After setting up the binding locally, you only need to set the binding in the Cloudflare dashboard as well and it will be available for your Solid application on your next deployment. To add the binding there, refer to [Bindings](/pages/functions/bindings/). -{{}} +{{}} diff --git a/content/pages/framework-guides/deploy-a-sphinx-site.md b/content/pages/framework-guides/deploy-a-sphinx-site.md index 78248e1dfb209d..b3b6dbf38dbb42 100644 --- a/content/pages/framework-guides/deploy-a-sphinx-site.md +++ b/content/pages/framework-guides/deploy-a-sphinx-site.md @@ -254,4 +254,4 @@ After deploying your site, you will receive a unique subdomain for your project You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. -{{}} +{{}} diff --git a/content/pages/framework-guides/deploy-a-svelte-site.md b/content/pages/framework-guides/deploy-a-svelte-site.md index 832fb5013f9b5a..2d74eb8f3f014f 100644 --- a/content/pages/framework-guides/deploy-a-svelte-site.md +++ b/content/pages/framework-guides/deploy-a-svelte-site.md @@ -33,7 +33,7 @@ $ npm run dev {{}} -{{}} +{{}} ## SvelteKit Cloudflare configuration @@ -181,4 +181,4 @@ export const GET = (({ url }) => { For more information about SvelteKit API Routes, refer to the [SvelteKit documentation](https://kit.svelte.dev/docs/routing#server). {{}} -{{}} +{{}} diff --git a/content/pages/framework-guides/deploy-a-vite3-project.md b/content/pages/framework-guides/deploy-a-vite3-project.md index 8a33508f37858a..b711bc96c43e80 100644 --- a/content/pages/framework-guides/deploy-a-vite3-project.md +++ b/content/pages/framework-guides/deploy-a-vite3-project.md @@ -56,4 +56,4 @@ Cloudflare Pages will automatically rebuild your project and deploy it on every Additionally, you will have access to [preview deployments](/pages/configuration/preview-deployments/), which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying them to production. -{{}} +{{}} diff --git a/content/pages/framework-guides/deploy-a-vue-site.md b/content/pages/framework-guides/deploy-a-vue-site.md index 8dd2c5b6562909..f7f90d5ce5e4d6 100644 --- a/content/pages/framework-guides/deploy-a-vue-site.md +++ b/content/pages/framework-guides/deploy-a-vue-site.md @@ -21,7 +21,7 @@ $ npm create cloudflare@latest my-vue-app -- --framework=vue {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -50,4 +50,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`. Every time you commit new code to your Vue application, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-vuepress-site.md b/content/pages/framework-guides/deploy-a-vuepress-site.md index 445317ba4ccc80..a8528315a7a2eb 100644 --- a/content/pages/framework-guides/deploy-a-vuepress-site.md +++ b/content/pages/framework-guides/deploy-a-vuepress-site.md @@ -23,7 +23,7 @@ Once this is done, a scaffolded documentation site will be created in the `docs` {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -45,4 +45,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`. Every time you commit new code to your VuePress project, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes to your site look before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-a-zola-site.md b/content/pages/framework-guides/deploy-a-zola-site.md index c04f7a57121924..552c3cf7a2fb3c 100644 --- a/content/pages/framework-guides/deploy-a-zola-site.md +++ b/content/pages/framework-guides/deploy-a-zola-site.md @@ -72,7 +72,7 @@ Upon running `zola init`, you will prompted with three questions: {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -109,4 +109,4 @@ base_url = "https://my-zola-project.pages.dev" Every time you commit new code to your Zola site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-an-angular-site.md b/content/pages/framework-guides/deploy-an-angular-site.md index 9714e445d9ef56..a6a73adc74a71e 100644 --- a/content/pages/framework-guides/deploy-an-angular-site.md +++ b/content/pages/framework-guides/deploy-an-angular-site.md @@ -24,7 +24,7 @@ $ npm create cloudflare@latest my-angular-app -- --framework=angular {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -94,4 +94,4 @@ Cloudflare Pages will automatically rebuild your project and deploy it on every Additionally, you will have access to [preview deployments](/pages/configuration/preview-deployments/), which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-an-astro-site.md b/content/pages/framework-guides/deploy-an-astro-site.md index 65dd317e9e9722..46dca2e48b3298 100644 --- a/content/pages/framework-guides/deploy-an-astro-site.md +++ b/content/pages/framework-guides/deploy-an-astro-site.md @@ -41,7 +41,7 @@ $ npm run astro add cloudflare {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -174,4 +174,4 @@ const value = await myKV.get("key"); To learn more about the Astro Cloudflare runtime, refer to the [Access to the Cloudflare runtime](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#access-to-the-cloudflare-runtime) in the Astro documentation. -{{}} +{{}} diff --git a/content/pages/framework-guides/deploy-an-elderjs-site.md b/content/pages/framework-guides/deploy-an-elderjs-site.md index 278e2689d50283..dcd6a7bc7df3ca 100644 --- a/content/pages/framework-guides/deploy-an-elderjs-site.md +++ b/content/pages/framework-guides/deploy-an-elderjs-site.md @@ -22,7 +22,7 @@ The Elder.js template includes a number of pages and examples showing how to bui {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -55,4 +55,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t {{}} -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-an-eleventy-site.md b/content/pages/framework-guides/deploy-an-eleventy-site.md index 104266c366cdc1..d7769d87fc8d03 100644 --- a/content/pages/framework-guides/deploy-an-eleventy-site.md +++ b/content/pages/framework-guides/deploy-an-eleventy-site.md @@ -56,4 +56,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`. Every time you commit new code to your Eleventy site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-an-emberjs-site.md b/content/pages/framework-guides/deploy-an-emberjs-site.md index 2edf65a4ca083f..736564f5723375 100644 --- a/content/pages/framework-guides/deploy-an-emberjs-site.md +++ b/content/pages/framework-guides/deploy-an-emberjs-site.md @@ -32,7 +32,7 @@ $ npm start {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -50,4 +50,4 @@ Every time you commit new code to your Ember site, Cloudflare Pages will automat For the complete guide to deploying your first site to Cloudflare Pages, refer to the [Get started guide](/pages/get-started/). -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-an-mkdocs-site.md b/content/pages/framework-guides/deploy-an-mkdocs-site.md index d71c6b5b02c38a..c6e574fb9d6017 100644 --- a/content/pages/framework-guides/deploy-an-mkdocs-site.md +++ b/content/pages/framework-guides/deploy-an-mkdocs-site.md @@ -31,7 +31,7 @@ pip freeze > requirements.txt {{}} -{{}} +{{}} You have successfully created a GitHub repository and pushed your MkDocs project to that repository. @@ -53,4 +53,4 @@ Every time you commit new code to your MkDocs site, Cloudflare Pages will automa For the complete guide to deploying your first site to Cloudflare Pages, refer to the [Get started guide](/pages/get-started/). -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/deploy-anything.md b/content/pages/framework-guides/deploy-anything.md index 683c755c335779..193de688cde428 100644 --- a/content/pages/framework-guides/deploy-anything.md +++ b/content/pages/framework-guides/deploy-anything.md @@ -9,7 +9,7 @@ Cloudflare supports deploying any static HTML website to Cloudflare Pages. If yo {{}} -{{}} +{{}} ## Deploy with Cloudflare Pages @@ -41,4 +41,4 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t After you have deployed your site, you will receive a unique subdomain for your project on `*.pages.dev`. Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/configuration/preview-deployments/) on new pull requests, so you can preview how changes look to your site before deploying them to production. -{{}} \ No newline at end of file +{{}} \ No newline at end of file diff --git a/content/pages/framework-guides/nextjs/deploy-a-nextjs-site.md b/content/pages/framework-guides/nextjs/deploy-a-nextjs-site.md index 7e0c572d739379..dc6ab608642d61 100644 --- a/content/pages/framework-guides/nextjs/deploy-a-nextjs-site.md +++ b/content/pages/framework-guides/nextjs/deploy-a-nextjs-site.md @@ -13,28 +13,20 @@ This guide will instruct you how to deploy a full-stack Next.js project which us ## Create a new project using the `create-cloudflare` CLI (C3) -Open up your terminal and run the following command to create a new Next.js site. Your Next.js site is configured for Cloudflare Pages using the [`create-cloudflare` CLI (C3)](/pages/get-started/c3/). +The [`create-cloudflare` CLI (C3)](/pages/get-started/c3/) will configure your Next.js site for Cloudflare Pages. Run the following command in your terminal to create a new Next.js site: ```sh $ npm create cloudflare@latest my-next-app -- --framework=next ``` -C3 will install necessary dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and the `@cloudflare/next-on-pages` adapter. C3 will also ask you a series of setup questions. +C3 will ask you a series of setup questions. C3 will also install necessary dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and the `@cloudflare/next-on-pages` adapter. -After creating your project, a new `my-next-app` directory will be generated using the default Next.js template, updated to be fully compatible with Cloudflare Pages. +After creating your project, C3 will generate a new `my-next-app` directory using the default Next.js template, updated to be fully compatible with Cloudflare Pages. -Change to this directory to continue development. +When creating your new project, C3 will give you the option of deploying an initial version of your application via [Direct Upload](/pages/how-to/use-direct-upload-with-continuous-integration/). You can redeploy your application at any time by running following command inside your project directory: ```sh -$ cd my-next-app -``` - -If you chose to deploy, you will receive a unique subdomain for your project on `*.pages.dev`, and you can access it almost immediately. - -To (re)deploy your application after having made changes, run the deployment command that C3 generates for you: - -```sh -$ npm run pages:deploy +$ npm run deploy ``` {{