Skip to main content

Personal Site as Docusaurus Site Format

The reason I choose Docusaurus Site as my website structure​

I'm not good at writing website. According to my instuctor's(Matthew Yu, graduated from Fab Academy since 2024) advices, I choose Docusaurus Site as my website structure. This website refers to structure of Matthew's website. I will keep update the website during Fab Academy 2025.

  • It's easy to build up the website and powerful.
  • It's easy to make change.

Deploy Steps​

Step1: Visit Docusaurus official Website and install essential files.​

  1. Go to the Docusaurus official websites.
  2. Go to Node.js and install.
  3. Open command prompt and type the command:
npx create-docusaurus@latest my-website classic

Docusaurus website will be installed and new folder named "my-website'.

Step2: Download my original website files on GitLab.​

  1. Install Git from git-scm.com or install by winget tool. Input the command in command prompt:
winget install --id Git.Git -e --source winget
  1. Input the command in command prompt, which clone the website file to my local computer:
git clone https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/chaihuo/students/chonkit-kuok.git

Step3: Replace my GitLab files by Docusaurus files.​

  1. I build a new file folder as "backup" and put the original files from gitlabs. I can call back the original website if necessary.
  2. I create a new file folder "public" which is necessary for input the builded website file.
  3. Install yarn for building a virtual server to test the Docusaurus website structure. The install command is
npm install --global yarn
  1. Input the command in command prompt, which can run the website locllay at http://local:3000.
yarn start

Step4: Change contents​

  1. Build a new file folder week1 at docs, where I will store all of the assignment files, my introduction, my final proejct data, etc.

    Add new files yourself-introduction.md, Fab_Academy_Agreement.md, Final_Project.md, Personal_Site_as_Docusaurus_Site_Format.md into week1 folder. And edit the Markdown files(.md) respectively.

  2. After editing the .md files, open sidebars.js and input the relative path for adding hyper links at sidebar.

  1. The link of the assignment files will be shown at the sidebar.

  1. Finally, I want to group all the assignments as a list. The commands are modified as below:

The links are grouped as a category. So it can be expanded or stored:

Step5: Upload (Push) to Github​

  1. Input the command which can build up the docusaurus site to a standard website file.
yarn build
  1. After building the website, we can use the command:
git add .

to add the changed file into standby place.

  1. Use the command to define the changes and it will be shown at 'Last commit'. For example, we just built a new folder backup file to store the original files of gitlab. And define the changes as "TEST":
git commit -m "TEST"

Then, we can see the `Last commit' will show "TEST".

  1. Finally, use the commnad which can be push the updates to gitlab:
git push

The red box in the picture above shown the version of the website, we can also check it in gitlab.

Problem Faced​

After I update the website to gitlab, the website cannot work as shown as below:

I asked my instuctor Matthew and he gave me some hints. The baseUrl should be given as the format of gitlab link. So I modified the baseUrl by opening docusaurus.config.js from "" to " /2025/labs/chaihuo/students/chonkit-kuok/".

Finally, it works!​

A new website structure can be accessed by the url https://fabacademy.org/2025/labs/chaihuo/students/chonkit-kuok