You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/workers/framework-guides/web-apps/more-web-frameworks/docusaurus.mdx
+87-18Lines changed: 87 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,42 +7,111 @@ description: Create a Docusaurus application and deploy it to Cloudflare Workers
7
7
8
8
import {
9
9
Badge,
10
+
Details,
11
+
Steps,
12
+
WranglerConfig,
13
+
TabItem,
14
+
Tabs,
10
15
Description,
11
16
InlineBadge,
12
17
Render,
13
18
PackageManagers,
14
19
} from"~/components";
15
20
16
-
In this guide, you will create a new [Docusaurus](https://docusaurus.io/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).
17
-
18
-
## 1. Set up a new project
19
-
20
-
Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Docusaurus' official setup tool, and provide the option to deploy instantly.
21
-
22
-
To use `create-cloudflare` to create a new Docusaurus project with Workers Assets, run the following command:
21
+
**Start from CLI**: Scaffold a Docusaurus project on Workers, and pick your template.
23
22
24
23
<PackageManagers
25
24
type="create"
26
25
pkg="cloudflare@latest"
27
26
args="my-docusaurus-app --framework=docusaurus"
28
27
/>
29
28
30
-
After setting up your project, change your directory by running the following command:
29
+
**Or just deploy**: Create a documentation site with Docusaurus and deploy it on Cloudflare Workers, with CI/CD and previews all set up for you.
30
+
31
+
[](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/staging/astro-blog-starter-template)
32
+
33
+
## What is Docusaurus?
34
+
35
+
[Docusaurus](https://docusaurus.io/) is an open-source framework for building, deploying, and maintaining documentation websites. It is built on React and provides an intuitive way to create static websites with a focus on documentation.
36
+
37
+
Docusaurus is designed to be easy to use and customizable, making it a popular choice for developers and organizations looking to create documentation sites quickly.
38
+
39
+
## Deploy a new Docusaurus project on Workers
40
+
41
+
<Steps>
42
+
1.**Create a new project with the create-cloudflare CLI (C3).**
<Detailsheader="What's happening behind the scenes?">
50
+
When you run this command, C3 creates a new project directory, initiates [Docusaurus' official setup tool](https://docusaurus.io/docs/installation), and configures the project for Cloudflare. It then offers the option to instantly deploy your application to Cloudflare.
51
+
52
+
</Details>
53
+
54
+
2.**Develop locally.**
55
+
56
+
After creating your project, run the following command in your project directory to start a local development server.
57
+
58
+
<PackageManagerstype="run"args={"dev"} />
59
+
60
+
3.**Deploy your project.**
61
+
62
+
Your project can be deployed to a [*.workers.dev subdomain](/workers/configuration/routing/workers-dev/) or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your local machine or any CI/CD system, (including [Workers Builds](/workers/ci-cd/#workers-builds/)).
63
+
64
+
Use the following command to build and deploy your project. If you're using a CI service, be sure to update your "deploy command" accordingly.
65
+
66
+
<PackageManagerstype="run"args={"deploy"} />
67
+
68
+
</Steps>
69
+
70
+
## Deploy an existing Docusaurus project on Workers
71
+
72
+
### If you have a static site
73
+
74
+
If your Docusaurus project is entirely pre-rendered (which it usually is), follow these steps:
75
+
76
+
77
+
<Steps>
78
+
1.**Add a Wrangler configuration file.**
79
+
80
+
In your project root, create a Wrangler configuration file with the following content:
81
+
82
+
<WranglerConfig>
83
+
84
+
```json
85
+
{
86
+
"name": "my-docusaurus-app",
87
+
// Update to today's date
88
+
"compatibility_date": "2025-03-25",
89
+
"assets": {
90
+
"directory": "./build"
91
+
}
92
+
}
93
+
```
94
+
95
+
</WranglerConfig>
96
+
<Detailsheader="What's this configuration doing?">
97
+
The key part of this config is the `assets` field, which tells Wrangler where to find your static assets. In this case, we're telling Wrangler to look in the `./build` directory. If your assets are in a different directory, update the `directory` value accordingly.
98
+
Refer to other [asset configuration options](/workers/static-assets/routing/).
99
+
100
+
Also note how there's no `main` field in this config - this is because you're only serving static assets, so no Worker code is needed for on demand rendering/SSR.
101
+
</Details>
31
102
32
-
```sh
33
-
cd my-docusaurus-app
34
-
```
103
+
2.**Build and deploy your project.**
35
104
36
-
## 2. Develop locally
105
+
You can deploy your project to a [`*.workers.dev` subdomain](/workers/configuration/routing/workers-dev/) or a [custom domain](/workers/configuration/routing/custom-domains/) from your local machine or any CI/CD system (including [Workers Builds](/workers/ci-cd/#workers-builds)). Use the following command to build and deploy. If you're using a CI service, be sure to update your "deploy command" accordingly.
37
106
38
-
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/).
114
+
Bindings are a way to connect your Docusaurus project to other Cloudflare services, enabling you to store and retrieve data within your application.
45
115
46
-
The following command will build and deploy your project. If you're using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.
0 commit comments