Appearance
Week 1 - Project Management
Task
Deploy a website containing a personal profile and project proposal to GitLab using Git.
Steps:
- Install Git
- Configure GitLab account
- Set up a personal website (using VitePress)
- Populate content
- 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:
bashgit 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:
bashnpx vitepress init
- Now, a basic website has been built, and the next step is to populate some content.
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.
tsimport { 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' } ] } ], }, }, })
- VitePress configures the site's basic information through
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:
bashgit 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, cachenode_modules/
to reduce repeated dependency installations. Then execute thenpm install
command to install dependencies andnpm run docs:build
to generate a static website. GitLab Pages will usepublic/
as the deployment directory and only execute on themain
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 thebase
andoutDir
options:jsoutDir: "../public", base: "/2025/labs/unnc/students/xu-sun/",