Skip to content
On this page

Project Management - How to build your site

In this week's assignment,I have mainly accomplished three parts of work including: Setting up PC environments / Create a website / Plan a final project

Step1 : Prepare

Installing all the necessary tools to build the webpage:

  • Git is used to control our version in gitlab,mac don't need to install,it use to setting git and gitlab;
  • Gitlab is used as a servicer for our webpage;
  • VScode for edit document;
  • Nodejs is used it to build the environment;
  • VitePress is a devlopment dependencies for the project;
  • Markdown language to write our document;

Step2 : Set up git

I have followed the [tutorial] of Git ( First download git by:

brew install git

Set user config for git:

$ git config --global "yaorun-zhang"
$ git config --global ""

Check if there is any SSH-Key existing:

cat ~/.ssh/

If not generate SSH-Key:

ssh-keygen -t rsa -C ""

Check the public key you just created:

cat ~/.ssh/

Step3 : Porject clone

Go to my gitlab repository select 'Clone with HTTPS'.

Use git bash to clone the porject to my computer.

$ cd /d/gitproject
$ git init
$ git clone

Use git bash to generate the SSH Key for remote connection.

$ ssh-keygen -t rsa -C ''

Copy the SSH Key.

$ cd /c/Users/Yaorun_Zhang/.ssh
$ cat

Paste it to gitlab server.

Test push some local change to my server.

$ git add --all
$ git commit -m"Adding test infor"
$ git push origin main

Step5 : Tips for edit file with VScode

Link git to your VScode, go to settings and add the path of your git.

Set direction.

    "git.path": "c:\Program Files\Git\bin\git.exe"

Step6: Install the VitePress

First install 'nodejs' library as a working environment. Download the installer from NodeJS WebSite. Run the installer. Follow the installer steps, agree the license agreement and click the next button. Restart your system/machine.

Follow the instraction on VitPress website. Initialize with your preferred package manager.

$ npm init

Add VitePress and Vue as dev dependencies for the project.

$ npm install -D vitepress vue

Serve the documentation site in the local server.

$ npm run docs:dev

Step7: Change the .yml file

For gitlab operation, the .yml configuration file needs to be changed.

image: node:16

      - node_modules/
    - yarn install
    - yarn docs:build
      - public
    - main

Step8: Edit the page export default configeration

The default configeration was edited to include nav-bar and side-bar. The webpage export direction was set to ../public.

export default {
    title: "FabAcademy 2023",
    description: "FabAcademy 2023",
    outDir: "../public",
    base: "/2023/labs/ningbo/students/yaorun-zhang/",
    themeConfig: {
      sidebar: [

            text: "Home",
            items: [
              { text: "Home page", link: "/" },

            text: "About",
            items: [
              { text: "About me", link: "/about/" },
              { text: "Student agreement", link: "/about/agreement" },

          text: "Assigements",
          items: [
            { text: "Week 1. Project management ", link: "/assignments/week1/" },
            { text: "Week 2. Computer aided design ", link: "/assignments/week2/" },
            { text: "Week 3. Computer controlled cutting ", link: "/assignments/week3/" },
            { text: "Week 4. Embedded programming ", link: "/assignments/week4/" },
            { text: "Week 5. 3D Scanning and printing ", link: "/assignments/week5/" },
            { text: "Week 6. Electronics design ", link: "/assignments/week6/" },
            { text: "Week 7. Computer controlled machining ", link: "/assignments/week7/" },
            { text: "Week 8. Electronics production ", link: "/assignments/week8/" },
            { text: "Week 9. Molding and casting ", link: "/assignments/week9/" },
            { text: "Week 10. Output devices ", link: "/assignments/week10/" },
            { text: "Week 11. Mechanical design & machine design ", link: "/assignments/week11/" },
            { text: "Week 12. Input devices ", link: "/assignments/week12/" },
            { text: "Week 13. Networking and communications ", link: "/assignments/week13/" },
            { text: "Week 14. Interface and application programming ", link: "/assignments/week14/" },
            { text: "Week 15. Wildcard week ", link: "/assignments/week15/" },
            { text: "Week 16. Applications and implications ", link: "/assignments/week16/" },
            { text: "Week 17. Invention, intellectual property and income ", link: "/assignments/week17/" },
            { text: "Week 18. Project development ", link: "/assignments/week18/" },

            text: "Projects",
            items: [
              { text: "Mid-term project ", link: "/projects/midterm" },
              { text: "Final project", link: "/projects/final" },


      nav: [
          text: "Home",
          link: "/",

          text: "About",
          link: "/about/",

          text: "Assignments",
          link: "/assignments/week1/",

          text: "Projects",
          link: "/projects/midterm",

Step9: Tips for push.

Before push add a .gitignore file for server to ignore some of the local enivroment config file updates as this enviroment will be automatically rebuild on server.


Step10: Use VScode to push.

First save all modifications using 'ctrl + s'. Second gou to the source control as below.

Then add a message about the changes.
Push the code to server use button below. It will commit and sync the change at same time.