Skip to content

Week 1: Project management

Week 1 Assignment:

  1. Learn Git operations and Gitlab file upload steps & find a website template and document the build process
  2. Add an “About Me” Page to the website
  3. Sketch and describe the final project concept
  4. Sign and upload the student agreement

Git, Gitlab, Mkdocs

For the project management, Fab Academy use GitLab as a student repository to store documentation files. Firstly, I need to login to gitlab.fabcloud.org and choose sign in with “Fablabs”. While logging in to fablabs.io, I had trouble with my password, so I had to reset it. After resetting the password, I was able to access my GitLab dashboard.

compress jpg using: https://squoosh.app/

Next, I need to download Git on my computer using Homebrew (MacOs).

Install Homebrew: 

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Git: 

brew install git

Next, I’m using SSH keys for the Git authentication. Here’s how I created a new key: 

ssh-keygen -t ed25519 -C "my-laptop-key-for-gitlab"
and then I copied the SSH keys to my Gitlab. In GitLab, go to the top navigation bar,

  1. click your Profile image > Preferences > SSH Keys
  2. click “Add SSH Key”. Set a title, pasted the copied key, click “Add key”.

Next, I verify that I can connect to Gitlab using SSH keys. I wrote in the terminal: 

ssh -T git@gitlab.fabcloud.org
and then I received a message: 
Welcome to GitLab, @emily-noor!

Afterwards, I utilize Mkdocs which written in Markdown language, to build the website. Mkdocs is simple and has a lot of customisations. Firstly, I downloaded the student template Mkdocs from here: https://gitlab.fabcloud.org/academany/fabacademy/templates/student-template-mkdocs/, then I replaced all my files with the new template (inside the “student-template-mkdocs-master” folder).

Initially, I didn’t replace all the files. Instead, I copied the “student-template-mkdocs-master” folder to my repository (“emily-noor” folder), but it didn’t work properly. I can preview my website with mkdocs serve but the actual website was not updating.

Then I deleted all the files from “emily-noor” folder and replaced all my files with the new template inside the “student-template-mkdocs-master” folder: mkdocs.yml, requirements.txt, docs/, .gitlab-ci.yml. And finally it works!

However, I still have this issue until now: I can preview my website with mkdocs serve, but saving the updated file doesn’t instantly update my browser.

I use Visual Studio Code to write and edit code for my website. VS Code is a very convenient tool because I can work on local files offline.

Image and Video Compression

I compressed my profile picture and all the other images with https://squoosh.app/ (to make it under 100kb). The process is fast and direct.

Then, I compressed my video with ffmpeg. The first step is to ask Brew to install ffmpeg on the terminal:

Brew install ffmpeg

After it successfully installed, write:

cd ("the folder name" or you can drag the folder here)

then:

ffmpeg -i input.mp4 output.mp4 (the name of the mp4 can be changed)

However, if the video is long and large in size, this command is not enough, so I added extra command like this (with the help of ChatGPT):

ffmpeg -i input.mp4 \
  -vf "setpts=0.5*PTS,scale=360:-2,fps=15" \
  -c:v libx264 -preset veryslow \
  -b:v 250k -maxrate 250k -bufsize 500k \
  -an \
  output.mp4
-> this made the video 2x faster, decrease the resolution to 360px, lowers it to 15fps, encodes it at 250 kbps and removes audio