DEV Community

Cover image for Deploying Docusaurus to Cloudflare Pages
Gaurish Sethia
Gaurish Sethia

Posted on • Updated on

Deploying Docusaurus to Cloudflare Pages

Hello there!
Docusaurus is a commonly used static site generator. It is built on top of React.js and can be used to make any kind of site (personal website, product, blog, marketing landing pages, etc).

Cloudflare Pages is a JAMStack platform for frontend developers to collaborate and deploy websites.

Creating the App

Creating Docusaurus App

Now, Once you've created change your directory to the project.

Then, Run the start command.

It will open up your browser to the development website: http://localhost:3000/

Demo website

Now, Your Docusaurus Website is ready, Let's deploy it over Cloudflare pages.

Change your docusaurus.config.js url field to https://.pages.dev or your custom domain.

Unlike Vercel and Netlify, Cloudflare pages doesn't support cli deployments yet (They might come sooner or later)

EDIT: You can now deploy to Cloudflare pages via Wranger CLI. Read more here

So, You'll need to push all the code over Github.

git init
git add -A
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/gaurishhs/Docusaurus-Cf-Pages.git 
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

After Running these commands, If you check your Github, You'll find the code there.

Head to your Cloudflare pages dashboard, Signup for pages if you haven't yet.

Create an app and select your Github repository.

Choose Create React App as your framework preset.

Create an environment variable NODE_VERSION with the value 16.13.2

Docusaurus requires a node version more than or equal to node v14, 16.13.2 is a LTS(Long time support) Version of Node.js

Then Click Deploy, Within 2mins your app would be ready :)

Cloudflare has now introduced Fast builds 😃

https://docusaurus-cf-pages.pages.dev/

Add a Custom Domain To Your App
Redirecting www to apex domain

Contact

  • If you face any issues, Do not hesitate to contact me

Useful Links

Top comments (0)