Skip to content

[Workers]: Update Docusaurus framework guide #21787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: production
Choose a base branch
from
+87 −18
Open

[Workers]: Update Docusaurus framework guide #21787

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 87 additions & 18 deletions src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,111 @@ description: Create a Docusaurus application and deploy it to Cloudflare Workers

import {
Badge,
Details,
Steps,
WranglerConfig,
TabItem,
Tabs,
Description,
InlineBadge,
Render,
PackageManagers,
} from "~/components";

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/)).

## 1. Set up a new project

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.

To use `create-cloudflare` to create a new Docusaurus project with Workers Assets, run the following command:
**Start from CLI**: Scaffold a Docusaurus project on Workers, and pick your template.

<PackageManagers
type="create"
pkg="cloudflare@latest my-docusaurus-app"
args={"--framework=docusaurus --platform=workers"}
/>

After setting up your project, change your directory by running the following command:
**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.

[![Deploy to Workers](https://deploy.workers.cloudflare.com/button)](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)

## What is Docusaurus?

[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.

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.

## Deploy a new Docusaurus project on Workers

<Steps>
1. **Create a new project with the create-cloudflare CLI (C3).**
<PackageManagers
type="create"
pkg="cloudflare@latest"
args={"my-docusaurus-app -- --framework=docusaurus --platform=workers"}
/>

<Details header="What's happening behind the scenes?">
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.

</Details>

2. **Develop locally.**

After creating your project, run the following command in your project directory to start a local development server.

<PackageManagers type="run" args={"dev"} />

3. **Deploy your project.**

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/)).

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.

<PackageManagers type="run" args={"deploy"} />

</Steps>

## Deploy an existing Docusaurus project on Workers

### If you have a static site

If your Docusaurus project is entirely pre-rendered (which it usually is), follow these steps:


<Steps>
1. **Add a Wrangler configuration file**

In your project root, create a Wrangler configuration file with the following content:

<WranglerConfig>

```json
{
"name": "my-docusaurus-app",
// Update to today's date
"compatibility_date": "2025-03-25",
"assets": {
"directory": "./build"
}
}
```

</WranglerConfig>
<Details header="What's this configuration doing?">
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.
Read about other [asset configuration options](/workers/static-assets/routing/).

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.
</Details>

```sh
cd my-docusaurus-app
```
2. **Build and deploy your project**

## 2. Develop locally
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.

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.
<PackageManagers type="exec" pkg="docusaurus" args="build" />
<PackageManagers type="exec" pkg="wrangler@latest" args="deploy" />

<PackageManagers type="run" args={"dev"} />
</Steps>

## 3. Deploy your Project
## Use bindings with Docusaurus

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/).
Bindings are a way to connect your Docusaurus project to other Cloudflare services, enabling you to store and retrieve data within your application.

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.
<Render file="frameworks-bindings" />

<PackageManagers type="run" args={"deploy"} />