diff --git a/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx b/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx index 53a5875a5a0577..4e2e3eceea5bb7 100644 --- a/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx +++ b/src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx @@ -7,19 +7,18 @@ 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. -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 + + +1. **Create a new project with the create-cloudflare CLI (C3).** + + +
+ 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. + +
+ +2. **Develop locally.** + + After creating your project, run the following command in your project directory to start a local development server. + + + +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. + + + +
+ +## 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: + + + +1. **Add a Wrangler configuration file** + + In your project root, create a Wrangler configuration file with the following content: + + + + ```json + { + "name": "my-docusaurus-app", + // Update to today's date + "compatibility_date": "2025-03-25", + "assets": { + "directory": "./build" + } + } + ``` + + +
+ 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. +
-```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. + + - +
-## 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. + -