Skip to content

1. Principles and practices

Week Objective

  • Set up GitLab and your Website
  • Read, sign (add your name to) the student agreement and commit it to your repo
  • Plan and sketch a potential final project

This week I worked on defining my final project idea and started to getting used to the documentation process.

Note: everything documented below was done on a ThinkPad with Microsoft Windows 11 Pro system.

Needed Software

Final Project Ideas: Interactive Map

Since our Global Study Program in Charlotte Latin is getting unnoticed by people, I decided to do something to help it advertise. I decided to make an interactive map to present the moments of Global Study. I decided to add buttons on the marks of the places where we have our sister schools or the common places where our global study program usually goes. When I click on the buttons, the embedded screen will display the video about wonderful moment during the trip in Global Study. Visitors can play with the map in our school, which helps them learn more about both our Global Study program and our Engineering program.

Version Control

Version control is a system that record every single version of your work. So if I messed up something on the newest version, I can find the previous ones and recover the right version.

Other Version Control systems

I used GitLab for thr vrersion control system because it is widely used and convenient. Other version control systems like Github and Bazaar (easy to use and support both centralized and distributed worflows).

The reason I chose GitLab is that we can create branches of teams. We need to work collaborately when we have group assignments. GitLab makes the collaboration easier since we can push our changes to the same repo.

MKdocs and VScode

I decided to switch from html to mkdocs because Dr.Taylor told us that it iseasier to use mkdocs than html. VScode is also recommended since it is easy to use and I can also use html code in it if I want.

Step 1: Download Git on my computer

Thanks to our local instructor, I looked over Dr.Taylor’s slides for general ideas of Gitlab and then I followed this tutorial to set up Git

I selected Add a Git Bash Profile to Windows Terminal so that I can access GitBash directly from Windows Terminal.

Since I am going to use Markdown in VS code, I decided to set VS code as Git’s default editor.

Test (Optional)

I followed the tutorial and tested if the Git would work fine. However, when I push the origin master command, I fail to push the file into my remote repository. At last, I decided to stop doing the testing.

Step 2: Repo Setup and Cloning

I used ChatGPT to help me connect Gitlab to my local computer

  1. Generate the SSH key I folowed Angelina’s Site to help me generate the SSH key. I used the following commands:
git config --global user.name "your_name"
git config --global user.email "your_email"
ssh-keygen -t rsa -C “your_email”

Note: You don’t need to enter a public key because it would ask you to type it everytime you need SSH key. Just type Enter when you see that command.

Then I used the following command to generate the SSH key.

cat ~/.ssh/id_rsa.pub
  1. Copy and paste the SSH key into Gitlab

Go to Profile –> Edit Profile –> SSH Key and paste the long code started with ssh-rsa

  1. Cloning my repository

I created a new folder to have my local repository in. In GitBash, I use following command to clone my repository:

cd "type/in/your/path"
//Don't forget to put "" mark around the path
git clone repository_url
//Copy and paste the url from Code --> Download --> Copy url with SSH

Error: After cloning, I tried to push changes to my repository. However I got the error message.

When it says I have another repository, I realized that my failed test repository may be the issue. So I decided to delete everything in my folder created for my local repo and also the test document, and then I restarted cloning.

  1. Restart Cloning

I use the same codes above and this time I succeeded!

Getting Familiar with Mantras

I decided to get familiar with Git Mantra since I am going to use it throughout Fab Academy learning, even in the future. I used the tutorial from Dr.Taylor’s Tutorial of slide 23

I also asked ChatGPT to give me some common mantras for Git. It gave me common commands of how to pull, commit and add documents to my repository.

Step 3: Setting up VS Code

  1. I downloaded VS Code from here

  1. Then I realized I need to download Python and Pip to use MKdocs.

    Note: Pip is included in Python.

  2. Setting Up MKdocs

    1. I checked the python version and pip version and made sure they were all the versions I needed.

    2. Then I use pip to install mkdocs and then I checked the version of the mkdocs

    3. After downloading mkdocs, I used the mkdocs serve command to access the new site I had created using a local development server.

      The look of the default site:

Step 4: Replace the html site with Markdowns template

I followed Angelina’s site to complete the step.

This is the html site view:

Then I download the mkdocs template from here. I ddownloaded all the files as a .zip file and then extracted it

I deleted all the previous files in my local repo and then moved the file from the student template folder into my local repo.

Preview the Template

Before I put the mkdocs template into my repository, I wanted to preview the student template, so I followed the Chatgpt’s instructions. Then, I got an error saying I don’t have the theme downloaded.

So I downloaded the theme using pip.

When I tried to preview my site again, another new error popped up. After looking at the error, I realized that I did not connect my VS code with my repository.

Cloning Repository into VS Code

I followed Ryan Kim’s website. I I clicked the “clone GIT repository” command and then copied the url with SSH to the VS code.

Now, my repository is connected with VS code.Then I had every file in my repository available in my VS code.

I tried to preview my website again. However, it appeared the same git error as before.

I went to google search and then found this website which solved my problem. I used the following command. Then the problem was solved!

git config --global --add safe.directory /docs'

Step 6: Learning How to push files into my remote repository in VS code

  1. Go to “Source Control” tab and then click “Stage changes”
  2. Add a message and click commit

    Note: Be sure to add a message before commit. Otherwise it is taking FOREVER to commit

  1. Then click “Sync the changes” and it will push the changes to the remote repo
Last update: February 18, 2025