Skip to content

Week 1 - Project Management

Task

Deploy a website containing a personal profile and project proposal to GitLab using Git.

Steps:

  1. Install Git
  2. Configure GitLab account
  3. Set up a personal website (using VitePress)
  4. Populate content
  5. Deploy to GitLab

1. Install Git

  • You can download and install Git for Windows from the official Git website, or use GitHub Desktop to install Git. Here, I choose the first method.

2. Configure Git

  • When configuring Git, you need to set the username and email address. Run the following commands to set them:

    bash
    git config --global user.name "xusun"
    git config --global user.email "xu.sun@nottingham.edu.cn"

3. Set up the website (VitePress)

Install Node.js
First, you need to install Node.js. Visit the official Node.js website to download and install the latest stable version. Here, I installed version 22.13. After installation, add the bin directory to the environment variables.

clone repository Clone the project locally: Use the git clone command to clone the remote project locally.

bash
git clone https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/unnc/students/xu-sun.git

Install VitePress

Run the following command outside the project folder to install VitePress:

bash
npm add -D vitepress

Running this command in the project root directory will generate a node_modules folder, which may cause issues with large cache uploads to GitLab. Therefore, I choose to use VitePress separately rather than within the project. After installation, place the .bin file in the environment variables.

  • VitePress comes with a command-line setup wizard that can help you build a basic project. Run the following command in the project to start building the project and follow the wizard to configure it:

    bash
    npx vitepress init

    • Now, a basic website has been built, and the next step is to populate some content.

  1. Populate content

    • VitePress configures the site's basic information through docs/.vitepress/config.ts, including title, description, theme, plugins, navigation bar, sidebar, etc.
    • I first set the website title to "Fab Academy 2025", which will be displayed on the browser tab.
    • Next is the top navigation bar, in addition to Home, I added three others: About (which contains my personal introduction), Assignments (which includes my weekly assignments), Projects (my final project).
    • Finally, the left sidebar is only displayed on the Assignments page, containing my weekly assignments and specific content, and can be clicked to jump to the corresponding interface.
    ts
    import { defineConfig } from 'vitepress'
    
    export default defineConfig({
      title: "Fab Academy 2025",
      description: "A VitePress Site",
      themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'About', link: '/about/aboutme' },
          { text: 'Assignments', link: '/assignments/week1' },
          { text: 'Projects', link: '/project/final_project' },
        ],
        sidebar: {
          '/assignments/': [
            {
              text: 'Assignments',
              items: [
                { text: 'Week 1. Project management', link: '/assignments/week01' },
                { text: 'Week 2. Computer Aided design', link: '/assignments/week02' },
                { text: 'Week 3. Computer controlled cutting', link: '/assignments/week03' },
                { text: 'Week 4. Embedded programming', link: '/assignments/week04' },
                { text: 'Week 5. 3D Scanning and printing', link: '/assignments/week05' },
                { text: 'Week 6. Electronics design', link: '/assignments/week06' },
                { text: 'Week 7. Computer controlled machining', link: '/assignments/week07' },
                { text: 'Week 8. Electronics production', link: '/assignments/week08' },
                { text: 'Week 9. Molding and casting', link: '/assignments/week09' },
                { 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' }
              ]
            }
          ],
        },
      },
    })

4. Deploy to GitLab

1. Use Git to commit and push changes

Use Git to commit and push changes to the remote repository on GitLab:

  • Add files to Git:

    bash
    git add .    # Add all changes
    git commit -m "commit message"    # Commit changes
    git push origin new-feature-branch    # Push changes to GitLab

2. Configure the .gitlab-ci.yml file

  • The .gitlab-ci.yml file is typically used to configure GitLab CI/CD, defining a CI/CD pipeline to automatically build VitePress documentation.
  • I use node:22 as the runtime environment, cache node_modules/ to reduce repeated dependency installations. Then execute the npm install command to install dependencies and npm run docs:build to generate a static website. GitLab Pages will use public/ as the deployment directory and only execute on the main branch.
yaml
image: node:22
pages:
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run docs:build
  artifacts:
    paths:
      - public
  only:
    - main

3. Configure a custom domain

  • To deploy VitePress on GitLab Pages and set the site URL to
    https://<username>.gitlab.io/<repository>/, you need to modify the VitePress configuration.

  • In docs/.vitepress/config.js, add the base and outDir options:

    js
    outDir: "../public",
    base: "/2025/labs/unnc/students/xu-sun/",