Skip to main content

Git Tutorial

By the mission on Week 1, we need to build a personal site in the class archive describing ourself and our final project

Before modifying the website​

Details

First, Fab Academy has already set up a default personal URL for us.
The format should be like

https://fabacademy.org/"Year"/labs/"Lab name"/students/"Your name"/

For example, my site URL is

https://fabacademy.org/2025/labs/chaihuo/students/longwai-chan/

We need to link the site to the GitLab, by log in GitLab with the Fablabs account.

Download Git and do the set up​

Git is a version control system that allows multiple people to collaborate on code. It will be easy to set up your information and effectively manage or modify your website data in GitLab. You can download Git from their website.

Installation and setting

After downloading Git, we can use Git software, cmd.exe, or other applications like Visual Studio Code to enter commands for managing your setup data.

  1. Set your name and email The name and email will be used as a record reference when you modify the website later. The name and email can differ from the one on Gitlab.

I use the command and enter the code below:
$ git config --global user.name "my name"
$ git config --global user.email "my email" After setting the name and email, use the command $ cat ~/.gitconfig to confirm the information

for my example

　

  1. Set SSH Key

The SSH Key is like a key to confirm you have the right to modify the data in the Gitlab.

2.1 Create SSH Key We can use the command ssh-keygen to create an SSH key.


In this case, the key is id_ed25519.pub

2.2 Pair the SSH-keygen to the GitLab

  • Go to your GitLab page, 1 Click your icon to find 2Edit profile.
  • Then you can find 3SSH Key in the side bar.
  • After click in, you can find the Add key button at 4.
  • Then place your key at the box 5.

2.3 Pair the personal access tokens For the first time to connect computer to the Gitlab, we need a personal access token to link them up.

  • Find the Access tokens in the side bar
  • Copy the token that auto generated
  • Use the Token to sign in GitLab

2.4 Download a copy of your website from GitLab by using the command in cmd.exe.

git clone https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/chaihuo/students/longwai-chan.git

The website data should be downloaded to a folder named as your name.

Modifying the website​

Basic knowledge about website​

info

.html contains the basic structure of the website, like the word.
.css contains the style of the page.
.js contains the interact function of the page, also like the variable.

Try to modify the page​

Using the simplest way, we can edit the index.html directly with Notepad. For example:

To add an new term in the navbar(yellow arrow), we can add code in the navbar-inner class

<div class="navbar-inner">
    <a herf="index.html">Home</a> <!--link to index.html-->
    <a herf="xxx.html">Weekly Assignments</a>
    ...
    <a>FABLAB MSC</a> <!--add a new term without link-->
</div>

To add a sidebar(Blue aerrow), we can create a new class in index.html

<div class="content">
    <div class="sidebar">  <!--add a new class name sidebar-->
        <a herf="Week1.html">Week1</a>
        <a>Week2</a>
        ...
    </div>
    ...

We also need to modify the style.css file to set the position and the outlook of the sidebar.

.sidebar{
    height: 100%
    width: 140px;
    position: fixed;
    z-index:1;
    top 56px;
    ...

Both the html and css code can be find at HERE


Modified outlook of the webpage

Upload to Gitlab​

Here are some basic Git commands need when you commit your file:
git add .: Add all changes to the staging area.
git status: Check the status of Ir files (modified, added, etc.).
git commit -m "note or message": Commit the changes with a message inside the " ".
git push: Push Ir changes to the remote repository.
git pull: Pull the latest changes from the remote repository.
For a simple commit, at least you need to use git add ., git commit -m " " and git push.