FabAcademy 2023

Appearance

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 (http://fabacademy.org/2019/docs/FabAcademy-Tutorials/week01_principles_practices_project_management/git_simple.html). First download git by：

brew install git

Set user config for git：

$ git config --global user.name "yaorun-zhang"
$ git config --global user.email "zhang.yaorun@gmail.com"

Check if there is any SSH-Key existing：

cat ~/.ssh/id_rsa.pub

If not generate SSH-Key：

ssh-keygen -t rsa -C "zhang.yaorun@gmail.com"

Check the public key you just created：

cat ~/.ssh/id_rsa.pub

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 https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/ningbo/students/yaorun-zhang.git

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

$ ssh-keygen -t rsa -C 'zhang.yaorun@gmail.com'

Copy the SSH Key.

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

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.

json
{
    "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

pages:
  cache:
    paths:
      - node_modules/
  script:
    - yarn install
    - yarn docs:build
  artifacts:
    paths:
      - public
  only:
    - 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.

.DS_Store
node_modules
/build
/package
.env
.env.*
!.env.example
.output
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

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.