Because the company always uses React, I checked vuepress was not good, then I checked React and docusaurus was friendly, so I chose this one. I encountered some problems when deploying to Github Pages.

  • Github project locationhttps://github.com/yingwinwin/yingwinwin.github.io
  • After deployment project https://yingwinwin.github.io/ may foreign site is not stable, sometimes into don’t go, don’t know what is your home network is bad or reason.

Build local projects

  • Docusaurus official website scaffolding

  • My-website is the name of the project. Classic is the default theme of Docusaurus. There are also other plugins that can be downloaded from the official website

npx @docusaurus/init@latest init my-website classic
Copy the code
  • Follow the instructions after the installation is complete
cd my-website
npm run start
Copy the code
  • It’s already available at this timelocalhost:3000See the project home page

Modify the configuration

  • The config file is docusaurus.config.js, in which you can modify some of the home page displays. I wrote a comment in this file for your reference.

  • Sidebar configuration file sidebars.js, you can refer to my writing, can also see the official documentation.

  • Once you have modified your configuration, you can try to deploy.

Set up github Pages project + Automatic deployment

1. Preparation

  • Create a project and set it in SettingGitHub Pages, change the build branch togh-pagesThis branch is to be set up by itself, there is no need to have anything in it at present, push the current project code tomasterBranch.

  • Be sure to configure it properlydocusaurus.config.jsThese four attributes in the file are very important. If there is a problem, it may be that this is not configured, and the rest can be as needed. Ok
  url: 'https://yingwinwin.github.io'.// The current page URL can be seen in setting
  baseUrl: '/'./ / here to see you need to add, if add to/win/access home page is https://yingwinwin.github.io/win/
  organizationName: 'yingwinwin'.// Here is your Github name
  projectName: 'yingwinwin.github.io'.// This is the name of the github project you want to deploy to
Copy the code

2. Configure automatic deployment

  • Set up thepushtomasterThe branch is then automatically deployed, which is where the setup is usedgh-pagesBranch, set up in the root directory.github/workflows/documentation.ymlDocument, referenceRuan Yifeng big man’s blog
  • Be carefulACCESS_TOKENThe configuration of this should be in advancegithubTo configure. referenceMaking website
  • Be carefulCNAMEFile if you have your own domain name using notusername.github.ioThis domain name needs to be establishedCNAMEFile and write your domain name in it.
name: Deploy Github pages
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
      with:
        persist-credentials: false
    - name: Install and Build
      run: | npm install npm run-script build    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: The ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: npm install && npm run build
Copy the code

3. Push projects

  • Push all current project files tomasterOn the branch, if there are no problems at this point,githubtheactionAnd the job automatically deploys. The deployment details can be viewed at this point in the diagram. Once the deployment is complete, you can open your home page and see the deployed content. It’s about the same as the official website.

  • The address of the article on docusaurus is clean and tidy. You can also write markdown with React.
  • If you have any other questions, please leave a message.