First Docusaurus Blog Website

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"
}

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

3. 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 name	Value
NODE_VERSION	16.13.1
YARN_VERSION	1.22.17

Any new commits pushed to main branch will trigger build.