+ );
+ }
+}
+
+
diff --git a/src/content/docs/pages/configuration/api.mdx b/src/content/docs/pages/configuration/api.mdx
index 30a3e16f33379b..d981d3dae97214 100644
--- a/src/content/docs/pages/configuration/api.mdx
+++ b/src/content/docs/pages/configuration/api.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: concept
title: REST API
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The [Pages API](/api/resources/pages/subresources/projects/methods/list/) empowers you to build automations and integrate Pages with your development workflow. At a high level, the API endpoints let you manage deployments and builds and configure projects. Cloudflare supports [Deploy Hooks](/pages/configuration/deploy-hooks/) for headless CMS deployments. Refer to the [API documentation](https://api.cloudflare.com/) for a full breakdown of object types and endpoints.
@@ -37,22 +41,23 @@ The API is even more powerful when combined with Cloudflare Workers: the easiest
Suppose we have a CMS that pulls data from live sources to compile a static output. You can keep the static content as recent as possible by triggering new builds periodically using the API.
```js
-const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
+const endpoint =
+ "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
export default {
- async scheduled(_, env) {
- const init = {
- method: "POST",
- headers: {
- "Content-Type": "application/json;charset=UTF-8",
- // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret
- "Authorization": `Bearer ${env.API_TOKEN}`,
- },
- };
-
- await fetch(endpoint, init);
- }
-}
+ async scheduled(_, env) {
+ const init = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json;charset=UTF-8",
+ // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret
+ Authorization: `Bearer ${env.API_TOKEN}`,
+ },
+ };
+
+ await fetch(endpoint, init);
+ },
+};
```
After you have deployed the JavaScript Worker, set a cron trigger in your Worker to run this script periodically. Refer to [Cron Triggers](/workers/configuration/cron-triggers/) for more details.
@@ -62,37 +67,41 @@ After you have deployed the JavaScript Worker, set a cron trigger in your Worker
Cloudflare Pages hosts and serves all project deployments on preview links. Suppose you want to keep your project private and prevent access to your old deployments. You can use the API to delete deployments after a month, so that they are no longer public online. The latest deployment for a branch cannot be deleted.
```js
-const endpoint = "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
+const endpoint =
+ "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const expirationDays = 7;
export default {
- async scheduled(_, env) {
- const init = {
- headers: {
- "Content-Type": "application/json;charset=UTF-8",
- // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret
- "Authorization": `Bearer ${env.API_TOKEN}`,
- },
- };
-
- const response = await fetch(endpoint, init);
- const deployments = await response.json();
-
- for (const deployment of deployments.result) {
- // Check if the deployment was created within the last x days (as defined by `expirationDays` above)
- if ((Date.now() - new Date(deployment.created_on)) / 86400000 > expirationDays) {
- // Delete the deployment
- await fetch(`${endpoint}/${deployment.id}`, {
- method: "DELETE",
- headers: {
- "Content-Type": "application/json;charset=UTF-8",
- "Authorization": `Bearer ${env.API_TOKEN}`,
- },
- });
- }
- }
- }
-}
+ async scheduled(_, env) {
+ const init = {
+ headers: {
+ "Content-Type": "application/json;charset=UTF-8",
+ // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret
+ Authorization: `Bearer ${env.API_TOKEN}`,
+ },
+ };
+
+ const response = await fetch(endpoint, init);
+ const deployments = await response.json();
+
+ for (const deployment of deployments.result) {
+ // Check if the deployment was created within the last x days (as defined by `expirationDays` above)
+ if (
+ (Date.now() - new Date(deployment.created_on)) / 86400000 >
+ expirationDays
+ ) {
+ // Delete the deployment
+ await fetch(`${endpoint}/${deployment.id}`, {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json;charset=UTF-8",
+ Authorization: `Bearer ${env.API_TOKEN}`,
+ },
+ });
+ }
+ }
+ },
+};
```
After you have deployed the JavaScript Worker, you can set a cron trigger in your Worker to run this script periodically. Refer to the [Cron Triggers guide](/workers/configuration/cron-triggers/) for more details.
@@ -103,40 +112,40 @@ Imagine you are working on a development team using Pages to build your websites
```js
const deploymentsEndpoint =
- "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
+ "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments";
const projectEndpoint =
- "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}";
+ "https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}";
export default {
- async fetch(request, env) {
- const init = {
- headers: {
- "content-type": "application/json;charset=UTF-8",
- // We recommend you store the API token as a secret using the Workers dashboard or using Wrangler as documented here: https://developers.cloudflare.com/workers/wrangler/commands/#secret
- "Authorization": `Bearer ${env.API_TOKEN}`,
- },
- };
-
- const style = `body { padding: 6em; font-family: sans-serif; } h1 { color: #f6821f }`;
- let content = "
`;
+ }
+
+ let html = `
Example Pages Project
@@ -148,17 +157,17 @@ export default {
`;
- return new Response(html, {
- headers: {
- "Content-Type": "text/html;charset=UTF-8",
- },
- });
- }
-}
+ return new Response(html, {
+ headers: {
+ "Content-Type": "text/html;charset=UTF-8",
+ },
+ });
+ },
+};
```
## Related resources
-* [Pages API Docs](/api/resources/pages/subresources/projects/methods/list/)
-* [Workers Getting Started Guide](/workers/get-started/guide/)
-* [Workers Cron Triggers](/workers/configuration/cron-triggers/)
+- [Pages API Docs](/api/resources/pages/subresources/projects/methods/list/)
+- [Workers Getting Started Guide](/workers/get-started/guide/)
+- [Workers Cron Triggers](/workers/configuration/cron-triggers/)
diff --git a/src/content/docs/pages/configuration/branch-build-controls.mdx b/src/content/docs/pages/configuration/branch-build-controls.mdx
index 512eb0684bb091..20688c25f56908 100644
--- a/src/content/docs/pages/configuration/branch-build-controls.mdx
+++ b/src/content/docs/pages/configuration/branch-build-controls.mdx
@@ -1,10 +1,14 @@
---
pcx_content_type: concept
title: Branch deployment controls
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Render } from "~/components"
+import { Render } from "~/components";
When connected to your git repository, Pages allows you to control which environments and branches you would like to automatically deploy to. By default, Pages will trigger a deployment any time you commit to either your production or preview environment. However, with branch deployment controls, you can configure automatic deployments to suit your preference on a per project basis.
@@ -12,10 +16,8 @@ When connected to your git repository, Pages allows you to control which environ
:::caution[Direct Upload]
-
-
:::
To configure deployment options, go to your Pages project > **Settings** > **Builds & deployments** > **Configure Production deployments**. Pages will default to setting your production environment to the branch you first push, but you can set your production to another branch if you choose.
@@ -26,33 +28,31 @@ You can also enable or disable automatic deployment behavior on the production b
When configuring automatic preview deployments, there are three options to choose from.
-* **All non-Production branches**: By default, Pages will automatically deploy any and every commit to a preview branch.
-* **None**: Turns off automatic builds for all preview branches.
-* **Custom branches**: Customize the automatic deployments of certain preview branches.
+- **All non-Production branches**: By default, Pages will automatically deploy any and every commit to a preview branch.
+- **None**: Turns off automatic builds for all preview branches.
+- **Custom branches**: Customize the automatic deployments of certain preview branches.
### Custom preview branch control
By selecting **Custom branches**, you can specify branches you wish to include and exclude from automatic deployments in the provided configuration fields. The configuration fields can be filled in two ways:
-* **Static branch names**: Enter the precise name of the branch you are looking to include or exclude (for example, staging or dev).
-* **Wildcard syntax**: Use wildcards to match multiple branches. You can specify wildcards at the start or end of your rule. The order of execution for the configuration is (1) Excludes, (2) Includes, (3) Skip. Pages will process the exclude configuration first, then go to the include configuration. If a branch does not match either then it will be skipped.
+- **Static branch names**: Enter the precise name of the branch you are looking to include or exclude (for example, staging or dev).
+- **Wildcard syntax**: Use wildcards to match multiple branches. You can specify wildcards at the start or end of your rule. The order of execution for the configuration is (1) Excludes, (2) Includes, (3) Skip. Pages will process the exclude configuration first, then go to the include configuration. If a branch does not match either then it will be skipped.
:::note[Wildcard syntax]
-
A wildcard (`*`) is a character that is used within rules. It can be placed alone to match anything or placed at the start or end of a rule to allow for better control over branch configuration. A wildcard will match zero or more characters.For example, if you wanted to match all branches that started with `fix/` then you would create the rule `fix/*` to match strings like `fix/1`, `fix/bugs`or `fix/`.
-
:::
**Example 1:**
If you want to enforce branch prefixes such as `fix/`, `feat/`, or `chore/` with wildcard syntax, you can include and exclude certain branches with the following rules:
-* Include Preview branches:
+- Include Preview branches:
`fix/*`, `feat/*`, `chore/*`
-* Exclude Preview branches:
+- Exclude Preview branches:
\`\`
Here Pages will include any branches with the indicated prefixes and exclude everything else. In this example, the excluding option is left empty.
@@ -61,22 +61,22 @@ Here Pages will include any branches with the indicated prefixes and exclude eve
If you wanted to prevent [dependabot](https://github.com/dependabot) from creating a deployment for each PR it creates, you can exclude those branches with the following:
-* Include Preview branches:
+- Include Preview branches:
`*`
-* Exclude Preview branches:
+- Exclude Preview branches:
`dependabot/*`
-Here Pages will include all branches except any branch starting with `dependabot`. In this example, the excluding option means any `dependabot/` branches will not be built.
+Here Pages will include all branches except any branch starting with `dependabot`. In this example, the excluding option means any `dependabot/` branches will not be built.
**Example 3:**
If you only want to deploy release-prefixed branches, then you could use the following rules:
-* Include Preview branches:
+- Include Preview branches:
`release/*`
-* Exclude Preview branches:
+- Exclude Preview branches:
`*`
This will deploy only branches starting with `release/`.
diff --git a/src/content/docs/pages/configuration/build-caching.mdx b/src/content/docs/pages/configuration/build-caching.mdx
index f2a15dac4433e9..05cefebc7a0f17 100644
--- a/src/content/docs/pages/configuration/build-caching.mdx
+++ b/src/content/docs/pages/configuration/build-caching.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Build caching
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Improve Pages build times by caching dependencies and build output between builds with a project-wide shared cache.
diff --git a/src/content/docs/pages/configuration/build-configuration.mdx b/src/content/docs/pages/configuration/build-configuration.mdx
index 1a193fd0d1e003..cc5bbf8821e388 100644
--- a/src/content/docs/pages/configuration/build-configuration.mdx
+++ b/src/content/docs/pages/configuration/build-configuration.mdx
@@ -2,6 +2,11 @@
pcx_content_type: concept
title: Build configuration
rss: https://github.com/cloudflare/cloudflare-docs/commits/production/src/content/docs/pages/configuration/build-configuration.mdx.atom
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Details, PagesBuildPresetsTable } from "~/components";
diff --git a/src/content/docs/pages/configuration/build-image.mdx b/src/content/docs/pages/configuration/build-image.mdx
index e9cc262c315685..8a2412df6075e6 100644
--- a/src/content/docs/pages/configuration/build-image.mdx
+++ b/src/content/docs/pages/configuration/build-image.mdx
@@ -2,6 +2,11 @@
pcx_content_type: concept
title: Build image
rss: https://github.com/cloudflare/cloudflare-docs/commits/production/src/content/partials/pages/_platform-language-support-and-tools.atom
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
diff --git a/src/content/docs/pages/configuration/build-watch-paths.mdx b/src/content/docs/pages/configuration/build-watch-paths.mdx
index 39de1b7f43f61e..8b37e5ab787c01 100644
--- a/src/content/docs/pages/configuration/build-watch-paths.mdx
+++ b/src/content/docs/pages/configuration/build-watch-paths.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Build watch paths
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
When you connect a git repository to Pages, by default a change to any file in the repository will trigger a Pages build. You can configure Pages to include or exclude specific paths to specify if Pages should skip a build for a given path. This can be especially helpful if you are using a monorepo project structure and want to limit the amount of builds being kicked off.
diff --git a/src/content/docs/pages/configuration/custom-domains.mdx b/src/content/docs/pages/configuration/custom-domains.mdx
index 6511a1024aab72..2023d1ab793d04 100644
--- a/src/content/docs/pages/configuration/custom-domains.mdx
+++ b/src/content/docs/pages/configuration/custom-domains.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Custom domains
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/configuration/debugging-pages.mdx b/src/content/docs/pages/configuration/debugging-pages.mdx
index afc86858ac2c0b..86c59968c73406 100644
--- a/src/content/docs/pages/configuration/debugging-pages.mdx
+++ b/src/content/docs/pages/configuration/debugging-pages.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Debugging Pages
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
When setting up your Pages project, you may encounter various errors that prevent you from successfully deploying your site. This guide gives an overview of some common errors and solutions.
diff --git a/src/content/docs/pages/configuration/deploy-hooks.mdx b/src/content/docs/pages/configuration/deploy-hooks.mdx
index df0b44477ba75d..e1a61856da7015 100644
--- a/src/content/docs/pages/configuration/deploy-hooks.mdx
+++ b/src/content/docs/pages/configuration/deploy-hooks.mdx
@@ -1,14 +1,18 @@
---
pcx_content_type: concept
title: Deploy Hooks
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
With Deploy Hooks, you can trigger deployments using event sources beyond commits in your source repository. Each event source may obtain its own unique URL, which will receive HTTP POST requests in order to initiate new deployments. This feature allows you to integrate Pages with new or existing workflows. For example, you may:
-* Automatically deploy new builds whenever content in a Headless CMS changes
-* Implement a fully customized CI/CD pipeline, deploying only under desired conditions
-* Schedule a CRON trigger to update your website on a fixed timeline
+- Automatically deploy new builds whenever content in a Headless CMS changes
+- Implement a fully customized CI/CD pipeline, deploying only under desired conditions
+- Schedule a CRON trigger to update your website on a fixed timeline
To create a Deploy Hook:
diff --git a/src/content/docs/pages/configuration/early-hints.mdx b/src/content/docs/pages/configuration/early-hints.mdx
index f2b940f23b8a2b..10c45ea5df6f57 100644
--- a/src/content/docs/pages/configuration/early-hints.mdx
+++ b/src/content/docs/pages/configuration/early-hints.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: concept
title: Early Hints
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
[Early Hints](/cache/advanced-configuration/early-hints/) help the browser to load webpages faster. Early Hints is enabled automatically on all `pages.dev` domains and custom domains.
@@ -27,9 +31,9 @@ Pages will attach this `Link: ; rel=preload; as=style` header. Earl
In order to make the authoring experience easier, Pages also automatically generates `Link` headers from any `` HTML elements with the following attributes:
-* `href`
-* `as` (optional)
-* `rel` (one of `preconnect`, `preload`, or `modulepreload`)
+- `href`
+- `as` (optional)
+- `rel` (one of `preconnect`, `preload`, or `modulepreload`)
`` elements which contain any other additional attributes (for example, `fetchpriority`, `crossorigin` or `data-do-not-generate-a-link-header`) will not be used to generate `Link` headers in order to prevent accidentally losing any custom prioritization logic that would otherwise be dropped as an Early Hint.
@@ -37,10 +41,10 @@ This allows you to directly create Early Hints as you are writing your document,
```html
-
-
-
-
+
+
+
+
```
@@ -55,8 +59,6 @@ Remove any automatically generated `Link` headers by adding the following to you
:::caution
-
Automatic `Link` header generation should not have any negative performance impact on your website. If you need to disable this feature, contact us by letting us know about your circumstance in our [Discord server](https://discord.com/invite/cloudflaredev).
-
:::
diff --git a/src/content/docs/pages/configuration/git-integration/github-integration.mdx b/src/content/docs/pages/configuration/git-integration/github-integration.mdx
index 0ffe8cdbc9ba06..1b50becac305f8 100644
--- a/src/content/docs/pages/configuration/git-integration/github-integration.mdx
+++ b/src/content/docs/pages/configuration/git-integration/github-integration.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: GitHub integration
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
You can connect each Cloudflare Pages project to a GitHub repository, and Cloudflare will automatically deploy your code every time you push a change to a branch.
diff --git a/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx b/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx
index 8a829d389418d2..b43ac535d77795 100644
--- a/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx
+++ b/src/content/docs/pages/configuration/git-integration/gitlab-integration.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: GitLab integration
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
You can connect each Cloudflare Pages project to a GitLab repository, and Cloudflare will automatically deploy your code every time you push a change to a branch.
diff --git a/src/content/docs/pages/configuration/git-integration/index.mdx b/src/content/docs/pages/configuration/git-integration/index.mdx
index 24ede8576e9dc4..2af5d137d3f6b1 100644
--- a/src/content/docs/pages/configuration/git-integration/index.mdx
+++ b/src/content/docs/pages/configuration/git-integration/index.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Git integration
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
You can connect each Cloudflare Pages project to a [GitHub](/pages/configuration/git-integration/github-integration) or [GitLab](/pages/configuration/git-integration/gitlab-integration) repository, and Cloudflare will automatically deploy your code every time you push a change to a branch.
diff --git a/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx b/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx
index 5da836dddb7e2e..b452172156a821 100644
--- a/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx
+++ b/src/content/docs/pages/configuration/git-integration/troubleshooting.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Troubleshooting builds
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
If your git integration is experiencing issues, you may find the following banners in the Deployment page of your Pages project.
diff --git a/src/content/docs/pages/configuration/headers.mdx b/src/content/docs/pages/configuration/headers.mdx
index d1c2b2fb354773..6c1ae275c017e8 100644
--- a/src/content/docs/pages/configuration/headers.mdx
+++ b/src/content/docs/pages/configuration/headers.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Headers
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/configuration/index.mdx b/src/content/docs/pages/configuration/index.mdx
index ebfd57c6f5bf9d..5d0948e1584569 100644
--- a/src/content/docs/pages/configuration/index.mdx
+++ b/src/content/docs/pages/configuration/index.mdx
@@ -3,9 +3,15 @@ pcx_content_type: navigation
title: Configuration
sidebar:
order: 5
-
+ group:
+ hideIndex: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
diff --git a/src/content/docs/pages/configuration/monorepos.mdx b/src/content/docs/pages/configuration/monorepos.mdx
index b5e31426fc153d..9a24915bba5e71 100644
--- a/src/content/docs/pages/configuration/monorepos.mdx
+++ b/src/content/docs/pages/configuration/monorepos.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Monorepos
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
While some apps are built from a single repository, Pages also supports apps with more complex setups. A monorepo is a repository that has multiple subdirectories each containing its own application.
diff --git a/src/content/docs/pages/configuration/preview-deployments.mdx b/src/content/docs/pages/configuration/preview-deployments.mdx
index e989051a614792..f1118b81ab98da 100644
--- a/src/content/docs/pages/configuration/preview-deployments.mdx
+++ b/src/content/docs/pages/configuration/preview-deployments.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Preview deployments
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Preview deployments allow you to preview new versions of your project without deploying it to production. To view preview deployments:
diff --git a/src/content/docs/pages/configuration/redirects.mdx b/src/content/docs/pages/configuration/redirects.mdx
index 9d977a129176c9..16fe18f1af5524 100644
--- a/src/content/docs/pages/configuration/redirects.mdx
+++ b/src/content/docs/pages/configuration/redirects.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: concept
title: Redirects
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/configuration/rollbacks.mdx b/src/content/docs/pages/configuration/rollbacks.mdx
index 6f6e0cf5d112db..202cb0ab287687 100644
--- a/src/content/docs/pages/configuration/rollbacks.mdx
+++ b/src/content/docs/pages/configuration/rollbacks.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: concept
title: Rollbacks
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Rollbacks allow you to instantly revert your project to a previous production deployment.
@@ -14,5 +18,5 @@ In order to perform a rollback, go to **Deployments** in your Pages project. Bro
## Related resources
-* [Preview Deployments](/pages/configuration/preview-deployments/)
-* [Branch deployment controls](/pages/configuration/branch-build-controls/)
+- [Preview Deployments](/pages/configuration/preview-deployments/)
+- [Branch deployment controls](/pages/configuration/branch-build-controls/)
diff --git a/src/content/docs/pages/configuration/serving-pages.mdx b/src/content/docs/pages/configuration/serving-pages.mdx
index 88cc7925f85f6d..ae1eb5b28f2f8c 100644
--- a/src/content/docs/pages/configuration/serving-pages.mdx
+++ b/src/content/docs/pages/configuration/serving-pages.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: concept
title: Serving Pages
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Cloudflare Pages includes a number of defaults for serving your Pages sites. This page details some of those decisions, so you can understand how Pages works, and how you might want to override some of the default behaviors.
@@ -34,10 +38,8 @@ Note that when you use Cloudflare Pages, the static assets that you upload as pa
:::note[Purging the cache]
-
If you notice stale assets being served after a new deployment, go to your zone and then **Caching** > **Configuration** > [**Purge Everything**](/cache/how-to/purge-cache/purge-everything/) to ensure the latest deployment gets served.
-
:::
### Behavior
@@ -68,10 +70,8 @@ Server: cloudflare
:::note
-
The [`Cf-Ray`](/fundamentals/reference/cloudflare-ray-id/) header is unique to Cloudflare.
-
:::
```txt title="Headers sometimes added"
diff --git a/src/content/docs/pages/demos.mdx b/src/content/docs/pages/demos.mdx
index dfffb90331d254..423594422fc9e2 100644
--- a/src/content/docs/pages/demos.mdx
+++ b/src/content/docs/pages/demos.mdx
@@ -3,10 +3,18 @@ pcx_content_type: navigation
title: Demos and architectures
sidebar:
order: 8
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { ExternalResources, GlossaryTooltip, ResourcesBySelector } from "~/components"
+import {
+ ExternalResources,
+ GlossaryTooltip,
+ ResourcesBySelector,
+} from "~/components";
Learn how you can use Pages within your existing application and architecture.
@@ -20,4 +28,11 @@ Explore the following demo applications
Explore the following reference architectures that use Pages:
-
+
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
index 7107b1a3478ecf..9855d2935536f8 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-blazor-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Blazor
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
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
index 271f46cda05e9c..455a73f2da9425 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-brunch-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Brunch
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 4ebebb47e4849a..159b8da7ceba8a 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-docusaurus-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Docusaurus
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, PackageManagers } from "~/components";
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
index 08fd1c34b47839..31d1d80e7c40fc 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-gatsby-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Gatsby
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 33695ea2811bd7..9538063afde331 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-gridsome-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Gridsome
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 8f8755426ccd95..7a6e66fe62ded1 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-hexo-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Hexo
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
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
index 5561420fdb0ae7..a056faf10e9311 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx
@@ -3,6 +3,11 @@ pcx_content_type: how-to
title: Hono
tags:
- Hono
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
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
index c85f68b1879aeb..a3a4a69cf68bdc 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-hugo-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Hugo
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, TabItem, Tabs } from "~/components";
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
index bbcf5743dfd054..12fa493f4c52bd 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-jekyll-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Jekyll
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 3e9ce38e3b97ac..9cd121858c0946 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-nuxt-site.mdx
@@ -3,6 +3,11 @@ pcx_content_type: how-to
title: Nuxt
head: []
description: Web framework making Vue.js-based development simple and powerful.
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
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
index 29eb7dd288221e..cfe03178980c9a 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-pelican-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Pelican
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 2f6da012b8530f..acf22260ddaf42 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-preact-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Preact
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
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
index 7a908ee5b17a5c..323c6bf353f5e0 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Qwik
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, PackageManagers } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx
index ae987d955a6f2b..d22e30594b54cf 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-react-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: React
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, PackageManagers } from "~/components";
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
index 1442cdfad7a44e..c07f752481d08b 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-remix-site.mdx
@@ -2,6 +2,11 @@
pcx_content_type: how-to
title: Remix
tags: [Remix]
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
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
index 050e41657c2359..1584b32d69d04c 100644
--- 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
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: SolidStart
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render, PackageManagers } from "~/components";
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
index a40430c49e8e6d..e70f591a9d3d3c 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-sphinx-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Sphinx
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
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
index b1ef0681ba76be..5b2a7e2ac36f6a 100644
--- 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
@@ -2,6 +2,11 @@
pcx_content_type: how-to
title: SvelteKit
description: Learn how to create and deploy a SvelteKit application to Cloudflare Pages using the create-cloudflare CLI
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, PackageManagers } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx b/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx
index 1c7b2307496964..29d5f800a7293d 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-vite3-project.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Vite 3
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render, PackageManagers } from "~/components";
@@ -76,4 +81,3 @@ 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/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx
index d3dfe1569e22af..4510b656ba68e7 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-vitepress-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: VitePress
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, TabItem, Tabs } from "~/components";
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
index 5f87abcd636e3b..8058d2308ca6e5 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-vue-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Vue
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, PackageManagers } from "~/components";
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
index 2e2a581537479e..3b9f74234a046c 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-zola-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Zola
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index b2c8b567582d53..4f8ef5579ec06c 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-analog-site.mdx
@@ -3,6 +3,11 @@ pcx_content_type: how-to
title: Analog
head: []
description: The fullstack Angular meta-framework
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
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
index eddc51fc2644af..45089bb0ac446c 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-angular-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Angular
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render, PackageManagers } from "~/components";
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
index 7b2c50cad5e534..9c2bdfce2c31ef 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-astro-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Astro
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
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
index 8d573a75021ee6..d5de912b7da1e7 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-elderjs-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Elder.js
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 5244c9227c668a..bd4418d70faf00 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-eleventy-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Eleventy
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index eb1cedfc801402..7ef8651db93c91 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-emberjs-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Ember
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
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
index 36744cb08bbbae..262a49e204eacb 100644
--- a/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-an-mkdocs-site.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: MkDocs
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/deploy-anything.mdx b/src/content/docs/pages/framework-guides/deploy-anything.mdx
index 628610031fd58e..2732c0266b977d 100644
--- a/src/content/docs/pages/framework-guides/deploy-anything.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-anything.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Static HTML
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Details, Render } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/index.mdx b/src/content/docs/pages/framework-guides/index.mdx
index 8a419a54f21386..40f8a6217872a2 100644
--- a/src/content/docs/pages/framework-guides/index.mdx
+++ b/src/content/docs/pages/framework-guides/index.mdx
@@ -4,9 +4,15 @@ pcx_content_type: navigation
title: Framework guides
sidebar:
order: 3
-
+ group:
+ hideIndex: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
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
index 88f0742bb6b5c3..e6e93a0a4ab74b 100644
--- 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
@@ -7,6 +7,11 @@ head:
- tag: title
content: Get started | Static site | Next.js apps
description: Deploy a static site built using Next.js to Cloudflare Pages
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PagesBuildPreset, Render } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/nextjs/index.mdx b/src/content/docs/pages/framework-guides/nextjs/index.mdx
index 1f6ae24bc2ab40..ea49010e87f281 100644
--- a/src/content/docs/pages/framework-guides/nextjs/index.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/index.mdx
@@ -4,19 +4,23 @@ pcx_content_type: navigation
title: Next.js
head: []
description: React framework for building full-stack web applications.
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing, Stream } from "~/components"
+import { DirectoryListing, Stream } from "~/components";
[Next.js](https://nextjs.org) is an open-source React framework for creating websites and applications.
### Video Tutorial
-
-
\ No newline at end of file
+
diff --git a/src/content/docs/pages/framework-guides/nextjs/resources.mdx b/src/content/docs/pages/framework-guides/nextjs/resources.mdx
index c3e1a0dbad5a42..8923f3206fe418 100644
--- a/src/content/docs/pages/framework-guides/nextjs/resources.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/resources.mdx
@@ -7,12 +7,17 @@ sidebar:
head:
- tag: title
content: Additional resources | Next.js
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { ResourcesBySelector, ExternalResources } from "~/components"
+import { ResourcesBySelector, ExternalResources } from "~/components";
## Demo apps
For demo applications using Next.js, refer to the following resources:
-
\ No newline at end of file
+
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx
index c43dced68f8795..a9a5388d196c8f 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/advanced.mdx
@@ -6,6 +6,11 @@ sidebar:
head:
- tag: title
content: Advanced Usage
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
## Custom Worker Entrypoint
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx
index 572423a57ad972..194698ab488d54 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/bindings.mdx
@@ -6,6 +6,11 @@ sidebar:
head:
- tag: title
content: Using bindings in your Next.js app
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Once you have [set up next-on-pages](/pages/framework-guides/nextjs/ssr/get-started/), you can access [bindings](/workers/runtime-apis/bindings/) from any route of your Next.js app via `getRequestContext`:
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx
index bfce53019e5680..1b7d6fe9264fb9 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/caching.mdx
@@ -4,7 +4,11 @@ title: Caching
head:
- tag: title
content: Caching and data revalidation in your Next.js app
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
[`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) supports [caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) and [revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) data returned by subrequests you make in your app by calling [`fetch()`](/workers/runtime-apis/fetch/).
@@ -25,10 +29,8 @@ When you write cached data to Workers KV, you write to storage that can be read
:::note
-
Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be reflected globally.
-
:::
To use Workers KV as the cache for your Next.js app, [add a KV binding](/pages/functions/bindings/#kv-namespaces) to your Pages project, and set the name of the binding to `__NEXT_ON_PAGES__KV_SUSPENSE_CACHE`.
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx
index f5e6166aee74c6..9d532c92dfe1d2 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/get-started.mdx
@@ -7,6 +7,11 @@ head:
- tag: title
content: Get started | Full-stack (SSR) | Next.js apps
description: Deploy a full-stack Next.js app to Cloudflare Pages
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PackageManagers, WranglerConfig } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx
index 7863b6462c8b86..6af6051e10de67 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/index.mdx
@@ -4,16 +4,21 @@ pcx_content_type: navigation
title: Full-stack (SSR)
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
[Next.js](https://nextjs.org) is an open-source React.js framework for building full-stack applications. This section helps you deploy a full-stack Next.js project to Cloudflare Pages using [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages/tree/main/packages/next-on-pages/docs).
:::note
You should consider using [`@opennextjs/cloudflare`](https://opennext.js.org/cloudflare), which allows you to build and deploy Next.js apps to [Cloudflare Workers](/workers/static-assets/), use [Node.js APIs](/workers/runtime-apis/nodejs/) that Cloudflare Workers supports, and supports additional Next.js features.
-If you're coming from Vercel, you can easily migrate your Next.js app to Cloudflare by using [Diverce](https://github.com/ygwyg/diverce), which will automatically add OpenNext to your project and create a pull request that makes it deployable to Cloudflare.
+If you're coming from Vercel, you can easily migrate your Next.js app to Cloudflare by using [Diverce](https://github.com/ygwyg/diverce), which will automatically add OpenNext to your project and create a pull request that makes it deployable to Cloudflare.
:::
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx
index 6a7fbacbcff228..bb61aaafdc4e9a 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/static-assets.mdx
@@ -4,7 +4,11 @@ title: Routing static assets
head:
- tag: title
content: Routing static assets | Full-stack (SSR) | Next.js apps
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
When you use a JavaScript framework like Next.js on Cloudflare Pages, the framework adapter (ex: `@cloudflare/next-on-pages`) automatically generates a [`_routes.json` file](/pages/functions/routing/#create-a-_routesjson-file), which defines specific paths of your app's static assets. This file tells Cloudflare, `for these paths, don't run the Worker, you can just serve the static asset on this path` (an image, a chunk of client-side JavaScript, etc.)
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx
index 69273cd8afb0d4..c51c0b8bd25334 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/supported-features.mdx
@@ -4,6 +4,11 @@ title: Supported features
head:
- tag: title
content: Supported features
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Details } from "~/components";
diff --git a/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx b/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx
index a72f33818d6f7c..9714c3326a9788 100644
--- a/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx
+++ b/src/content/docs/pages/framework-guides/nextjs/ssr/troubleshooting.mdx
@@ -4,7 +4,11 @@ title: Troubleshooting
head:
- tag: title
content: Troubleshooting | Full-stack (SSR) | Next.js apps
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Learn more about troubleshooting issues with your Full-stack (SSR) Next.js apps using Cloudflare.
@@ -22,7 +26,7 @@ export const runtime = "edge";
If you are still using the Next.js [Pages router](https://nextjs.org/docs/pages), for page routes, you must use `'experimental-edge'` instead of `'edge'`.
:::
-***
+---
## App router
@@ -62,31 +66,31 @@ You must call `getRequestContext` within the function that handles your route
Don't do this:
```js null {5}
-import { getRequestContext } from '@cloudflare/next-on-pages'
+import { getRequestContext } from "@cloudflare/next-on-pages";
-export const runtime = 'edge'
+export const runtime = "edge";
-const myVariable = getRequestContext().env.MY_VARIABLE
+const myVariable = getRequestContext().env.MY_VARIABLE;
export async function GET(request) {
- return new Response(myVariable)
+ return new Response(myVariable);
}
```
Instead, do this:
```js null {6}
-import { getRequestContext } from '@cloudflare/next-on-pages'
+import { getRequestContext } from "@cloudflare/next-on-pages";
-export const runtime = 'edge'
+export const runtime = "edge";
export async function GET(request) {
- const myVariable = getRequestContext().env.MY_VARIABLE
- return new Response(myVariable)
+ const myVariable = getRequestContext().env.MY_VARIABLE;
+ return new Response(myVariable);
}
```
-***
+---
## Pages router
@@ -111,8 +115,6 @@ export async function getStaticPaths() {
:::caution
-
Note that the `paths` array cannot be empty since an empty `paths` array causes Next.js to ignore the provided `fallback` value.
-
:::
diff --git a/src/content/docs/pages/functions/advanced-mode.mdx b/src/content/docs/pages/functions/advanced-mode.mdx
index 5d8f9f34422943..84a9a80d6b7a69 100644
--- a/src/content/docs/pages/functions/advanced-mode.mdx
+++ b/src/content/docs/pages/functions/advanced-mode.mdx
@@ -3,10 +3,14 @@ pcx_content_type: how-to
title: Advanced mode
sidebar:
order: 9
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { TabItem, Tabs } from "~/components"
+import { TabItem, Tabs } from "~/components";
Advanced mode allows you to develop your Pages Functions with a `_worker.js` file rather than the `/functions` directory.
@@ -24,17 +28,17 @@ After making a `_worker.js` file in your output directory, add the following cod
```js
export default {
- async fetch(request, env) {
- const url = new URL(request.url);
- if (url.pathname.startsWith('/api/')) {
- // TODO: Add your custom /api/* logic here.
- return new Response('Ok');
- }
- // Otherwise, serve the static assets.
- // Without this, the Worker will error and no assets will be served.
- return env.ASSETS.fetch(request);
- },
-}
+ async fetch(request, env) {
+ const url = new URL(request.url);
+ if (url.pathname.startsWith("/api/")) {
+ // TODO: Add your custom /api/* logic here.
+ return new Response("Ok");
+ }
+ // Otherwise, serve the static assets.
+ // Without this, the Worker will error and no assets will be served.
+ return env.ASSETS.fetch(request);
+ },
+};
```
@@ -43,20 +47,20 @@ export default {
// Note: You would need to compile your TS into JS and output it as a `_worker.js` file. We do not read `_worker.ts`
interface Env {
- ASSETS: Fetcher;
+ ASSETS: Fetcher;
}
export default {
- async fetch(request, env): Promise {
- const url = new URL(request.url);
- if (url.pathname.startsWith('/api/')) {
- // TODO: Add your custom /api/* logic here.
- return new Response('Ok');
- }
- // Otherwise, serve the static assets.
- // Without this, the Worker will error and no assets will be served.
- return env.ASSETS.fetch(request);
- },
+ async fetch(request, env): Promise {
+ const url = new URL(request.url);
+ if (url.pathname.startsWith("/api/")) {
+ // TODO: Add your custom /api/* logic here.
+ return new Response("Ok");
+ }
+ // Otherwise, serve the static assets.
+ // Without this, the Worker will error and no assets will be served.
+ return env.ASSETS.fetch(request);
+ },
} satisfies ExportedHandler;
```
@@ -64,10 +68,10 @@ export default {
In the above code, you have configured your Function to return a response under all requests headed for `/api/`. Otherwise, your Function will fallback to returning static assets.
-* The `env.ASSETS.fetch()` function will allow you to return assets on a given request.
-* `env` is the object that contains your environment variables and bindings.
-* `ASSETS` is a default Function binding that allows communication between your Function and Pages' asset serving resource.
-* `fetch()` calls to Pages' asset-serving resource and serves the requested asset.
+- The `env.ASSETS.fetch()` function will allow you to return assets on a given request.
+- `env` is the object that contains your environment variables and bindings.
+- `ASSETS` is a default Function binding that allows communication between your Function and Pages' asset serving resource.
+- `fetch()` calls to Pages' asset-serving resource and serves the requested asset.
## Migrate from Workers
diff --git a/src/content/docs/pages/functions/api-reference.mdx b/src/content/docs/pages/functions/api-reference.mdx
index c0be67b7c32c5a..3f791768b383e4 100644
--- a/src/content/docs/pages/functions/api-reference.mdx
+++ b/src/content/docs/pages/functions/api-reference.mdx
@@ -5,7 +5,11 @@ sidebar:
order: 3
head: []
description: Learn about the APIs used within Pages Functions.
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The following methods can be used to configure your Pages Function.
@@ -16,24 +20,37 @@ The following methods can be used to configure your Pages Function.
The `onRequest` method will be called unless a more specific `onRequestVerb` method is exported. For example, if both `onRequest` and `onRequestGet` are exported, only `onRequestGet` will be called for `GET` requests.
-* onRequest(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all requests no matter what the request method is, as long as no specific request verb (like one of the methods below) is exported.
-* onRequestGet(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `GET` requests.
-* onRequestPost(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `POST` requests.
-* onRequestPatch(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `PATCH` requests.
-* onRequestPut(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `PUT` requests.
-* onRequestDelete(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `DELETE` requests.
-* onRequestHead(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `HEAD` requests.
-* onRequestOptions(context[EventContext](#eventcontext)) Response | Promise\
- * This function will be invoked on all `OPTIONS` requests.
+- onRequest(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all requests no matter what the request method is, as long as no specific request verb (like one of the methods below) is exported.
+
+- onRequestGet(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all `GET` requests.
+
+- onRequestPost(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all `POST` requests.
+
+- onRequestPatch(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all `PATCH` requests.
+
+- onRequestPut(context[EventContext](#eventcontext)) Response | Promise\
+ - This function will be invoked on all `PUT` requests.
+- onRequestDelete(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all `DELETE` requests.
+
+- onRequestHead(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all `HEAD` requests.
+
+- onRequestOptions(context[EventContext](#eventcontext)) Response | Promise\
+
+ - This function will be invoked on all `OPTIONS` requests.
### `env.ASSETS.fetch()`
@@ -45,32 +62,31 @@ You can pass a [Request object](/workers/runtime-apis/request/), URL string, or
### `EventContext`
-
The following are the properties on the `context` object which are passed through on the `onRequest` methods:
-* `request` [Request](/workers/runtime-apis/request/)
+- `request` [Request](/workers/runtime-apis/request/)
This is the incoming [Request](/workers/runtime-apis/request/).
-* `functionPath` string
+- `functionPath` string
This is the path of the request.
-* waitUntil(promisePromise\) void
+- waitUntil(promisePromise\) void
Refer to [`waitUntil` documentation](/workers/runtime-apis/context/#waituntil) for more information.
-* passThroughOnException() void
+- passThroughOnException() void
Refer to [`passThroughOnException` documentation](/workers/runtime-apis/context/#passthroughonexception) for more information. Note that this will not work on an [advanced mode project](/pages/functions/advanced-mode/).
-* next(input?Request | string, init?RequestInit) Promise\
+- next(input?Request | string, init?RequestInit) Promise\
Passes the request through to the next Function or to the asset server if no other Function is available.
-* `env` [EnvWithFetch](#envwithfetch)
+- `env` [EnvWithFetch](#envwithfetch)
-* `params` Params\
+- `params` Params\
Holds the values from [dynamic routing](/pages/functions/routing/#dynamic-routes).
@@ -78,7 +94,7 @@ The following are the properties on the `context` object which are passed throug
```js
{
- user: "nevi"
+ user: "nevi";
}
```
@@ -86,15 +102,13 @@ The following are the properties on the `context` object which are passed throug
```js
export function onRequest(context) {
- return new Response(`Hello ${context.params.user}`);
+ return new Response(`Hello ${context.params.user}`);
}
```
Which would return `"Hello nevi"`.
-* `data` Data
-
-
+- `data` Data
### `EnvWithFetch`
diff --git a/src/content/docs/pages/functions/bindings.mdx b/src/content/docs/pages/functions/bindings.mdx
index b613d9c59ced87..b6f11dce96b19c 100644
--- a/src/content/docs/pages/functions/bindings.mdx
+++ b/src/content/docs/pages/functions/bindings.mdx
@@ -3,6 +3,11 @@ pcx_content_type: how-to
title: Bindings
sidebar:
order: 7
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render, TabItem, Tabs, WranglerConfig } from "~/components";
@@ -637,6 +642,7 @@ compatibility_date = "2024-09-23"
To bind your Hyperdrive config to your Pages Function, you can configure a Hyperdrive binding in the [Wrangler configuration file](/pages/functions/wrangler-configuration/#hyperdrive) or the Cloudflare dashboard.
To configure a Hyperdrive binding 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**.
3. Select your Pages project > **Settings**.
@@ -837,4 +843,5 @@ To add secrets to your Pages project:
You use secrets the same way as environment variables. When setting secrets with Wrangler or in the Cloudflare dashboard, it needs to be done before a deployment that uses those secrets. For more guidance, refer to [Environment variables](#environment-variables).
### Local development with secrets
-
\ No newline at end of file
+
+
diff --git a/src/content/docs/pages/functions/debugging-and-logging.mdx b/src/content/docs/pages/functions/debugging-and-logging.mdx
index e384356aaa6ef1..9f3ccbc7260e5a 100644
--- a/src/content/docs/pages/functions/debugging-and-logging.mdx
+++ b/src/content/docs/pages/functions/debugging-and-logging.mdx
@@ -3,7 +3,11 @@ pcx_content_type: how-to
title: Debugging and logging
sidebar:
order: 12
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Access your Functions logs by using the Cloudflare dashboard or the [Wrangler CLI](/workers/wrangler/commands/#deployment-tail).
@@ -12,11 +16,11 @@ Logs are a powerful debugging tool that can help you test and monitor the behavi
Logs provide detailed information about events and can give insight into:
-* Successful or failed requests to your Functions.
-* Uncaught exceptions thrown by your Functions.
-* Custom `console.log`s declared within your Functions.
-* Production issues that cannot be easily reproduced.
-* Real-time view of incoming requests to your application.
+- Successful or failed requests to your Functions.
+- Uncaught exceptions thrown by your Functions.
+- Custom `console.log`s declared within your Functions.
+- Production issues that cannot be easily reproduced.
+- Real-time view of incoming requests to your application.
There are two ways to start a logging session:
@@ -27,13 +31,15 @@ There are two ways to start a logging session:
Custom logs are `console.log()` statements that you can add yourself inside your Functions. When streaming logs for deployments that contain these Functions, the statements will appear in both `wrangler pages deployment tail` and dashboard outputs.
-Below is an example of a custom `console.log` statement inside a Pages Function:
+Below is an example of a custom `console.log` statement inside a Pages Function:
```js
export async function onRequest(context) {
- console.log(`[LOGGING FROM /hello]: Request came from ${context.request.url}`);
+ console.log(
+ `[LOGGING FROM /hello]: Request came from ${context.request.url}`,
+ );
- return new Response("Hello, world!");
+ return new Response("Hello, world!");
}
```
@@ -98,10 +104,10 @@ Logging is available for all customers (Free, Paid, Enterprise).
The following limits apply to Functions logs:
-* Logs are not stored. You can start and stop the stream at any time to view them, but they do not persist.
-* Logs will not display if the Function’s requests per second are over 100 for the last five minutes.
-* Logs from any [Durable Objects](/pages/functions/bindings/#durable-objects) your Functions bind to will show up in the Cloudflare dashboard.
-* A maximum of 10 clients can view a deployment’s logs at one time. This can be a combination of either dashboard sessions or `wrangler pages deployment tail` calls.
+- Logs are not stored. You can start and stop the stream at any time to view them, but they do not persist.
+- Logs will not display if the Function’s requests per second are over 100 for the last five minutes.
+- Logs from any [Durable Objects](/pages/functions/bindings/#durable-objects) your Functions bind to will show up in the Cloudflare dashboard.
+- A maximum of 10 clients can view a deployment’s logs at one time. This can be a combination of either dashboard sessions or `wrangler pages deployment tail` calls.
## Sourcemaps
@@ -109,10 +115,8 @@ If you're debugging an uncaught exception, you might find that the [stack traces
:::note
-
When developing fullstack applications, many build tools (including wrangler for Pages Functions and most fullstack frameworks) will generate source maps for both the client and server, ensure your build step is configured to only emit server sourcemaps or use an additional build step to remove the client source maps. Public source maps might expose the source code of your application to the user.
-
:::
Refer to [Source maps and stack traces](/pages/functions/source-maps/) for an in-depth explanation.
diff --git a/src/content/docs/pages/functions/examples/ab-testing.mdx b/src/content/docs/pages/functions/examples/ab-testing.mdx
index 9d50f8c3910fc5..e15e32d3dc5bea 100644
--- a/src/content/docs/pages/functions/examples/ab-testing.mdx
+++ b/src/content/docs/pages/functions/examples/ab-testing.mdx
@@ -10,6 +10,11 @@ sidebar:
description: Set up an A/B test by controlling what page is served based on
cookies. This version supports passing the request through to test and control
on the origin.
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
```js
diff --git a/src/content/docs/pages/functions/examples/cors-headers.mdx b/src/content/docs/pages/functions/examples/cors-headers.mdx
index 3e1e9656bbe0f3..cc4cf7591c7aa0 100644
--- a/src/content/docs/pages/functions/examples/cors-headers.mdx
+++ b/src/content/docs/pages/functions/examples/cors-headers.mdx
@@ -8,6 +8,11 @@ title: Adding CORS headers
sidebar:
order: 1002
description: A Pages Functions for appending CORS headers.
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
This example is a snippet from our Cloudflare Pages Template repo.
diff --git a/src/content/docs/pages/functions/examples/index.mdx b/src/content/docs/pages/functions/examples/index.mdx
index 75dd9d6566880b..311fe0859daadc 100644
--- a/src/content/docs/pages/functions/examples/index.mdx
+++ b/src/content/docs/pages/functions/examples/index.mdx
@@ -4,9 +4,15 @@ pcx_content_type: navigation
title: Examples
sidebar:
order: 4
-
+ group:
+ hideIndex: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
diff --git a/src/content/docs/pages/functions/get-started.mdx b/src/content/docs/pages/functions/get-started.mdx
index 346619c5387219..cac616f1f46ad5 100644
--- a/src/content/docs/pages/functions/get-started.mdx
+++ b/src/content/docs/pages/functions/get-started.mdx
@@ -6,7 +6,11 @@ sidebar:
head:
- tag: title
content: Functions - Get started
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
This guide will instruct you on creating and deploying a Pages Function.
@@ -21,10 +25,8 @@ To get started with generating a Pages Function, create a `/functions` directory
:::note[Advanced mode]
-
For existing applications where Pages Functions’ built-in file path based routing and middleware system is not desirable, use [Advanced mode](/pages/functions/advanced-mode/). Advanced mode allows you to develop your Pages Functions with a `_worker.js` file rather than the `/functions` directory.
-
:::
Writing your Functions files in the `/functions` directory will automatically generate a Worker with custom functionality at predesignated routes.
@@ -33,7 +35,7 @@ Copy and paste the following code into a `helloworld.js` file that you create in
```js
export function onRequest(context) {
- return new Response("Hello, world!")
+ return new Response("Hello, world!");
}
```
@@ -60,8 +62,8 @@ Additionally, use other Cloudflare products such as [D1](/d1/) (serverless DB) a
After you have set up your Function, deploy your Pages project. Deploy your project by:
-* Connecting your [Git provider](/pages/get-started/git-integration/).
-* Using [Wrangler](/workers/wrangler/commands/#pages) from the command line.
+- Connecting your [Git provider](/pages/get-started/git-integration/).
+- Using [Wrangler](/workers/wrangler/commands/#pages) from the command line.
:::caution
@@ -70,6 +72,6 @@ After you have set up your Function, deploy your Pages project. Deploy your proj
## Related resources
-* Customize your [Function's routing](/pages/functions/routing/)
-* Review the [API reference](/pages/functions/api-reference/)
-* Learn how to [debug your Function](/pages/functions/debugging-and-logging/)
+- Customize your [Function's routing](/pages/functions/routing/)
+- Review the [API reference](/pages/functions/api-reference/)
+- Learn how to [debug your Function](/pages/functions/debugging-and-logging/)
diff --git a/src/content/docs/pages/functions/index.mdx b/src/content/docs/pages/functions/index.mdx
index 02fd260694631b..8e2cb8cc2b65eb 100644
--- a/src/content/docs/pages/functions/index.mdx
+++ b/src/content/docs/pages/functions/index.mdx
@@ -3,10 +3,14 @@ pcx_content_type: navigation
title: Functions
sidebar:
order: 6
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
Pages Functions allows you to build full-stack applications by executing code on the Cloudflare network with [Cloudflare Workers](/workers/). With Functions, you can introduce application aspects such as authenticating, handling form submissions, or working with middleware. [Workers runtime features](/workers/runtime-apis/) are configurable on Pages Functions, including [compatibility with a subset of Node.js APIs](/workers/runtime-apis/nodejs) and the ability to set a [compatibility date or compatibility flag](/workers/configuration/compatibility-dates/). Use Functions to deploy server-side code to enable dynamic functionality without running a dedicated server.
diff --git a/src/content/docs/pages/functions/local-development.mdx b/src/content/docs/pages/functions/local-development.mdx
index cf587570e9f7d8..5d4eb77d36696a 100644
--- a/src/content/docs/pages/functions/local-development.mdx
+++ b/src/content/docs/pages/functions/local-development.mdx
@@ -3,6 +3,11 @@ pcx_content_type: how-to
title: Local development
sidebar:
order: 6
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Run your Pages application locally with our Wrangler Command Line Interface (CLI).
diff --git a/src/content/docs/pages/functions/metrics.mdx b/src/content/docs/pages/functions/metrics.mdx
index 1b062936570127..de0bf713e216b1 100644
--- a/src/content/docs/pages/functions/metrics.mdx
+++ b/src/content/docs/pages/functions/metrics.mdx
@@ -3,7 +3,11 @@ pcx_content_type: reference
title: Metrics
sidebar:
order: 11
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Functions metrics can help you diagnose issues and understand your workloads by showing performance and usage data for your Functions.
@@ -26,10 +30,10 @@ There are three metrics that can help you understand the health of your Function
In **Functions metrics**, you can see historical request counts broken down into total requests, successful requests and errored requests. Information on subrequests is available by selecting **Subrequests**.
-* **Total**: All incoming requests registered by a Function. Requests blocked by [Web Application Firewall (WAF)](https://www.cloudflare.com/waf/) or other security features will not count.
-* **Success**: Requests that returned a `Success` or `Client Disconnected` [invocation status](#invocation-statuses).
-* **Errors**: Requests that returned a `Script Threw Exception`, `Exceeded Resources`, or `Internal Error` [invocation status](#invocation-statuses)
-* **Subrequests**: Requests triggered by calling `fetch` from within a Function. When your Function fetches a static asset, it will count as a subrequest. A subrequest that throws an uncaught error will not be counted.
+- **Total**: All incoming requests registered by a Function. Requests blocked by [Web Application Firewall (WAF)](https://www.cloudflare.com/waf/) or other security features will not count.
+- **Success**: Requests that returned a `Success` or `Client Disconnected` [invocation status](#invocation-statuses).
+- **Errors**: Requests that returned a `Script Threw Exception`, `Exceeded Resources`, or `Internal Error` [invocation status](#invocation-statuses)
+- **Subrequests**: Requests triggered by calling `fetch` from within a Function. When your Function fetches a static asset, it will count as a subrequest. A subrequest that throws an uncaught error will not be counted.
Request traffic data may display a drop off near the last few minutes displayed in the graph for time ranges less than six hours. This does not reflect a drop in traffic, but a slight delay in aggregation and metrics delivery.
@@ -52,7 +56,7 @@ To further investigate exceptions, refer to [Debugging and Logging](/pages/funct
### CPU time per execution
-The CPU Time per execution chart shows historical CPU time data broken down into relevant quantiles using [reservoir sampling](https://en.wikipedia.org/wiki/Reservoir_sampling). Learn more about [interpreting quantiles](https://www.statisticshowto.com/quantile-definition-find-easy-steps/).
+The CPU Time per execution chart shows historical CPU time data broken down into relevant quantiles using [reservoir sampling](https://en.wikipedia.org/wiki/Reservoir_sampling). Learn more about [interpreting quantiles](https://www.statisticshowto.com/quantile-definition-find-easy-steps/).
In some cases, higher quantiles may appear to exceed [CPU time limits](/workers/platform/limits/#cpu-time) without generating invocation errors because of a mechanism in the Workers runtime that allows rollover CPU time for requests below the CPU limit.
diff --git a/src/content/docs/pages/functions/middleware.mdx b/src/content/docs/pages/functions/middleware.mdx
index 16a20db1eef801..90b06cc5695094 100644
--- a/src/content/docs/pages/functions/middleware.mdx
+++ b/src/content/docs/pages/functions/middleware.mdx
@@ -3,7 +3,11 @@ pcx_content_type: how-to
title: Middleware
sidebar:
order: 5
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Middleware is reusable logic that can be run before your [`onRequest`](/pages/functions/api-reference/#onrequests) function. Middlewares are typically utility functions. Error handling, user authentication, and logging are typical candidates for middleware within an application.
@@ -18,11 +22,11 @@ In `_middleware.js` files, you may export an `onRequest` handler or any of its m
```js
export async function onRequest(context) {
- try {
- return await context.next();
- } catch (err) {
- return new Response(`${err.message}\n${err.stack}`, { status: 500 });
- }
+ try {
+ return await context.next();
+ } catch (err) {
+ return new Response(`${err.message}\n${err.stack}`, { status: 500 });
+ }
}
```
@@ -32,19 +36,19 @@ You can export an array of Pages Functions as your middleware handler. This allo
```js
async function errorHandling(context) {
- try {
- return await context.next();
- } catch (err) {
- return new Response(`${err.message}\n${err.stack}`, { status: 500 });
- }
+ try {
+ return await context.next();
+ } catch (err) {
+ return new Response(`${err.message}\n${err.stack}`, { status: 500 });
+ }
}
function authentication(context) {
- if (context.request.headers.get("x-email") != "admin@example.com") {
- return new Response("Unauthorized", { status: 403 });
- }
+ if (context.request.headers.get("x-email") != "admin@example.com") {
+ return new Response("Unauthorized", { status: 403 });
+ }
- return context.next();
+ return context.next();
}
export const onRequest = [errorHandling, authentication];
diff --git a/src/content/docs/pages/functions/module-support.mdx b/src/content/docs/pages/functions/module-support.mdx
index ffd8957bc782c5..072e6ba726f3b6 100644
--- a/src/content/docs/pages/functions/module-support.mdx
+++ b/src/content/docs/pages/functions/module-support.mdx
@@ -3,7 +3,11 @@ pcx_content_type: reference
title: Module support
sidebar:
order: 13
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Pages Functions provide support for several module types, much like [Workers](https://blog.cloudflare.com/workers-javascript-modules/). This means that you can import and use external modules such as WebAssembly (Wasm), `text` and `binary` files inside your Functions code.
@@ -26,7 +30,7 @@ export function greeting(name: string): string {
import { greeting } from "../src/greeting.ts";
export async function onRequest(context) {
- return new Response(`${greeting("Pages Functions")}`);
+ return new Response(`${greeting("Pages Functions")}`);
}
```
@@ -44,7 +48,7 @@ import addModule from "add.wasm";
export async function onRequest() {
const addInstance = await WebAssembly.instantiate(addModule);
return new Response(
- `The meaning of life is ${addInstance.exports.add(20, 1)}`
+ `The meaning of life is ${addInstance.exports.add(20, 1)}`,
);
}
```
@@ -58,9 +62,9 @@ To import the below HTML file into your Pages Functions code:
```html
-
-
Hello Pages Functions!
-
+
+
Hello Pages Functions!
+
```
@@ -70,12 +74,9 @@ Use the following script:
import html from "../index.html";
export async function onRequest() {
- return new Response(
- html,
- {
- headers: { "Content-Type": "text/html" }
- }
- );
+ return new Response(html, {
+ headers: { "Content-Type": "text/html" },
+ });
}
```
@@ -89,11 +90,8 @@ Below is a basic example of how you can import the data from a binary file insid
import data from "../my-data.bin";
export async function onRequest() {
- return new Response(
- data,
- {
- headers: { "Content-Type": "application/octet-stream" }
- }
- );
+ return new Response(data, {
+ headers: { "Content-Type": "application/octet-stream" },
+ });
}
```
diff --git a/src/content/docs/pages/functions/plugins/cloudflare-access.mdx b/src/content/docs/pages/functions/plugins/cloudflare-access.mdx
index 8add85ec56bda8..3bd366aee485d8 100644
--- a/src/content/docs/pages/functions/plugins/cloudflare-access.mdx
+++ b/src/content/docs/pages/functions/plugins/cloudflare-access.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Cloudflare Access
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The Cloudflare Access Pages Plugin is a middleware to validate Cloudflare Access JWT assertions. It also includes an API to lookup additional information about a given user's JWT.
diff --git a/src/content/docs/pages/functions/plugins/community-plugins.mdx b/src/content/docs/pages/functions/plugins/community-plugins.mdx
index 19dcbf2b0b8715..fb73b1e6216ae4 100644
--- a/src/content/docs/pages/functions/plugins/community-plugins.mdx
+++ b/src/content/docs/pages/functions/plugins/community-plugins.mdx
@@ -3,34 +3,38 @@ pcx_content_type: concept
title: Community Plugins
sidebar:
order: 2
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The following are some of the community-maintained Pages Plugins. If you have created a Pages Plugin and would like to share it with developers, create a PR to add it to this alphabeticallly-ordered list using the link in the footer.
-* [pages-plugin-asset-negotiation](https://github.com/Cherry/pages-plugin-asset-negotiation)
+- [pages-plugin-asset-negotiation](https://github.com/Cherry/pages-plugin-asset-negotiation)
Given a folder of assets in multiple formats, this Plugin will automatically negotiate with a client to serve an optimized version of a requested asset.
-* [proxyflare-for-pages](https://github.com/flaregun-net/proxyflare-for-pages)
+- [proxyflare-for-pages](https://github.com/flaregun-net/proxyflare-for-pages)
Move traffic around your Cloudflare Pages domain with ease. Proxyflare is a reverse-proxy that enables you to:
- * Port forward, redirect, and reroute HTTP and websocket traffic anywhere on the Internet.
- * Mount an entire website on a subpath (for example, `mysite.com/docs`) on your apex domain.
- * Serve static text (like `robots.txt` and other structured metadata) from any endpoint.
+ - Port forward, redirect, and reroute HTTP and websocket traffic anywhere on the Internet.
+ - Mount an entire website on a subpath (for example, `mysite.com/docs`) on your apex domain.
+ - Serve static text (like `robots.txt` and other structured metadata) from any endpoint.
Refer to [Proxyflare](https://proxyflare.works) for more information.
-* [cloudflare-pages-plugin-rollbar](https://github.com/hckr-studio/cloudflare-pages-plugin-rollbar)
-
- The [Rollbar](https://rollbar.com/) Pages Plugin captures and logs all exceptions which occur below it in the execution chain
+- [cloudflare-pages-plugin-rollbar](https://github.com/hckr-studio/cloudflare-pages-plugin-rollbar)
+
+ The [Rollbar](https://rollbar.com/) Pages Plugin captures and logs all exceptions which occur below it in the execution chain
of your [Pages Functions](/pages/functions/). Discover, predict, and resolve errors in real-time.
-* [cloudflare-pages-plugin-trpc](https://github.com/toyamarinyon/cloudflare-pages-plugin-trpc)
+- [cloudflare-pages-plugin-trpc](https://github.com/toyamarinyon/cloudflare-pages-plugin-trpc)
Allows developers to quickly create a tRPC server with a Cloudflare Pages Function.
-* [pages-plugin-twind](https://github.com/helloimalastair/twind-plugin)
+- [pages-plugin-twind](https://github.com/helloimalastair/twind-plugin)
Automatically injects Tailwind CSS styles into HTML pages after analyzing which classes are used.
diff --git a/src/content/docs/pages/functions/plugins/google-chat.mdx b/src/content/docs/pages/functions/plugins/google-chat.mdx
index 6b0232780f923e..a560acdf2cb2a8 100644
--- a/src/content/docs/pages/functions/plugins/google-chat.mdx
+++ b/src/content/docs/pages/functions/plugins/google-chat.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Google Chat
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The Google Chat Pages Plugin creates a Google Chat bot which can respond to messages. It also includes an API for interacting with Google Chat (for example, for creating messages) without the need for user input. This API is useful for situations such as alerts.
diff --git a/src/content/docs/pages/functions/plugins/graphql.mdx b/src/content/docs/pages/functions/plugins/graphql.mdx
index bbccdb4cdc8387..91e77b0b23d7ce 100644
--- a/src/content/docs/pages/functions/plugins/graphql.mdx
+++ b/src/content/docs/pages/functions/plugins/graphql.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: GraphQL
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The GraphQL Pages Plugin creates a GraphQL server which can respond to `application/json` and `application/graphql` `POST` requests. It responds with [the GraphQL Playground](https://github.com/graphql/graphql-playground) for `GET` requests.
diff --git a/src/content/docs/pages/functions/plugins/hcaptcha.mdx b/src/content/docs/pages/functions/plugins/hcaptcha.mdx
index 9ba657bde98899..03e9916b77a57f 100644
--- a/src/content/docs/pages/functions/plugins/hcaptcha.mdx
+++ b/src/content/docs/pages/functions/plugins/hcaptcha.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: hCaptcha
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/functions/plugins/honeycomb.mdx b/src/content/docs/pages/functions/plugins/honeycomb.mdx
index 848736d229056c..720418d635cafb 100644
--- a/src/content/docs/pages/functions/plugins/honeycomb.mdx
+++ b/src/content/docs/pages/functions/plugins/honeycomb.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Honeycomb
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The Honeycomb Pages Plugin automatically sends traces to Honeycomb for analysis and observability.
diff --git a/src/content/docs/pages/functions/plugins/index.mdx b/src/content/docs/pages/functions/plugins/index.mdx
index 7944fff51e8b59..99fc983d02fe7a 100644
--- a/src/content/docs/pages/functions/plugins/index.mdx
+++ b/src/content/docs/pages/functions/plugins/index.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Pages Plugins
sidebar:
order: 9
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { DirectoryListing, Render } from "~/components";
diff --git a/src/content/docs/pages/functions/plugins/sentry.mdx b/src/content/docs/pages/functions/plugins/sentry.mdx
index deb70780fb34bb..1cdd68b3feb3a5 100644
--- a/src/content/docs/pages/functions/plugins/sentry.mdx
+++ b/src/content/docs/pages/functions/plugins/sentry.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Sentry
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
:::note
diff --git a/src/content/docs/pages/functions/plugins/static-forms.mdx b/src/content/docs/pages/functions/plugins/static-forms.mdx
index 25428eb24e92c5..6f1be5c3ecfa5c 100644
--- a/src/content/docs/pages/functions/plugins/static-forms.mdx
+++ b/src/content/docs/pages/functions/plugins/static-forms.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Static Forms
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The Static Forms Pages Plugin intercepts all form submissions made which have the `data-static-form-name` attribute set. This allows you to take action on these form submissions by, for example, saving the submission to KV.
diff --git a/src/content/docs/pages/functions/plugins/stytch.mdx b/src/content/docs/pages/functions/plugins/stytch.mdx
index 38d01dc0913e4e..42f68537b6a0ce 100644
--- a/src/content/docs/pages/functions/plugins/stytch.mdx
+++ b/src/content/docs/pages/functions/plugins/stytch.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Stytch
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The Stytch Pages Plugin is a middleware which validates all requests and their `session_token`.
diff --git a/src/content/docs/pages/functions/plugins/turnstile.mdx b/src/content/docs/pages/functions/plugins/turnstile.mdx
index 15eae3f4ae00c9..1a19aabdda7f70 100644
--- a/src/content/docs/pages/functions/plugins/turnstile.mdx
+++ b/src/content/docs/pages/functions/plugins/turnstile.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Turnstile
sidebar:
order: 1
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/functions/plugins/vercel-og.mdx b/src/content/docs/pages/functions/plugins/vercel-og.mdx
index c0e5a479d8c416..6fed3463cfb87a 100644
--- a/src/content/docs/pages/functions/plugins/vercel-og.mdx
+++ b/src/content/docs/pages/functions/plugins/vercel-og.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: reference
title: vercel/og
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
The `@vercel/og` Pages Plugin is a middleware which renders social images for webpages. It also includes an API to create arbitrary images.
diff --git a/src/content/docs/pages/functions/pricing.mdx b/src/content/docs/pages/functions/pricing.mdx
index 481c5015b47d54..6982b8e9ee1af6 100644
--- a/src/content/docs/pages/functions/pricing.mdx
+++ b/src/content/docs/pages/functions/pricing.mdx
@@ -3,7 +3,11 @@ pcx_content_type: reference
title: Pricing
sidebar:
order: 12
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Requests to your Functions are billed as Cloudflare Workers requests. Workers plans and pricing can be found [in the Workers documentation](/workers/platform/pricing/).
@@ -16,10 +20,8 @@ Pages supports the [Standard usage model](/workers/platform/pricing/#example-pri
:::note
-
Workers Enterprise accounts are billed based on the usage model specified in their contract. To switch to the Standard usage model, reach out to your Customer Success Manager (CSM). Some Workers Enterprise customers maintain the ability to [change usage models](/workers/platform/pricing/#how-to-switch-usage-models).
-
:::
### Static asset requests
diff --git a/src/content/docs/pages/functions/routing.mdx b/src/content/docs/pages/functions/routing.mdx
index d520e996751fe2..506bbbc7edd662 100644
--- a/src/content/docs/pages/functions/routing.mdx
+++ b/src/content/docs/pages/functions/routing.mdx
@@ -3,6 +3,11 @@ pcx_content_type: reference
title: Routing
sidebar:
order: 2
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { FileTree } from "~/components";
@@ -106,7 +111,7 @@ For files which match a single URL segment (use a single set of brackets), the v
```js
export function onRequest(context) {
- return new Response(context.params.user)
+ return new Response(context.params.user);
}
```
@@ -116,7 +121,7 @@ For files which match against multiple URL segments (use a double set of bracket
```js
export function onRequest(context) {
- return new Response(JSON.stringify(context.params.catchall))
+ return new Response(JSON.stringify(context.params.catchall));
}
```
@@ -138,9 +143,9 @@ Create a `_routes.json` file to control when your Function is invoked. It should
This file will include three different properties:
-* **version**: Defines the version of the schema. Currently there is only one version of the schema (version 1), however, we may add more in the future and aim to be backwards compatible.
-* **include**: Defines routes that will be invoked by Functions. Accepts wildcard behavior.
-* **exclude**: Defines routes that will not be invoked by Functions. Accepts wildcard behavior. `exclude` always take priority over `include`.
+- **version**: Defines the version of the schema. Currently there is only one version of the schema (version 1), however, we may add more in the future and aim to be backwards compatible.
+- **include**: Defines routes that will be invoked by Functions. Accepts wildcard behavior.
+- **exclude**: Defines routes that will not be invoked by Functions. Accepts wildcard behavior. `exclude` always take priority over `include`.
:::note
@@ -154,9 +159,9 @@ Below is an example of a `_routes.json`.
```json
{
- "version": 1,
- "include": ["/*"],
- "exclude": []
+ "version": 1,
+ "include": ["/*"],
+ "exclude": []
}
```
@@ -166,9 +171,9 @@ Below is another example of a `_routes.json` file. Any route inside the `/build`
```json
{
- "version": 1,
- "include": ["/*"],
- "exclude": ["/build/*"]
+ "version": 1,
+ "include": ["/*"],
+ "exclude": ["/build/*"]
}
```
@@ -176,6 +181,6 @@ Below is another example of a `_routes.json` file. Any route inside the `/build`
Functions invocation routes have the following limits:
-* You must have at least one include rule.
-* You may have no more than 100 include/exclude rules combined.
-* Each rule may have no more than 100 characters.
+- You must have at least one include rule.
+- You may have no more than 100 include/exclude rules combined.
+- Each rule may have no more than 100 characters.
diff --git a/src/content/docs/pages/functions/smart-placement.mdx b/src/content/docs/pages/functions/smart-placement.mdx
index a9d8364e6eaf24..5173787b655be6 100644
--- a/src/content/docs/pages/functions/smart-placement.mdx
+++ b/src/content/docs/pages/functions/smart-placement.mdx
@@ -4,7 +4,11 @@ title: Smart Placement
sidebar:
badge:
text: Beta
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
By default, [Workers](/workers/) and [Pages Functions](/pages/functions/) are invoked in a data center closest to where the request was received. If you are running back-end logic in a Pages Function, it may be more performant to run that Pages Function closer to your back-end infrastructure rather than the end user. Smart Placement (beta) automatically places your workloads in an optimal location that minimizes latency and speeds up your applications.
@@ -21,10 +25,8 @@ Smart Placement on Pages currently has some caveats. While assets are always mea
:::note
-
To understand how Smart Placement works, refer to [Smart Placement](/workers/configuration/smart-placement/).
-
:::
## Enable Smart Placement (beta)
diff --git a/src/content/docs/pages/functions/source-maps.mdx b/src/content/docs/pages/functions/source-maps.mdx
index dd6504131d6179..a751b7e31b277c 100644
--- a/src/content/docs/pages/functions/source-maps.mdx
+++ b/src/content/docs/pages/functions/source-maps.mdx
@@ -3,19 +3,21 @@ pcx_content_type: configuration
title: Source maps and stack traces
head: []
description: Adding source maps and generating stack traces for Pages.
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Render, WranglerConfig } from "~/components"
+import { Render, WranglerConfig } from "~/components";
:::caution
-
Support for uploading source maps for Pages is available now in open beta. Minimum required Wrangler version: 3.60.0.
-
:::
## Source Maps
@@ -41,17 +43,16 @@ You can then view the stack trace when streaming [real-time logs](/pages/functio
:::note
-
The source map is retrieved after your Pages Function invocation completes — it's an asynchronous process that does not impact your applications's CPU utilization or performance. Source maps are not accessible inside the application at runtime, if you `console.log()` the [stack property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack), you will not get a deobfuscated stack trace.
:::
## Limits
-| Description | Limit |
-| ------------------------------ | ------------- |
-| Maximum Source Map Size | 15 MB gzipped |
+| Description | Limit |
+| ----------------------- | ------------- |
+| Maximum Source Map Size | 15 MB gzipped |
## Related resources
-* [Real-time logs](/pages/functions/debugging-and-logging/) - Learn how to capture Pages logs in real-time.
+- [Real-time logs](/pages/functions/debugging-and-logging/) - Learn how to capture Pages logs in real-time.
diff --git a/src/content/docs/pages/functions/typescript.mdx b/src/content/docs/pages/functions/typescript.mdx
index e6e3f0016883db..697dc8227ec8b8 100644
--- a/src/content/docs/pages/functions/typescript.mdx
+++ b/src/content/docs/pages/functions/typescript.mdx
@@ -3,6 +3,11 @@ pcx_content_type: how-to
title: TypeScript
sidebar:
order: 8
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { PackageManagers, Render } from "~/components";
diff --git a/src/content/docs/pages/functions/wrangler-configuration.mdx b/src/content/docs/pages/functions/wrangler-configuration.mdx
index bee663c7461a9e..9c07dd8659d237 100644
--- a/src/content/docs/pages/functions/wrangler-configuration.mdx
+++ b/src/content/docs/pages/functions/wrangler-configuration.mdx
@@ -3,9 +3,21 @@ pcx_content_type: how-to
title: Configuration
sidebar:
order: 6
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Render, TabItem, Tabs, Type, MetaInfo, WranglerConfig } from "~/components";
+import {
+ Render,
+ TabItem,
+ Tabs,
+ Type,
+ MetaInfo,
+ WranglerConfig,
+} from "~/components";
:::caution
@@ -151,8 +163,6 @@ With a Wrangler configuration file, you can quickly set configuration across you
The Wrangler configuration file applies locally when using `wrangler pages dev`. This means that you can test out configuration changes quickly without a need to login to the Cloudflare dashboard. Refer to the following config file for an example:
-
-
```toml
@@ -218,8 +228,6 @@ Unlike [Workers Environments](/workers/wrangler/configuration/#environments), `p
Refer to the following Wrangler configuration file for an example of how to override preview deployment configuration:
-
-
```toml
@@ -247,8 +255,6 @@ If you deployed this file via `wrangler pages deploy`, `name`, `pages_build_outp
If you wanted to have configuration values apply to local and preview, but override production, your file would look like this:
-
-
```toml
@@ -274,8 +280,6 @@ API_KEY = "8901234bfgd"
You can always be explicit and override both preview and production:
-
-
```toml
@@ -348,8 +352,6 @@ Non-inheritable keys are configurable at the top-level, but, if any one non-inhe
For example, this configuration will not work:
-
-
```toml
@@ -446,7 +448,9 @@ When using Wrangler in the default local development mode, files will be written
:::caution
- Durable Object bindings configured in a Pages project's Wrangler configuration file require the `script_name` key. For Workers, the `script_name` key is optional.
+ Durable Object bindings configured in
+a Pages project's Wrangler configuration file require the `script_name` key. For
+Workers, the `script_name` key is optional.
:::
diff --git a/src/content/docs/pages/get-started/c3.mdx b/src/content/docs/pages/get-started/c3.mdx
index 44b1e77c058a23..8ac33e8f55b6a4 100644
--- a/src/content/docs/pages/get-started/c3.mdx
+++ b/src/content/docs/pages/get-started/c3.mdx
@@ -8,6 +8,11 @@ description: Use C3 (`create-cloudflare` CLI) to set up and deploy new
applications using framework-specific setup guides to ensure each new
application follows Cloudflare and any third-party best practices for
deployment.
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import {
@@ -75,7 +80,11 @@ C3 collects any required input through a series of interactive prompts. You may
This is the full format of a C3 invocation alongside the possible CLI arguments:
-
+
- `DIRECTORY`
diff --git a/src/content/docs/pages/get-started/direct-upload.mdx b/src/content/docs/pages/get-started/direct-upload.mdx
index 2634e821ff69b0..53957f4084c071 100644
--- a/src/content/docs/pages/get-started/direct-upload.mdx
+++ b/src/content/docs/pages/get-started/direct-upload.mdx
@@ -6,6 +6,11 @@ head:
content: Direct Upload
description: Upload your prebuilt assets to Pages and deploy them via the
Wrangler CLI or the Cloudflare dashboard.
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/get-started/git-integration.mdx b/src/content/docs/pages/get-started/git-integration.mdx
index c8e53242c2cc4c..29d5a0ff0c9d75 100644
--- a/src/content/docs/pages/get-started/git-integration.mdx
+++ b/src/content/docs/pages/get-started/git-integration.mdx
@@ -5,6 +5,11 @@ head:
- tag: title
content: Git integration guide
description: Connect your Git provider to Pages.
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Details, Render } from "~/components";
diff --git a/src/content/docs/pages/get-started/index.mdx b/src/content/docs/pages/get-started/index.mdx
index fe8a6c2163095a..cc99a7f25fd8fb 100644
--- a/src/content/docs/pages/get-started/index.mdx
+++ b/src/content/docs/pages/get-started/index.mdx
@@ -3,10 +3,14 @@ pcx_content_type: navigation
title: Getting started
sidebar:
order: 2
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
Choose a setup method for your Pages project:
diff --git a/src/content/docs/pages/how-to/add-custom-http-headers.mdx b/src/content/docs/pages/how-to/add-custom-http-headers.mdx
index 284a9faf704a49..7c3f3d78d7ba2a 100644
--- a/src/content/docs/pages/how-to/add-custom-http-headers.mdx
+++ b/src/content/docs/pages/how-to/add-custom-http-headers.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Add custom HTTP headers
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { WranglerConfig } from "~/components";
diff --git a/src/content/docs/pages/how-to/build-commands-branches.mdx b/src/content/docs/pages/how-to/build-commands-branches.mdx
index 42c1078949f7d8..2e4e36dffe7b67 100644
--- a/src/content/docs/pages/how-to/build-commands-branches.mdx
+++ b/src/content/docs/pages/how-to/build-commands-branches.mdx
@@ -2,7 +2,11 @@
updated: 2022-07-27
pcx_content_type: how-to
title: Set build commands per branch
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
This guide will instruct you how to set build commands on specific branches. You will use the `CF_PAGES_BRANCH` environment variable to run a script on a specified branch as opposed to your Production branch. This guide assumes that you have a Cloudflare account and a Pages project.
diff --git a/src/content/docs/pages/how-to/custom-branch-aliases.mdx b/src/content/docs/pages/how-to/custom-branch-aliases.mdx
index 785ef35d53a85d..351d17f95f619b 100644
--- a/src/content/docs/pages/how-to/custom-branch-aliases.mdx
+++ b/src/content/docs/pages/how-to/custom-branch-aliases.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: how-to
title: Add a custom domain to a branch
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
In this guide, you will learn how to add a custom domain (`staging.example.com`) that will point to a specific branch (`staging`) on your Pages project.
@@ -10,12 +14,10 @@ This will allow you to have a custom domain that will always show the latest bui
:::note
-
Currently, this setup is only supported when using Cloudflare DNS.
If you attempt to follow this guide using an external DNS provider, your custom alias will be sent to the production branch of your Pages project.
-
:::
First, make sure that you have a successful deployment on the branch you would like to set up a custom domain for.
diff --git a/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx b/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx
index c993a1d99679cb..22a81aef6af842 100644
--- a/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx
+++ b/src/content/docs/pages/how-to/deploy-a-wordpress-site.mdx
@@ -5,7 +5,11 @@ pcx_content_type: tutorial
title: Deploy a static WordPress site
tags:
- WordPress
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
## Overview
@@ -16,8 +20,8 @@ In this guide, you will use a WordPress plugin, [Simply Static](https://wordpres
This guide assumes that you are:
-* The Administrator account on your WordPress site.
-* Able to install WordPress plugins on the site.
+- The Administrator account on your WordPress site.
+- Able to install WordPress plugins on the site.
## Setup
@@ -53,9 +57,9 @@ Every time you make a change to your WordPress site, you will need to download a
There are some features available in WordPress sites that will not be supported in a static site environment:
-* WordPress Forms.
-* WordPress Comments.
-* Any links to `/wp-admin` or similar internal WordPress routes.
+- WordPress Forms.
+- WordPress Comments.
+- Any links to `/wp-admin` or similar internal WordPress routes.
## Conclusion
@@ -63,8 +67,8 @@ By following this guide, you have successfully deployed a static version of your
With a static version of your site being served, you can:
-* Move your WordPress site to a custom domain or subdomain. Refer to [Custom domains](/pages/configuration/custom-domains/) to learn more.
-* Run your WordPress instance locally, or put your WordPress site behind [Cloudflare Access](/pages/configuration/preview-deployments/#customize-preview-deployments-access) to only give access to your contributors. This has a significant effect on the number of attack vectors for your WordPress site and its content.
-* Downgrade your WordPress hosting plan to a cheaper plan. Because the memory and bandwidth requirements for your WordPress instance are now smaller, you can often host it on a cheaper plan, or moving to shared hosting.
+- Move your WordPress site to a custom domain or subdomain. Refer to [Custom domains](/pages/configuration/custom-domains/) to learn more.
+- Run your WordPress instance locally, or put your WordPress site behind [Cloudflare Access](/pages/configuration/preview-deployments/#customize-preview-deployments-access) to only give access to your contributors. This has a significant effect on the number of attack vectors for your WordPress site and its content.
+- Downgrade your WordPress hosting plan to a cheaper plan. Because the memory and bandwidth requirements for your WordPress instance are now smaller, you can often host it on a cheaper plan, or moving to shared hosting.
Connect with the [Cloudflare Developer community on Discord](https://discord.cloudflare.com) to ask questions and discuss the platform with other developers.
diff --git a/src/content/docs/pages/how-to/enable-zaraz.mdx b/src/content/docs/pages/how-to/enable-zaraz.mdx
index f7fc945f9d543a..e6f22c49cf2dc1 100644
--- a/src/content/docs/pages/how-to/enable-zaraz.mdx
+++ b/src/content/docs/pages/how-to/enable-zaraz.mdx
@@ -1,10 +1,14 @@
---
pcx_content_type: how-to
title: Enable Zaraz
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Render } from "~/components"
+import { Render } from "~/components";
diff --git a/src/content/docs/pages/how-to/index.mdx b/src/content/docs/pages/how-to/index.mdx
index 9b71f49caadadb..6fd5aca76351f5 100644
--- a/src/content/docs/pages/how-to/index.mdx
+++ b/src/content/docs/pages/how-to/index.mdx
@@ -4,9 +4,15 @@ pcx_content_type: navigation
title: How to
sidebar:
order: 8
-
+ group:
+ hideIndex: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
diff --git a/src/content/docs/pages/how-to/npm-private-registry.mdx b/src/content/docs/pages/how-to/npm-private-registry.mdx
index b1b5cf77b18568..34d3c6eb9a69e1 100644
--- a/src/content/docs/pages/how-to/npm-private-registry.mdx
+++ b/src/content/docs/pages/how-to/npm-private-registry.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Install private packages
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Cloudflare Pages supports custom package registries, allowing you to include private dependencies in your application. While this walkthrough focuses specifically on [npm](https://www.npmjs.com/), the Node package manager and registry, the same approach can be applied to other registry tools.
diff --git a/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx b/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx
index eabee3222e986b..bf1cd386438cfd 100644
--- a/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx
+++ b/src/content/docs/pages/how-to/preview-with-cloudflare-tunnel.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Preview Local Projects with Cloudflare Tunnel
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
[Cloudflare Tunnel](/cloudflare-one/connections/connect-networks/) runs a lightweight daemon (`cloudflared`) in your infrastructure that establishes outbound connections (Tunnels) between your origin web server and the Cloudflare global network. In practical terms, you can use Cloudflare Tunnel to allow remote access to services running on your local machine. It is an alternative to popular tools like [Ngrok](https://ngrok.com), and provides free, long-running tunnels via the [TryCloudflare](/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/) service.
diff --git a/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx b/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx
index 03beb1efec4cef..fde6bd92b1a1eb 100644
--- a/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx
+++ b/src/content/docs/pages/how-to/redirect-to-custom-domain.mdx
@@ -1,10 +1,14 @@
---
pcx_content_type: how-to
title: Redirecting *.pages.dev to a Custom Domain
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Example } from "~/components"
+import { Example } from "~/components";
Learn how to use [Bulk Redirects](/rules/url-forwarding/bulk-redirects/) to redirect your `*.pages.dev` subdomain to your [custom domain](/pages/configuration/custom-domains/).
@@ -22,8 +26,8 @@ To redirect a `.pages.dev` subdomain to your custom domain:
-| Source URL | Target URL | Status | Parameters |
-| ------------- | --------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
+| Source URL | Target URL | Status | Parameters |
+| --------------------- | --------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
| `.pages.dev` | `https://example.com` | `301` |
Preserve query string
Subpath matching
Preserve path suffix
Include subdomains
|
@@ -34,5 +38,5 @@ To test that your redirect worked, go to your `.pages.dev` domain. If t
## Related resources
-* [Redirect www to domain apex](/pages/how-to/www-redirect/)
-* [Handle redirects with Bulk Redirects](/rules/url-forwarding/bulk-redirects/)
+- [Redirect www to domain apex](/pages/how-to/www-redirect/)
+- [Handle redirects with Bulk Redirects](/rules/url-forwarding/bulk-redirects/)
diff --git a/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx b/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx
index 9b7ad18ed16cec..a77d24c2f30896 100644
--- a/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx
+++ b/src/content/docs/pages/how-to/refactor-a-worker-to-pages-functions.mdx
@@ -1,6 +1,13 @@
---
pcx_content_type: how-to
title: Refactor a Worker to a Pages Function
+sidebar:
+ hidden: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx b/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx
index e2333e4d0daa5a..560e22e230d6a1 100644
--- a/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx
+++ b/src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: how-to
title: Use Direct Upload with continuous integration
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Cloudflare Pages supports directly uploading prebuilt assets, allowing you to use custom build steps for your applications and deploy to Pages with [Wrangler](/workers/wrangler/install-and-update/). This guide will teach you how to deploy your application to Pages, using continuous integration.
@@ -26,7 +30,7 @@ To generate an API token:
3. Select **API Tokens** > **Create Token**.
4. Under **Custom Token**, select **Get started**.
5. Name your API Token in the **Token name** field.
-6. Under **Permissions**, select *Account*, *Cloudflare Pages* and *Edit*:
+6. Under **Permissions**, select _Account_, _Cloudflare Pages_ and _Edit_:
7. Select **Continue to summary** > **Create Token**.
@@ -50,8 +54,8 @@ In the GitHub Action you have set up, environment variables are needed to push y
1. Go to your project's repository in GitHub.
2. Under your repository's name, select **Settings**.
3. Select **Secrets** > **Actions** > **New repository secret**.
-4. Create one secret and put **CLOUDFLARE\_ACCOUNT\_ID** as the name with the value being your Cloudflare account ID.
-5. Create another secret and put **CLOUDFLARE\_API\_TOKEN** as the name with the value being your Cloudflare API token.
+4. Create one secret and put **CLOUDFLARE_ACCOUNT_ID** as the name with the value being your Cloudflare account ID.
+5. Create another secret and put **CLOUDFLARE_API_TOKEN** as the name with the value being your Cloudflare API token.
Add the value of your Cloudflare account ID and Cloudflare API token as `CLOUDFLARE_ACCOUNT_ID` and `CLOUDFLARE_API_TOKEN`, respectively. This will ensure that these secrets are secure, and each time your Action runs, it will access these secrets.
@@ -92,10 +96,8 @@ The `${{ secrets.GITHUB_TOKEN }}` will be automatically provided by GitHub Actio
:::note
-
This workflow automatically triggers on the current git branch, unless you add a `branch` option to the `with` section.
-
:::
## Using CircleCI for CI/CD
@@ -125,31 +127,29 @@ Create a `.circleci/config.yml` file at the root of your project. This file cont
```yaml
version: 2.1
jobs:
- Publish-to-Pages:
- docker:
- - image: cimg/node:18.7.0
+ Publish-to-Pages:
+ docker:
+ - image: cimg/node:18.7.0
- steps:
- - checkout
- # Run your project's build step
- - run: npm install && npm run build
- # Publish with wrangler
- - run: npx wrangler pages deploy dist --project-name= # Replace dist with the name of your build folder and input your project name
+ steps:
+ - checkout
+ # Run your project's build step
+ - run: npm install && npm run build
+ # Publish with wrangler
+ - run: npx wrangler pages deploy dist --project-name= # Replace dist with the name of your build folder and input your project name
workflows:
- Publish-to-Pages-workflow:
- jobs:
- - Publish-to-Pages
+ Publish-to-Pages-workflow:
+ jobs:
+ - Publish-to-Pages
```
Your continuous integration workflow is broken down into jobs when using CircleCI. From the code block above, you can see that you first define a list of jobs that run on each commit. For example, your repository will run on a prebuilt docker image `cimg/node:18.7.0`. It first checks out the repository with the Node version specified in the image.
:::note[Note]
-
Wrangler requires a Node version of at least `16.17.0`. You must upgrade your Node.js version if your version is lower than `16.17.0`.
-
:::
You can modify the Wrangler command with any [`wrangler pages deploy` options](/workers/wrangler/commands/#deploy-1).
diff --git a/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx b/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx
index 7fd22696812178..9f0d93fdb14d53 100644
--- a/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx
+++ b/src/content/docs/pages/how-to/use-worker-for-ab-testing-in-pages.mdx
@@ -1,7 +1,11 @@
---
pcx_content_type: how-to
title: Use Pages Functions for A/B testing
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
In this guide, you will learn how to use [Pages Functions](/pages/functions/) for A/B testing in your Pages projects. A/B testing is a user experience research methodology applied when comparing two or more versions of a web page or application. With A/B testing, you can serve two or more versions of a webpage to users and divide traffic to your site.
@@ -31,41 +35,39 @@ In your `/functions` directory, create a `_middleware.js` file.
:::note
-
When you create your `_middleware.js` file at the base of your `/functions` folder, the middleware will run for all routes on your project. Learn more about [middleware routing](/pages/functions/middleware/).
-
:::
Following the Functions naming convention, the `_middleware.js` file exports a single async `onRequest` function that accepts a `request`, `env` and `next` as an argument.
```js
-const abTest = async ({request, next, env}) => {
- /*
+const abTest = async ({ request, next, env }) => {
+ /*
Todo:
1. Conditional statements to check for the cookie
2. Assign cookies based on percentage, then serve
*/
-}
+};
-export const onRequest = [abTest]
+export const onRequest = [abTest];
```
To set the cookie, create the `cookieName` variable and assign any value. Then create the `newHomepagePathName` variable and assign it `/test`:
```js null {1,2}
-const cookieName = "ab-test-cookie"
-const newHomepagePathName = "/test"
+const cookieName = "ab-test-cookie";
+const newHomepagePathName = "/test";
-const abTest = async ({request, next, env}) => {
- /*
+const abTest = async ({ request, next, env }) => {
+ /*
Todo:
1. Conditional statements to check for the cookie
2. Assign cookie based on percentage then serve
*/
-}
+};
-export const onRequest = [abTest]
+export const onRequest = [abTest];
```
## Set up conditional logic
@@ -73,31 +75,31 @@ export const onRequest = [abTest]
Based on the URL pathname, check that the cookie value is equal to `new`. If the value is `new`, then `newHomepagePathName` will be served.
```js null {7,8,9,10,11,12,13,14,15,16,17,18,19}
-const cookieName = "ab-test-cookie"
-const newHomepagePathName = "/test"
+const cookieName = "ab-test-cookie";
+const newHomepagePathName = "/test";
-const abTest = async ({request, next, env}) => {
- /*
+const abTest = async ({ request, next, env }) => {
+ /*
Todo:
1. Assign cookies based on randomly generated percentage, then serve
*/
- const url = new URL(request.url)
- if (url.pathname === "/") {
- // if cookie ab-test-cookie=new then change the request to go to /test
- // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"
-
- let cookie = request.headers.get("cookie")
- // is cookie set?
- if (cookie && cookie.includes(`${cookieName}=new`)) {
- // Change the request to go to /test (as set in the newHomepagePathName variable)
- url.pathname = newHomepagePathName
- return env.ASSETS.fetch(url)
- }
- }
-}
-
-export const onRequest = [abTest]
+ const url = new URL(request.url);
+ if (url.pathname === "/") {
+ // if cookie ab-test-cookie=new then change the request to go to /test
+ // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"
+
+ let cookie = request.headers.get("cookie");
+ // is cookie set?
+ if (cookie && cookie.includes(`${cookieName}=new`)) {
+ // Change the request to go to /test (as set in the newHomepagePathName variable)
+ url.pathname = newHomepagePathName;
+ return env.ASSETS.fetch(url);
+ }
+ }
+};
+
+export const onRequest = [abTest];
```
If the cookie value is not present, you will have to assign one. Generate a percentage (from 0-99) by using: `Math.floor(Math.random() * 100)`. Your default cookie version is given a value of `current`.
@@ -108,45 +110,43 @@ The `env.ASSETS.fetch()` function will allow you to send the user to a modified
:::note[Binding]
-
A Function is a Worker that executes on your Pages project to add dynamic functionality. A binding is how your Function (Worker) interacts with external resources. A binding is a runtime variable that the Workers runtime provides to your code.
-
:::
```js null {20-36}
-const cookieName = "ab-test-cookie"
-const newHomepagePathName = "/test"
+const cookieName = "ab-test-cookie";
+const newHomepagePathName = "/test";
const abTest = async (context) => {
- const url = new URL(context.request.url)
- // if homepage
- if (url.pathname === "/") {
- // if cookie ab-test-cookie=new then change the request to go to /test
- // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"
-
- let cookie = request.headers.get("cookie")
- // is cookie set?
- if (cookie && cookie.includes(`${cookieName}=new`)) {
- // pass the request to /test
- url.pathname = newHomepagePathName
- return context.env.ASSETS.fetch(url)
- } else {
- const percentage = Math.floor(Math.random() * 100)
- let version = "current" // default version
- // change pathname and version name for 50% of traffic
- if (percentage < 50) {
- url.pathname = newHomepagePathName
- version = "new"
- }
- // get the static file from ASSETS, and attach a cookie
- const asset = await context.env.ASSETS.fetch(url)
- let response = new Response(asset.body, asset)
- response.headers.append("Set-Cookie", `${cookieName}=${version}; path=/`)
- return response
- }
- }
- return context.next()
+ const url = new URL(context.request.url);
+ // if homepage
+ if (url.pathname === "/") {
+ // if cookie ab-test-cookie=new then change the request to go to /test
+ // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"
+
+ let cookie = request.headers.get("cookie");
+ // is cookie set?
+ if (cookie && cookie.includes(`${cookieName}=new`)) {
+ // pass the request to /test
+ url.pathname = newHomepagePathName;
+ return context.env.ASSETS.fetch(url);
+ } else {
+ const percentage = Math.floor(Math.random() * 100);
+ let version = "current"; // default version
+ // change pathname and version name for 50% of traffic
+ if (percentage < 50) {
+ url.pathname = newHomepagePathName;
+ version = "new";
+ }
+ // get the static file from ASSETS, and attach a cookie
+ const asset = await context.env.ASSETS.fetch(url);
+ let response = new Response(asset.body, asset);
+ response.headers.append("Set-Cookie", `${cookieName}=${version}; path=/`);
+ return response;
+ }
+ }
+ return context.next();
};
export const onRequest = [abTest];
diff --git a/src/content/docs/pages/how-to/web-analytics.mdx b/src/content/docs/pages/how-to/web-analytics.mdx
index c2af3a42c48a94..e0dcb374b2634c 100644
--- a/src/content/docs/pages/how-to/web-analytics.mdx
+++ b/src/content/docs/pages/how-to/web-analytics.mdx
@@ -1,10 +1,14 @@
---
pcx_content_type: how-to
title: Enable Web Analytics
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Render } from "~/components"
+import { Render } from "~/components";
diff --git a/src/content/docs/pages/how-to/www-redirect.mdx b/src/content/docs/pages/how-to/www-redirect.mdx
index 77a345396c2b7d..11fec02d648970 100644
--- a/src/content/docs/pages/how-to/www-redirect.mdx
+++ b/src/content/docs/pages/how-to/www-redirect.mdx
@@ -1,6 +1,11 @@
---
pcx_content_type: how-to
title: Redirecting www to domain apex
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Example } from "~/components";
diff --git a/src/content/docs/pages/index.mdx b/src/content/docs/pages/index.mdx
index 6555d68a21971a..fb09d9d7c2ee58 100644
--- a/src/content/docs/pages/index.mdx
+++ b/src/content/docs/pages/index.mdx
@@ -7,20 +7,35 @@ sidebar:
head:
- tag: title
content: Overview
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { CardGrid, Description, Feature, LinkTitleCard, Plan, RelatedProduct, Render } from "~/components"
+import {
+ CardGrid,
+ Description,
+ Feature,
+ LinkTitleCard,
+ Plan,
+ RelatedProduct,
+ Render,
+ Aside,
+} from "~/components";
Create full-stack applications that are instantly deployed to the Cloudflare global network.
+
Deploy your Pages project by connecting to [your Git provider](/pages/get-started/git-integration/), uploading prebuilt assets directly to Pages with [Direct Upload](/pages/get-started/direct-upload/) or using [C3](/pages/get-started/c3/) from the command line.
-***
+---
## Features
@@ -28,24 +43,21 @@ Deploy your Pages project by connecting to [your Git provider](/pages/get-starte
Use Pages Functions to deploy server-side code to enable dynamic functionality without running a dedicated server.
-
Rollbacks allow you to instantly revert your project to a previous production deployment.
-
Set up redirects for your Cloudflare Pages project.
-
-***
+---
## Related products
@@ -53,54 +65,61 @@ Set up redirects for your Cloudflare Pages project.
Cloudflare Workers provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure.
-
Cloudflare R2 Storage allows developers to store large amounts of unstructured data without the costly egress bandwidth fees associated with typical cloud storage services.
-
D1 is Cloudflare’s native serverless database. Create a database by importing data or defining your tables and writing your queries within a Worker or through the API.
-
Offload third-party tools and services to the cloud and improve the speed and security of your website.
-
-***
+---
## More resources
-Learn about limits that apply to your Pages project (500 deploys per month on the Free plan).
-
-
-
-Migrate to Pages from your existing hosting provider.
+ Learn about limits that apply to your Pages project (500 deploys per month on
+ the Free plan).
-
-Deploy popular frameworks such as React, Hugo, and Next.js on Pages.
+
+ Deploy popular frameworks such as React, Hugo, and Next.js on Pages.
-
-Connect with the Workers community on Discord to ask questions, show what you are building, and discuss the platform with other developers.
+
+ Connect with the Workers community on Discord to ask questions, show what you
+ are building, and discuss the platform with other developers.
-
-Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Workers.
+
+ Follow @CloudflareDev on Twitter to learn about product announcements, and
+ what is new in Cloudflare Workers.
diff --git a/src/content/docs/pages/migrate-to-workers.mdx b/src/content/docs/pages/migrate-to-workers.mdx
index 5928ad95016455..8aea858dc4346e 100644
--- a/src/content/docs/pages/migrate-to-workers.mdx
+++ b/src/content/docs/pages/migrate-to-workers.mdx
@@ -2,4 +2,7 @@
pcx_content_type: navigation
title: Migrate to Workers
external_link: /workers/static-assets/migrate-from-pages/
+icon:
+ lottieLink: https://fonts.gstatic.com/s/e/notoemoji/latest/2728/lottie.json
+ color: primary
---
diff --git a/src/content/docs/pages/migrations/index.mdx b/src/content/docs/pages/migrations/index.mdx
index b91a115630f785..005c87efa62232 100644
--- a/src/content/docs/pages/migrations/index.mdx
+++ b/src/content/docs/pages/migrations/index.mdx
@@ -5,6 +5,11 @@ title: Migration guides
sidebar:
hidden: true
order: 4
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { DirectoryListing } from "~/components";
diff --git a/src/content/docs/pages/migrations/migrating-from-firebase.mdx b/src/content/docs/pages/migrations/migrating-from-firebase.mdx
index 3c76c7540d31ff..8c8556d276f766 100644
--- a/src/content/docs/pages/migrations/migrating-from-firebase.mdx
+++ b/src/content/docs/pages/migrations/migrating-from-firebase.mdx
@@ -5,6 +5,11 @@ pcx_content_type: tutorial
title: Migrating from Firebase
sidebar:
hidden: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
In this tutorial, you will learn how to migrate an existing Firebase application to Cloudflare Pages. You should already have an existing project deployed on Firebase that you would like to host on Cloudflare Pages.
diff --git a/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx b/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx
index c9cb132eb27da6..d0c1d63f392441 100644
--- a/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx
+++ b/src/content/docs/pages/migrations/migrating-from-netlify/index.mdx
@@ -7,6 +7,11 @@ languages:
- JavaScript
sidebar:
hidden: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
In this tutorial, you will learn how to migrate your Netlify application to Cloudflare Pages.
diff --git a/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx b/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx
index de6e080c8987a5..63cf3a428e335e 100644
--- a/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx
+++ b/src/content/docs/pages/migrations/migrating-from-vercel/index.mdx
@@ -5,6 +5,11 @@ pcx_content_type: tutorial
title: Migrating from Vercel to Pages
sidebar:
hidden: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { Render } from "~/components";
diff --git a/src/content/docs/pages/migrations/migrating-from-workers/index.mdx b/src/content/docs/pages/migrations/migrating-from-workers/index.mdx
index 42efc7ca38f137..5a1cfcea6419d7 100644
--- a/src/content/docs/pages/migrations/migrating-from-workers/index.mdx
+++ b/src/content/docs/pages/migrations/migrating-from-workers/index.mdx
@@ -5,6 +5,11 @@ pcx_content_type: tutorial
title: Migrating from Workers Sites to Pages
sidebar:
hidden: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
In this tutorial, you will learn how to migrate an existing [Cloudflare Workers Sites](/workers/configuration/sites/) application to Cloudflare Pages.
diff --git a/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx b/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx
index 9a46689bcfb6cd..2fd4e773402c52 100644
--- a/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx
+++ b/src/content/docs/pages/migrations/migrating-jekyll-from-github-pages.mdx
@@ -7,6 +7,11 @@ languages:
- Ruby
sidebar:
hidden: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
In this tutorial, you will learn how to migrate an existing [GitHub Pages site using Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll) to Cloudflare Pages. Jekyll is one of the most popular static site generators used with GitHub Pages, and migrating your GitHub Pages site to Cloudflare Pages will take a few short steps.
diff --git a/src/content/docs/pages/platform/changelog.mdx b/src/content/docs/pages/platform/changelog.mdx
index 0fe412c94913e9..13413f5ed0462d 100644
--- a/src/content/docs/pages/platform/changelog.mdx
+++ b/src/content/docs/pages/platform/changelog.mdx
@@ -5,6 +5,11 @@ release_notes_file_name:
- pages
sidebar:
order: 3
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
import { ProductReleaseNotes } from "~/components";
diff --git a/src/content/docs/pages/platform/index.mdx b/src/content/docs/pages/platform/index.mdx
index 7bc8887e7abebb..c9a651975753ef 100644
--- a/src/content/docs/pages/platform/index.mdx
+++ b/src/content/docs/pages/platform/index.mdx
@@ -3,9 +3,15 @@ pcx_content_type: navigation
title: Platform
sidebar:
order: 9
-
+ group:
+ hideIndex: true
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
diff --git a/src/content/docs/pages/platform/known-issues.mdx b/src/content/docs/pages/platform/known-issues.mdx
index 97aa558d274f9b..be76ae774540be 100644
--- a/src/content/docs/pages/platform/known-issues.mdx
+++ b/src/content/docs/pages/platform/known-issues.mdx
@@ -3,6 +3,11 @@ pcx_content_type: concept
title: Known issues
sidebar:
order: 4
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
Here are some known bugs and issues with Cloudflare Pages:
diff --git a/src/content/docs/pages/platform/limits.mdx b/src/content/docs/pages/platform/limits.mdx
index 6f311961b07b64..fb5eecaeee00a6 100644
--- a/src/content/docs/pages/platform/limits.mdx
+++ b/src/content/docs/pages/platform/limits.mdx
@@ -3,10 +3,14 @@ pcx_content_type: concept
title: Limits
sidebar:
order: 1
-
+banner:
+ content: We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
+ type: note
+ dismissible:
+ id: pages-migrate-to-workers
---
-import { Render } from "~/components"
+import { Render } from "~/components";
Below are limits observed by the Cloudflare Free plan. For more details on removing these limits, refer to the [Cloudflare plans](https://www.cloudflare.com/plans) page.
@@ -38,10 +42,8 @@ The maximum file size for a single Cloudflare Pages site asset is 25 MiB.
:::note[Larger Files]
-
To serve larger files, consider uploading them to [R2](/r2/) and utilizing the [public bucket](/r2/buckets/public-buckets/) feature. You can also use [custom domains](/r2/buckets/public-buckets/#connect-a-bucket-to-a-custom-domain), such as `static.example.com`, for serving these files.
-
:::
## Headers
@@ -60,7 +62,7 @@ A `_redirects` file can have a maximum of 2,000 static redirects and 100 dynamic
## Users
-Your Pages site can be managed by an unlimited number of users via the Cloudflare dashboard. Note that this does not correlate with your Git project – you can manage both public and private repositories, open issues, and accept pull requests via without impacting your Pages site.
+Your Pages site can be managed by an unlimited number of users via the Cloudflare dashboard. Note that this does not correlate with your Git project – you can manage both public and private repositories, open issues, and accept pull requests via without impacting your Pages site.
## Projects
diff --git a/src/content/docs/pages/platform/storage-options.mdx b/src/content/docs/pages/platform/storage-options.mdx
index 14b9dc6437b6a5..5b3fece0642076 100644
--- a/src/content/docs/pages/platform/storage-options.mdx
+++ b/src/content/docs/pages/platform/storage-options.mdx
@@ -4,5 +4,4 @@ title: Choose a data or storage product
external_link: /workers/platform/storage-options/
sidebar:
order: 2
-
---
diff --git a/src/content/docs/style-guide/frontmatter/banner.mdx b/src/content/docs/style-guide/frontmatter/banner.mdx
index d2d8399f461494..9fcfa029b9a3cf 100644
--- a/src/content/docs/style-guide/frontmatter/banner.mdx
+++ b/src/content/docs/style-guide/frontmatter/banner.mdx
@@ -20,4 +20,93 @@ description: How to display a banner at the top of the page and when to use it.
banner:
content: Do not use banners in the Frontmatter unless a change will cause customer application to break.
---
-```
\ No newline at end of file
+```
+
+## Dismissible
+
+You can make a banner dismissible (for some number of days) by adding the `dismissible` property to the banner object.
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+ content: Do not use banners in the Frontmatter unless a change will cause customer application to break.
+ dismissible:
+ id: banner-example
+ days: 7 # default
+---
+```
+
+Any other banner with the same `dismissible_id` will be dismissed when the banner is displayed.
+
+## Styles / Types
+
+### Note
+
+The note banner is used to alert about important information.
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+ content: Ensure you read this!
+ type: note
+---
+```
+
+### Tip
+
+The tip banner is used to alert about important suggestions.
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+ content: Consider this alternative!
+ type: tip
+---
+```
+
+### Caution
+
+The caution banner is used to warn readers of upcoming disruptive changes.
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+ content: This is deprecated and will break on 1970-01-01!
+ type: caution
+---
+```
+
+### Danger
+
+The danger banner is used to alert about errors.
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+ content: This has been removed!
+ type: danger
+---
+```
+
+### Default
+
+The default banner is used in all other circumstances.
+
+```mdx wrap
+---
+title: Banner
+description: How to display a banner at the top of the page and when to use it.
+banner:
+ content: Do not use banners in the Frontmatter unless a change will cause customer application to break.
+---
+```
diff --git a/src/schemas/base.ts b/src/schemas/base.ts
index 24706741e8a6aa..ad3a669224addb 100644
--- a/src/schemas/base.ts
+++ b/src/schemas/base.ts
@@ -1,7 +1,7 @@
import { z } from "astro:schema";
import type { SchemaContext } from "astro:content";
-import { sidebar } from "./types/sidebar";
+import { sidebar, SidebarIconSchema } from "./types/sidebar";
const spotlightAuthorDetails = z
.object({
@@ -112,4 +112,17 @@ export const baseSchema = ({ image }: SchemaContext) =>
})
.optional()
.describe("Used by overrides for style guide component documentation"),
+ banner: z
+ .object({
+ content: z.string(),
+ type: z
+ .enum(["default", "note", "tip", "caution", "danger"])
+ .optional()
+ .default("default"),
+ dismissible: z
+ .object({ id: z.string(), days: z.number().optional().default(7) })
+ .optional(),
+ })
+ .optional(),
+ icon: SidebarIconSchema(),
});
diff --git a/src/schemas/types/sidebar.ts b/src/schemas/types/sidebar.ts
index d69ba71b73754c..38982dd666e5ce 100644
--- a/src/schemas/types/sidebar.ts
+++ b/src/schemas/types/sidebar.ts
@@ -49,6 +49,14 @@ const BadgeConfigSchema = () =>
})
.optional();
+export const SidebarIconSchema = () =>
+ z
+ .object({
+ lottieLink: z.string(),
+ color: z.enum(["primary"]).optional(),
+ })
+ .optional();
+
export const sidebar = z
.object({
order: z.number().optional(),
@@ -71,6 +79,7 @@ export const sidebar = z
"Hides the index page from the sidebar. Refer to [Sidebar](/style-guide/frontmatter/sidebar/).",
),
badge: BadgeConfigSchema(),
+ icon: SidebarIconSchema(),
})
.optional(),
})
diff --git a/src/util/sidebar.ts b/src/util/sidebar.ts
index a593c04f9b3cd3..bfb4ac368c2860 100644
--- a/src/util/sidebar.ts
+++ b/src/util/sidebar.ts
@@ -6,9 +6,11 @@ import { externalLinkArrow } from "~/plugins/rehype/external-links";
type Link = Extract & {
order?: number;
+ icon?: { lottieLink: string };
};
type Group = Extract & {
order?: number;
+ icon?: { lottieLink: string };
};
export type SidebarEntry = Link | Group;
@@ -195,6 +197,7 @@ async function handleGroup(group: Group): Promise {
const frontmatter = entry.data;
+ group.icon = frontmatter.sidebar.group?.icon ?? frontmatter.icon;
group.label = frontmatter.sidebar.group?.label ?? frontmatter.title;
group.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
@@ -206,6 +209,7 @@ async function handleGroup(group: Group): Promise {
return {
type: "link",
href: index.href,
+ icon: group.icon,
label: group.label,
order: group.order,
attrs: {
@@ -280,6 +284,7 @@ async function handleLink(link: Link): Promise {
if (frontmatter.external_link && !frontmatter.sidebar.group?.hideIndex) {
return {
...link,
+ icon: frontmatter.icon,
label: link.label.concat(externalLinkArrow),
href: frontmatter.external_link,
badge: frontmatter.external_link.startsWith("/api")