Week 1. Principles and practices

Week 1

This is my first week at FabAcademy 2025, but really, this first week started in the middle of November 2024, when I decided to jump into the FabAcademy adventure. Back in the 2001-2002 academic year, I taught my students how to submit their assignments for the structural projects course on static websites using Microsoft FrontPage. Then we moved on to WordPress and SharePoint. All the HTML stuff I knew got pushed aside. Now, it’s slowly coming back to me.

Week assignments

Principles and practices (part 1 of 2)

Plan and sketch a potencial final project ✔

Project management (part 2 of 2)

Read, sign (add your name to) the student agreement and commit it to your repo. ✔
Work through a git tutorial. ✔
Build a personal web site describing yo and your final proyect. Refer to the lectures material for examples. ✔
Uploads parts 1 and 2, to the class archive. ✔

Principles and practices. Project Management

GIT

Git is a version control system that allows us to manage and track the history of our source code. Useful links and references I have used:

Installing and setting up Git
I installed Git BASH for windows users
$ git config --global user.name "myname"
$ git config --global user.email "myname@mail.org"

Verifying that the username and email addres have been saved successfully for a repository-specific configuration
$ git config user.name
$ git config user.email or
$ git config --list

Checking SSH KEY
I ckecked if I have a SSH KEY already $ cat ~/.ssh/id_rsa.pub

cat: /c/Users/myname/.shh/id_rsa.pub: No such file or directory

Generating SSH KEY
$ ssh-keygen -t rsa -C myname@mail.org

Generating public/private rsa key pair.
Enter file in which to save the key (c/Users/myname/.ssh/id_rsa):
Created directory ‘/c/Users/myname/.ssh’
Enter passphrase for “/c/Users/myname/.ssh/id_rsa” (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/myname/.ssh/id_rsa
Your public key has been saved in /c/Users/myname/.ssh/id_rsa.pub
The key fingerprint is:
The key’s randomart image is:
+—[xxx 1234]—-+
+—-[xxx123]—–+

Visualising SSH key
$ cat ~/.ssh/id_rsa.pub

ssh-rsa ABCDEFGHIJKLMNÑOPQRSTUVWXYZ*****

Configuration
Set color in command line
$ git config --global color.ui true

Visualising git configuration
$ cat .gitconfig Shows me the content of the file .gitconfig

[user]
*name = pepe-vazquez
email = myname@mail.org
[color]
ui = true

Setting up local git project
$ mkdir myfolder
$ cd myfolder

Initializing git
Initialized empty Git repository in C:/Users/myname/myfolder
$ git init

Cloning an existing repository on gitlab.fabcoud.com
All FabAcademy students have a repository created, in my case: https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez

Establising a secure connection with gitlab.fabcloud.com
I copied shh key to clipboard and added a new one in gitlab.fabcloud.com
$ ~/.ssh/id_rsa.pub

I can now clone my remote repository and create my local repository.
I just clicked Code and copied the path. This is the path: https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez.git

To clone it to a local folder on my laptop, I use OneDrive at my university. So, I figured I’d create the local repository in my OneDrive folder to keep everything synced across the different computers I work on. I typed this into Git Bash:
$ cd OneDrive\ -\ Universidade\ da\ Coruña
$ git clone https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez.git\

Whoops, my mistake! I can’t log in with just my username and password – looks like I need to use my username and a token instead!

So, first things first, I’ve got to create a Git over HTTP access token. Big thanks to Tom Pupo for the helpful explanation!

Settings access tokens add new token Go to GitLab and log in. Click on your profile picture in the upper-right corner and select Settings. In the left sidebar, click Access Tokens.
Give your token a name and select the scopes you need. Typically, api, read_user, read_repository, and write_repository are good to have. Click Create personal access token and copy the token (keep it secure!). Thanks Tom Pupo

I checked the remote source to make sure it’s set up correctly:
$ git remote -v

origin https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez.git (fetch)
origin https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez.git (push)

I had to pay attention to the active branch when creating it on GitLab.com, it will probably be master by default. I can change the local branch name from master to a newname (main) if needed.
$ git branch -m oldname newname

$ git branch -a List all local and remote branches. Local branches will appear in green, remote branches in red, and the current branch will have an asterisk (*) next to it.

*main
remotes/origin/HEAD -> origin/main
remotes/origin/main

Creating my first local file hello.md and..
$ touch hello.md
$ git add hello.md
$ git commit -m "uploading my first hello" No more than 50 characters
$ git push

installing Visual Studio Code
Visual Studio Code is a code editor. I will use it to edit my page with markdown, html and python. I need to install any extensions as Hugo Language and Syntax support, among others that i will be testing.

MKDOCS

To begin publishing my website, I used the static site generator MKDOCS.
Useful links and references I had used:

Prerequisites:
Installing Python Install Phyton
If python doesn’t work check path and:
Set environment variables > Edit path > New > C:\Users\myuser\AppData\Local\Programs\Python\Python312\

To install mkdocs I have to use pip, as it was not available in my windows system I had to install it.
$ get-pip.py

I also had to add a new path: C:\Users\myuser\AppData\Local\Programs\Python\Python312\Scripts

$ pip install mkdocs
$ mkdocs new myfolder-docs

INFO - Creating project directory: myfolder-docs
INFO - Writing config file: myfolder-docs\mkdocs.yml
INFO - Writing initial docs: myfolder-docs\docs\index.md

$ cd myfolder-docs
$ mkdocs serve

INFO - Building documentation…
INFO - Cleaning site directory
INFO - Documentation built in 0.47 seconds
INFO - [16:13:01] Watching paths for changes: ‘docs’, ‘mkdocs.yml’
INFO - [16:13:01] Serving on http://127.0.0.1:8000/

Adding structure to docs
$ touch final-project.md assignments/week01.md
$ cd assignments
$ touch week02.md week03.md weekxx.md
$ mkdocs build

I messed around a bit with the configurations and checked out the MkDocs themes that were available, but none of them really clicked with me in terms of style or design. The Material theme is pretty solid and all, but it felt too focused on plain, technical documentation. I was looking for something that looked better visually and allowed me to add some cool new features.

Markdown seems easier to write than HTML, here I share a comparison betwen both:

Output	HTML	Markdown
Head 3	`<h3> Heading 3 </h3>`	`# Heading 3`
Bold	`<b> bold </b>`	`bold`
italic	`<i>italic</i>`	`_italic_`
~~Strikethrough~~	`<del>strikethrogh</del>`	`~~strikethrough~~`
My web	`<a href="https://myweb.org/"></a>`	`[Link](https://myweb.org/)`
	`<img src="images/Logoperso.png"> alt=Logoperso`	`![Image](images/Logoperso.png)`
quote	`<blockquote>quote</blockquote>`	`> quote`

More about Markdown and HTML here: Markdown guide

HUGO

After trying out MkDocs, I started checking out websites from Fab Academy alumni. A lot of them used Material for MkDocs to publish their work, while others went with platforms like Hugo or Jekyll. In many cases, they just reused templates from students in previous Fab Academy editions.
For some reason, I really liked Vera Scheper’s site, which was based on Hugo. In her first assignment, she shared the struggles she had installing the theme and how she managed to fix them.
Hugo is a static site generator written in Go, optimized for speed ad designed for flexibility. At that point, I decided to use Hugo as the platform to build my website, starting with the Hextra template that Vera had used. I made some changes to its structure and appearance, which I’ll explain in more detail below.

Useful links and references I have used:

Helpful advice Global Open Time 25.01.2025 Thanks Adrián & Pablo Hackmd

Initializing my hugo site
$ hugo new site pepe-vazquez -f --format=yaml

-f, –force init inside non-empty directory
–format string preferred file format (toml, yaml or json) (default “toml”)
-h, –help help for site

Initializing hugo module
$ cd pepe-vazquez
$ hugo mod init gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez\

go: creating new go.mod: module gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez hugo: to add module requirements and sums: hugo mod tidy

Checking origin $ git remote -v\

origin https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez.git (fetch)
origin https://gitlab.fabcloud.org/academany/fabacademy/2025/labs/aindustriosa/students/pepe-vazquez.git (push)

Installing hextra theme

If I am not in the repository folder, I must switch to it.
$ cd pepe-vazquez

Adding hextra theme
$ hugo mod get github.com/imfing/hextra

go: added github.com/imfing/hextra v0.9.4

Configuring hugo.yaml

`module:
imports:
path: github.com/imfing/hextra`

I have customised the hugo.yaml file the top links of the page according to the organisation of my repository.

I’ve been working on the structure and pages of my repository for several weeks before the Fab Academy started, and I had it hosted on GitLab. Now, I’m going to copy the files from my GitLab repository to the one on gitlab.fabcloud\I won’t copy the go.mod and go.sum files, and I’ll delete the default template files for Fab Academy 2025 first.

Configuring gitlab-ci.yml
I need to modify the gitlab-ci.yml file to deploy the Hextra theme for Hugo. To do that, I’ll copy and paste the code from gohugo.io

ℹ️

Important before pushing to the local repository I must add to .gitignore file:

    # Hugo output
    public/
    resources/
    .hugo_build.lock

Deploy repository
git add .
git commit -m "Uploading Hugo's hextra theme with the structure adapted to the FabAcademy, also decisional content of week 1"
git push\

Upps, the GitLab pipelines show as passed, but the website isn’t working

I must remember change in hugo.yaml file the baseURL: to
baseURL: https://fabacademy.org/2025/labs/aindustriosa/students/pepe-vazquez/

and

Ta-da! my website is up and running!

WSL

Following Neil’s advice, I installed WSL and then the Ubuntu distribution to work in that environment.\

Useful links and references I have used:

$ wsl --install ubuntu distribution by default

Update linux distribution.
$ sudo apt-get update

wget ca-certificates
sudo apt-get install wget ca-certificates

And I installed GIMP too\

but I had problems with the path

I resolved searching for information: Pixmap error

and installing

and

I remember me using a Xenix computer back in the ’90s, and taking a training course to learn how to use the VI editor. We used Xenix to run an architecture software called Arris, which was a predecessor to today’s BIM-based programs. This is my first image open in GIMP for Linux

Last updated on April 1, 2025

Assignments Week 2. Computer-aided design