[Pages] Update UI instructions (cloudflare#20894)

kodster28 · ToriLindsay · web-flow · commit 7d4f896da9dd · 2025-03-19T12:14:24.000Z
* [Pages] Update UI instructions

* few more

* typo

* Update src/content/partials/pages/deploy-to-pages-steps-with-preset.mdx

Co-authored-by: ToriLindsay &lt;tgalatro@cloudflare.com&gt;

---------

Co-authored-by: ToriLindsay &lt;tgalatro@cloudflare.com&gt;
diff --git a/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx
@@ -50,13 +50,7 @@ dotnet new gitignore
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. In Account Home, select **Workers & Pages**.
-3. Select **Create application** > **Pages** > **Connect to Git**.
-
-Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-no-preset" />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx
@@ -29,11 +29,7 @@ brunch new proj -s es6
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, select _Brunch_ as your **Framework preset**. Your selection will provide the following information.
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Brunch" }} />
 
 <PagesBuildPreset framework="brunch" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx
@@ -31,9 +31,10 @@ To use `create-cloudflare` to create a new Docusaurus project, run the following
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, select _Docusaurus_ as your **Framework preset**. Your selection will provide the following information.
+<Render
+	file="deploy-to-pages-steps-with-preset"
+	params={{ name: "Docusarus" }}
+/>
 
 <PagesBuildPreset framework="docusaurus" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx
@@ -29,11 +29,7 @@ npx gatsby new my-gatsby-site https://github.com/alxshelepenok/gatsby-starter-lu
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Gatsby" }} />
 
 <PagesBuildPreset framework="gatsby" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx
@@ -31,9 +31,10 @@ npx gridsome create my-gridsome-website
 
 To deploy your site to Pages:
 
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, the following information will be provided:
+<Render
+	file="deploy-to-pages-steps-with-preset"
+	params={{ name: "Gridsome" }}
+/>
 
 <PagesBuildPreset framework="gridsome" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx
@@ -52,11 +52,7 @@ Inside of `hello-hexo.md`, use Markdown to write the content of the article. You
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-no-preset" />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx
@@ -12,7 +12,7 @@ import {
 	TabItem,
 	Tabs,
 	PackageManagers,
-    Stream,
+	Stream,
 } from "~/components";
 
 [Hono](https://honojs.dev/) is a small, simple, and ultrafast web framework for Cloudflare Pages and Workers, Deno, and Bun. Learn more about the creation of Hono by [watching an interview](#creator-interview) with its creator, [Yusuke Wada](https://yusu.ke/).
@@ -116,9 +116,7 @@ You should be able to review your generated web application at `http://localhost
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-no-preset" />
 
 <div>
 
@@ -161,4 +159,8 @@ For demo applications using Hono and Cloudflare Pages, refer to the following re
 
 ### Creator Interview
 
-<Stream id="db240ef1d351915849151242ec0c5f1c" title="DevTalk Episode 01 Hono" thumbnail="5s" />
+<Stream
+	id="db240ef1d351915849151242ec0c5f1c"
+	title="DevTalk Episode 01 Hono"
+	thumbnail="5s"
+/>
diff --git a/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx
@@ -91,11 +91,7 @@ Inside of `hello-world.md`, add some initial content to create your post. Remove
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Hugo" }} />
 
 <PagesBuildPreset framework="hugo" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx
@@ -62,11 +62,7 @@ If you are migrating an existing Jekyll project to Pages, confirm that your `Gem
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Jekyll" }} />
 
 <PagesBuildPreset framework="jekyll" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx
@@ -22,7 +22,11 @@ In this guide, you will create a new Nuxt application and deploy it using Cloudf
 
 ### Video Tutorial
 
-<Stream id="fd106a56e13af42eb39b35c499432e4b" title="Deploy a Nuxt Application to Cloudflare" thumbnail="2.5s" />
+<Stream
+	id="fd106a56e13af42eb39b35c499432e4b"
+	title="Deploy a Nuxt Application to Cloudflare"
+	thumbnail="2.5s"
+/>
 
 ## Create a new project using the `create-cloudflare` CLI (C3)
 
@@ -74,12 +78,7 @@ 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. 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.
-
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Nuxt.js" }} />
 
 <PagesBuildPreset framework="nuxt-js" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx
@@ -35,11 +35,7 @@ This is the directory name that you will set in the build command.
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, select _Pelican_ as your **Framework preset**. Your selection will provide the following information. The build command `pelican content` refers to the `content` folder you made earlier in this guide.
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Pelican" }} />
 
 <PagesBuildPreset framework="pelican" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx
@@ -31,14 +31,7 @@ During initialization, you can accept the `Prerender app (SSG)?` option to have
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-
-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:
+<Render file="deploy-to-pages-steps-no-preset" />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx
@@ -41,9 +41,7 @@ npm start
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Qwik" }} />
 
 <PagesBuildPreset framework="qwik" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx
@@ -54,9 +54,7 @@ npm run dev
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Remix" }} />
 
 <PagesBuildPreset framework="remix" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-solid-start-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-solid-start-site.mdx
@@ -61,9 +61,7 @@ export default defineConfig({
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-3. Select the new GitHub repository that you created and, in **Set up builds and deployments**, provide the following information:
+<Render file="deploy-to-pages-steps-no-preset" />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx
@@ -223,11 +223,7 @@ git push -u origin main
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-no-preset" />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-svelte-kit-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-svelte-kit-site.mdx
@@ -119,12 +119,10 @@ If you are using any adapter different from the default SvelteKit adapter, remem
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-
-You will be asked to authorize access to your GitHub account if you have not already done so. Cloudflare needs this authorization to deploy your projects from your GitHub account. You may narrow Cloudflare's access to specific repositories. 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 **Set up builds and deployments**, provide the following information:
+<Render
+	file="deploy-to-pages-steps-with-preset"
+	params={{ name: "SveltKit" }}
+/>
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx
@@ -92,11 +92,10 @@ This step makes sure that unnecessary files are not going to be included in the
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, the following information will be provided:
+<Render
+	file="deploy-to-pages-steps-with-preset"
+	params={{ name: "VitePress" }}
+/>
 
 <PagesBuildPreset framework="vitepress" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx
@@ -31,9 +31,7 @@ To use `create-cloudflare` to create a new Vue project, run the following comman
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Vue" }} />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx
@@ -76,11 +76,7 @@ Upon running `zola init`, you will prompted with three questions:
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Zola" }} />
 
 <PagesBuildPreset framework="zola" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx
@@ -144,12 +144,7 @@ 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. 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.
-
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Analog" }} />
 
 <PagesBuildPreset framework="analog" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx
@@ -49,12 +49,7 @@ 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. 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.
-
-3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Angular" }} />
 
 <PagesBuildPreset framework="angular" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx
@@ -3,7 +3,12 @@ pcx_content_type: how-to
 title: Astro
 ---
 
-import { PagesBuildPreset, Render, PackageManagers, Stream } from "~/components";
+import {
+	PagesBuildPreset,
+	Render,
+	PackageManagers,
+	Stream,
+} from "~/components";
 
 [Astro](https://astro.build) is an all-in-one web framework for building fast, content-focused websites. By default, Astro builds websites that have zero JavaScript runtime code.
 
@@ -13,7 +18,11 @@ In this guide, you will create a new Astro application and deploy it using Cloud
 
 ### Video Tutorial
 
-<Stream id="d308a0e06bfaefd12115b34076ba99a4" title="Build a Full-Stack Application using Astro and Cloudflare Workers" thumbnail="3s" />
+<Stream
+	id="d308a0e06bfaefd12115b34076ba99a4"
+	title="Build a Full-Stack Application using Astro and Cloudflare Workers"
+	thumbnail="3s"
+/>
 
 ## Set up a new project
 
@@ -55,12 +64,7 @@ npm run astro add cloudflare
 
 ### Deploy via the Cloudflare dashboard
 
-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**.
-
-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:
+<Render file="deploy-to-pages-steps-with-preset" params={{ name: "Astro" }} />
 
 <div>
 
diff --git a/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx
@@ -26,14 +26,10 @@ The Elder.js template includes a number of pages and examples showing how to bui
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
-
-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**.
-
-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:
+<Render
+	file="deploy-to-pages-steps-with-preset"
+	params={{ name: "Elder.js" }}
+/>
 
 <PagesBuildPreset framework="elder-js" />
 
diff --git a/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx
diff --git a/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx
diff --git a/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx b/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx
diff --git a/src/content/docs/pages/framework-guides/deploy-anything.mdx b/src/content/docs/pages/framework-guides/deploy-anything.mdx
diff --git a/src/content/docs/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.mdx b/src/content/docs/pages/framework-guides/nextjs/deploy-a-static-nextjs-site.mdx
diff --git a/src/content/partials/pages/deploy-to-pages-steps-no-preset.mdx b/src/content/partials/pages/deploy-to-pages-steps-no-preset.mdx
diff --git a/src/content/partials/pages/deploy-to-pages-steps-with-preset.mdx b/src/content/partials/pages/deploy-to-pages-steps-with-preset.mdx
