Use docusaurus to build a website and deploy it to github

Docusaurus is essentially a set of  npm packages . Node.js  v16.14 or above (you can run  node -v the command to check the version number).

1. Use command line tools to quickly and easily install Docusaurus and build a website framework. Use the classic template to get started quickly. It will create a new directory containing template files:

npx create-docusaurus@latest my-website classic

You can also use  --typescript the option to use the TypeScript variant of the template. See  Typescript support for more details .

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

2. Run the project after the installation is successful. By default, the browser will automatically open a new window at http://localhost:3000.

npm run start 或者 yarn start

3. Build

Docusaurus is a modern static web page generator. We need to generate the website as static content and upload it to the web server before it can be accessed by others. To build the site, use the following commands:

npm run build 或者 yarn run build

A directory is generated  build that can then be uploaded to   static web hosting services such as GitHub Pages , Vercel , Netlify , etc.

4. Take github as an example: deploy to Github Pages

(1) Create a local warehouse and create a remote warehouse on github

          The name is generally your own: xxx(account name).github.io, click Create

(2) Establish a connection between the local warehouse or the new warehouse and the github warehouse

        Note: Points to pay attention to when establishing a connection between the local warehouse and the remote warehouse

// 这里不使main分支，直接改为gh-pages
git branch -M gh-pages
git push -u origin gh-pages

(3) In the template downloaded by docusaurusdocusaurus.config.js文件配置 

module.exports = {
  // ...
  url: 'https://cfgjfy.github.io', // 你的网站URL（刚所创建的github仓库名）
  baseUrl: '/',
  projectName: 'cfgjfy.github.io', // 刚所创建的github仓库名
  organizationName: 'cfgjfy', // github账户名
  deploymentBranch: 'gh-pages', // 部署到的分支名
  // ...
};

(4) deployment

     Enter the following command in git bash

GIT_USER='github账户名' yarn deploy

Note: Execute the above command to complete cloning, building, and submitting in one step. It is much more convenient for us to manually execute the build command and then deploy it to a hosting service.

(5) Click on the setting----->pages of the warehouse

Static web pages can be accessed through the URL above.

Regarding the specific configuration of the website content, I will not elaborate here, you can see the official website:

Introduction | Docusaurus