EDUCANSAT

To work with GitLab and publish my Fab Academy website, I first installed Git on my computer. Since I use Visual Studio Code, Git integrates well and allows version control directly from the terminal or editor:

I generated a new SSH key to authenticate with GitLab, using the following command:

ssh-keygen -t ed25519 -C "ssh-for-gitlab-fabcloud"

This created two files: a private key (id_ed25519_Fab_Academy_2025) and a public key (id_ed25519_Fab_Academy_2025.pub) stored in the ~/.ssh/ folder. I copied the public key using:

cat ~/.ssh/id_ed25519_Fab_Academy_2025.pub

I logged into GitLab, went to Preferences > SSH Keys, and pasted the public key there. This allows me to push and pull from the repository without entering a password each time.

Common Git Commands Used

Once Git and SSH were ready, my typical workflow included the following commands:

	git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/lima/students/andresfelipe-guarnizo.git
	# After making changes:
	git add .
	git commit -m "Update week 01"
	git push
	git pull
	

Creating my first web site

Exploring Web Development Options

Since the final website had to be hosted through GitLab Pages, the options for building it needed to be compatible with Git version control and static site deployment. I looked into several alternatives such as using static site generators like Jekyll or Hugo, which are designed to work well with Git and GitLab environments. These tools can simplify page management and offer templates, but they also require some initial configuration. In the end, I chose to work directly with HTML and CSS files because it gave me full control over the structure and allowed me to understand how each part of the website worked, which I found important for learning and long-term flexibility. This approach also fits naturally with the Git-based workflow required in the Fab Academy.

To better understand which tools could be used for building the Fab Academy website, I explored different static site development options that are compatible with GitLab Pages. Below is a comparison of the most relevant ones:

Tool	Requires Installation	GitLab Integration	Technical Complexity	Best Use Case
HTML + CSS (manual)	No	Full	Low to Medium	Direct editing with full control over content and structure
Jekyll	Yes (Ruby & Bundler)	Native support	Medium	Blogs or documentation sites with templating
Hugo	Yes (Go-based)	Compatible (via CI/CD)	High	Fast websites with modular components and themes

In this section, I will explain how I set up my personal website for the Fab Academy assignments. I used Visual Studio Code with WSL Ubuntu on Windows and a free HTML template called Spectral from HTML5 UP. Below, I detail the steps I followed to configure and customize the website.

Step-by-Step Process

To ensure clarity and structure, I divided the process into four main parts

• Setting Up the Working Environment.
• Choosing and Downloading a Template
• Editing the Template and Organizing the Files
• Previewing and Testing the Website

---

Step 1: Setting Up the Working Environment

Before working on the website, I needed to ensure that my development environment was ready.

1.1 Installing and Configuring WSL (Windows Subsystem for Linux)

I used Windows Subsystem for Linux (WSL) to run Ubuntu inside my Windows machine. This allowed me to use Linux commands seamlessly in Visual Studio Code.

Commands used:

wsl --install

1.2 Installing Visual Studio Code and Connecting to WSL

I installed Visual Studio Code and opened my WSL environment inside it. To do this, I installed the Remote - WSL extension in Visual Studio Code.

Steps

1. Open Visual Studio Code.
2. Install the WSL extension
3. Open the Command Palette pressing f1 and typing in WSL
4. Open the folder containing the project files and modify the files as required