Skip to main content

First Docusaurus Blog Website

· One min read
czhen

This is a static blog website built by docusaurus and hosted by Cloudflare Pages.

The content below will introduce how we implement this website.

Scaffold a skeleton Docusaurus website​

npx create-docusaurus@latest my-website classic --typescript

Then npm will install dependencies automatically.

Use yarn instead of npm​

  1. cd my-website

  2. Remove my-website/package-lock.json

  3. Run yarn

Customize docusaurus.config.js​

  1. Remove all about /docs and clean all files under /blog

  2. Update all default fields

Add i18n​

  1. Add locale switcher in navbar config
{
  "type": "localeDropdown",
  "position": "right"
}

  1. Use write-translations CLI, now we add locale zh-Hans by running yarn write-translations --locale zh-Hans

  2. Update json and .md generated by step 2

Connect to Cloudflare Pages​

Sign in Cloudflare Pages.

Connect to Github account and select target repo.

Here's an example of Build configurations:

Build command:                    yarn && yarn build
Build output directory:           /build
Root directory:                   /my-website
Build comments on pull requests:  Enabled

Here's an example of environment-variables:

Variable nameValue
NODE_VERSION16.13.1
YARN_VERSION1.22.17

Any new commits pushed to main branch will trigger build.