Week 1 - Principles and Practices

#

Documentation is an essential skill and a fundamental requirement at Fab Academy. It serves not only to track and reflect on your own progress but also to share your experiences, insights, and challenges with others. By documenting your journey, you contribute to a collective learning process, enabling peers and future participants to benefit from your work.

Starting off my Fab Academy journey this week, we went over some information essential for our success in Fab Academy. These topics included a brief history of digital fabrication, version control with git, and some project management principles. Since we are all going to be producing a final project just in 20 weeks, time management is especially important.

This weeks assignments are as follows:

1. download, read, and sign the student agreement; and commit the file to your repo
2. work through a git tutorial
3. build a personal site in the class archive; describing you and your final project

0. Laptop Specifications

#

Device: MacBook Air M3
OS: macOS Sequoia 15.6

1. Git and Version Control

#

Before this week’s class, I wasn’t that unfamiliar with the whole notion of version control and some of the basic git commands. Although, I really needed to refresh my knowledge. After all, Git is not easy.

I used these resources for a quick refresh of mind and solidifying my knowledge:

• Atlassian Documentation on Version Control
• Official Git Cheatsheet
• Git Cheatsheet by Git Tower
• Dangit, Git!?!

2. Building My Website

#

2.1 Downloading Git

#

The first step was to install Git. Since I am using a Mac, I followed the instructions provided on the Git Downloads page for MacOS.

I didn’t have Homebrew installed, so I installed it using the following command shown on their website:

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

After that, I installed Git with Homebrew:

brew install git

To make sure Git was installed correctly, I ran:

git version

and the output confirmed it was working:

git version 2.51.0

Next, I needed to create an SSH key to connect to GitLab, where I plan to host my website. I found this guide especially helpful.

2.2 Generating SSH Key

#

I generated a public/private RSA key pair with the following command:

ssh-keygen -t rsa -C "personal@mail.com" -f ~/.ssh/id_rsa_gitlab

This created a key that I can use to securely connect to GitLab without entering my password every time. Then, I copied the public key using:

pbcopy < ~/.ssh/id_rsa_gitlab.pub

On GitLab, I added this public key under User Settings > SSH Keys.

After generating my SSH key, I needed to add it to the SSH agent so I wouldn’t have to type my passphrase every time I used Git.

ssh-add ~/.ssh/id_rsa_gitlab

This loaded the key into the agent for the current session. Now, when I push or pull from my GitLab repositories, authentication happens automatically, making the workflow much smoother. I tested my connection to GitLab:

ssh -T git@gitlab.fabcloud.org

The output proves that the connection is succesful:

Welcome to GitLab, @senanurduzenli!

2.3 Setting Up My Website

#

2.3.1 Installing Hugo

#

To create my website, I used the Hugo static website generator. Following the instructions for downloading on macOS, I installed Hugo using Homebrew.

brew install hugo

After installing hugo, I proceeded with creating my website. In order to do this, I created a directory on my Deskop called “FabAcademy”. In this directory, I created a new website:

mkdir FabAcademy
cd FabAcademy
hugo new site mywebsite

This creates a new directory for my website.

Inside this directory I initialized git.

cd mywebsite
git init

After this step, we actually have a static website generated with Hugo. However, I wanted to use a theme. I added the theme Blowfish to my website using the following command:

git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

Following the instructions on the documentation for the Blowfish theme, I set up the theme configuration files in order to make the theme work smoothly.

After making changes on the config files, tested my website locally.

hugo server

After creating a working site, I followed the Git Simple Cheat Sheet from Fab Academy 2019 This is a step-by-step very valuable guide if you’re learning from scratch. I highly recommend it. Using the guide, I cloned the repository into a new folder on my desktop and copied my site’s files into that repository.

2.3.2 Adding Content

#

To add content on my website, I will use the markdown format. Obsidian was highly suggested from my instructors for documentation. I downloaded Obsidian and then opened the “content” directory inside “mywebsite” to use as a vault for my documentation.

2.3.3 Deploying on GitLab Pages

#

When satisfied with my initial content, I was ready to push my files into my Fab Academy repository. To do this, I followed the Git Simple Cheat Sheet from Fab Academy 2019.

git remote set-url origin git@gitlab.fabcloud.org/academany/fabacademy/2026/labs/your-lab/students/your-name
git add .
git commit -m "commit description"
git push -u origin main

On GitLab, I followed the instructions for GitLab Pages deployment. I used the GitLab UI to generate a .gitlab-ci.yml file. I also made sure that the baseURL in my hugo.toml file was the same URL as my GitLab Pages URL.

[!TIP] > After adding this file to your repository in GitLab, do not forget to run the following command to update your local repository with the latest changes from the remote main branch.

git pull origin main --rebase

The --rebase option ensures that your local commits are applied on top of the latest changes from the remote branch. This keeps the commit history cleaner compared to a regular merge, which can create unnecessary merge commits.

I went to the URL, expecting to see my site, but instead I was greeted with a not-so-pleasant surprise: it wasn’t working at all!

echo "public/" >> .gitignore

Also make sure that the ‘hugo.toml’ file inside your the config and then default folders, contains your website’s URL. This is super important!

theme = "blowfish" 
baseURL = "https://fabacademy.org/2026/labs/hisar/students/senanur-duzenli/"
defaultContentLanguage = "en"

After pushing the .gitignore into the GitLab repository, I was finally able to see my website deployed!

2.3.4 Adding Images

#

To add images to my content, I used page bundles in the following manner. The reason was because this was the only successful way I could import images.

└── content
    └── first-post
        ├── index.md    // <- https://example.org/first-post/
	    ├── a.jpg
	    └── b.jpg
	└── second-post
        ├── index.md    // <- https://example.org/second-post/
	    ├── c.jpg
	    └── d.jpg
	└── third-post.md   // <- https://example.org/third-post/

I used the following line in my markdown file to add an image on my website. “Alt text” is the text that shows up if and when the image cannot be loaded.

![Alt text](./image.jpg "Caption")

2.3.5 Adding Buttons

#

When I created the About Me page, I did not want it to be on the main menu above. However, I needed a way to give the link to that page to the user. I realized that there are things that called “shortcodes” which help you diversify the content on your page.

The Blowfish documentation for shortcodes was very beneficial. I decided to create a button on my homepage.

3. Sketching My Final Project

#

Coming up with a final project idea was a hard process. Knowing myself, I knew that I wanted to create some kind of a desk object. My first ideas included making a kinetic sculpture. However, that idea did not satisfy me enough to hold on to it.

I realized that I needed to personalize my idea in order to be satisfied with it.

For years, I have had struggles concentrating while studying or working on projects. If I am not in my hyperfocus mode, even the tiniest sounds will distract me from what I am doing (not even talking about the loud ones). What I discovered as a solution was having virtual ambiences or opening up ambience videos on Youtube to help me get in the zone.
Some examples that I have tried and found useful in the past:

• Hogwarts Library Ambience
• Cozy Scottish Castle Fireplace Ambience
• Thunderstorm in the Library Ambience
• A Soft Murmur ambient sound mixer

Inspired from these examples, I decided to make a desktop device that:

• keeps you focused and calm 🌿🧘🏻‍♀️
• keeps the ambience disconnected from the screen ✍🏼
• is pretty to look at 🥰

Below, I present to you the first sketch of Zenbience. The device lets the user layer a number of ambient sounds on top of each other, creating the perfect ambience for their study or meditation (or whatever that demands focus).

1. Making adjustable sound levels for each ambient sound
2. Adding LEDs for improved ambience
3. Adding a motor for improved ambience

In short, Zenbience is a miniature ambience scene that lets users shape their environment through sound, supporting a focused state of mind.

This Week’s Challenges:

#

• Time management - I will have to work on this and find a solution to balance my work time and Fab Academy time.
• Figuring out how to insert images and add captions - I realized that the Blowfish documentation is pretty useful for customization.
• Deploying my website successfully
• Figuring out how to use shortcodes for buttons, videos, figures, etc.