Week 01 – Fab Academy Website Setup
Han Ferik
Assignments:
My task for this week are:
Project Management (Part 1 Of 2):
Read, sign (add your name to) the student agreement and commit it to your repo
Work through a git tutorial.
Choose a Hugo Theme with a blog tag
Build a personal website in the class archive describing yourself and your final project. examples.
Upload parts 1 and 2, to your website.
Helpful Notes:
Read the Hugo Documentation
Read the Git and GitLab Documentations
Some Highlights from the documentation:
Common Git commands
Get started with Git
Tutorials: Learn Git
Tutorial: Build, test, and deploy your Hugo site with GitLab
Choose a Hugo Theme with a blog tag
Principles and Practices (Part 2 Of 2):
- Plan and sketch a potential final project
Helpful Notes:
Check out earlier FabAcademy and HMAA (How to make almost anything) projects and highlights
Remember no project comes out as it’s final form the get go
Checklist:
Sketched your final project idea(s)
Described briefly what it will do and who will use it
Made a website and described how you did it
Created a section about yourself on that website
Added a page with your sketch and description of your final project idea(s)
Documented steps for setting up your Git repository and adding files to it
Pushed to your class GitLab repository
Signed and uploaded Student Agreement
Disclaimer:
All the steps documented here were performed on Windows 11 Home 64 Bit. Some commands, paths, or behavior may differ on macOS, Linux, or other operating systems. This week documents the process of setting up my personal Fab Academy website. It includes creating SSH keys, connecting to GitLab, cloning a Hugo template, installing Hugo and Go, and running the website locally.
Before Starting, Commands Cheat Sheet:
- Command -> How That Command Works
Terminal:
cd [dir] -> Change directory
ls -Al -> List all the files and hidden files in the directory
mkdir [dir] -> Create a new directory within the current directory
`du -sh* -> sort -n
Git:
Main Git Commands That Are Used Casually:
git clone [url] -> Clone the Git repository found at the url to the current directory
git status -> Show the status of any changed/removed/new files
git add [file] -> Add the file to your next commit
git add . -> Add all changed files to your next commit
git mv [old name] [new name] -> Move/rename a folder or file without Git thinking it’s a new file
git commit -m “[message]” -> Commit all the stages files, creating a new “snapshot”
git commit -a -m “[message]” -> Stage and commit all the changed files
git push -> Push all the commits to the online repository
git push origin master -> Push all the commits of the brach master specifically to the origin
git pull -> Pull and merge any commits from the online repository
git push origin master -> Pull all the commits of the brach master specifically from the remote origin
git diff -> See a difference of everything that is changed but not yet staged
git diff –staged -> See a difference of everything that is staged but not yet committed
git log -> Prints out the history of commits
Some Other Git Commands That Are Used At Specific Conditions:
git remote add origin [SSH URL] -> Add a remote connection, called origin of a repo that’s on your local
git remote set-url origin [new URL] -> Reset the URL of the remote called origin
git remote -v -> View remote connections
git branch -> List all the branches of the repository
git switch [branch-name] -> Switch to the named branch
git checkout [branch-name] -> Switch to the named branch
git merge [branch-name] -> While on another branch, merge the named branch back in
git mergetool -> Run one of several merge utilities to resolve merge conflicts
git branch -m [new-name] -> Rename the current brach
git branch -d [branch-name] -> Delete the named branch
git push origin –delete [branch-name] -> Delete the named branch on the remote origin
git fetch –dry-run -> See changes to the remote before you pull in
git init -> Initialize the current directory as a Git repository
git reset [file] -> Undo uncommited changes to the file
git reset -> Undo uncommited changes to all changed files
git revert -> Undo a commit
git submodule -> Keep a Git repository as a subdirectory of the current Git repository
git stash -> Save modified and staged changes
git stash pop -> Write working from top of stash stack
git stash drop -> Discard the changes from top of stash stack
Markdown
Markdown is a lightweight markup language for creating formatted text using a plain-text editor. It basically maps human-readable files to HTML. These are just the most common uses for it.
" <- Is Used To Represent The Code So That The Markdown Doesn’t Get It As An HTML Text. So, You Can Think It As No Space, And Move On
" # H1 -> header
" ## H2 -> header
" ## H3 header
" #### H4 header
" * * -> iItalics
" ** ** -> Bold
"
inline code-> Inline code"
html-> Longer code blocks" - list item -> Creates an enumerated list with bullet points
" [link title]"(URL) -> Create a link
" ![image alt tag / figure caption]"(image.png) -> Add an image
Project Management (Part 1 Of 2):
Setting up a Connection to Gitlab:
Getting a SSH Key To securely connect my computer to GitLab, I created an SSH key pair.
- Open PowerShell and run:
ssh-keygen -t ed25519 -C "YOUR EMAIL"
- You will be prompted for a file to save the key. Press Enter to accept the default:
C:\Users\YOURUSERNAME/.ssh/id_ed25519
- Enter a passphrase (optional), then confirm. Example output:
powershell
Your identification has been saved in C:\Users\YOURUSERNAME/.ssh/id_ed25519
```markdown
Your public key has been saved in C:\Users\YOURUSERNAME/.ssh/id_ed25519.pub
The key fingerprint is:
SHA256:eob5zKPyiAzqR75x/dyMzESHKMjkt6voyIzFVJaViTc YOUR EMAIL (YOUR SSH KEY WILL BE DIFFERENT)
- Add the key to the SSH agent:
ssh-add $env:USERPROFILE\.ssh\id_ed25519
Output example:
Identity added: C:\Users\YOURUSERNAME\.ssh\id_ed25519 (YOUR EMAIL)
Errors I encountered and solved:
Attempting eval $(ssh-agent -s) failed because eval is not recognized in PowerShell.
ssh-add initially failed with “Error connecting to agent: No such file or directory” until the SSH agent was correctly started in PowerShell.
- Copy the public key:
type $env:USERPROFILE\.ssh\id_ed25519.pub
Add the key to GitLab: Go to GitLab → Settings → SSH Keys. Paste the public key from the previous step. Click Add key.
Test the connection:
ssh -T git@gitlab.com
Expected output:
Welcome to GitLab, @YOURUSERNAME!
Creating a Template Website:
After setting up SSH, I created a Hugo-based website using a template.
Let’s start with applying a theme:
- Cloning the Template Repository:
git clone git@gitlab.com:HanFerik1/template-webiste-hugo.git
This created a folder at C:\Users\YOURUSERNAME\THE_FILE_YOU_ARE_RECORDING_AT.
I faced permission errors initially:
git@gitlab.com: Permission denied (publickey).
fatal: Could not read from remote repository.
These were resolved by correctly adding the SSH key to GitLab and verifying the connection.
- Installing Hugo and Go: Check Hugo version:
hugo version
Check Go version:
go version
If Go is not installed, download it from https://golang.org/dl/ and ensure it is added to your system PATH.
- Preparing Hugo Modules: Many Hugo templates use modules, which need to be downloaded:
cd C:\Users\YOURUSERNAME\template-webiste-hugo
hugo mod tidy
hugo mod get -u
This downloads theme dependencies.
Errors I faced: Hugo initially failed to build the site because Go was not installed:
binary with name "go" not found in PATH
After installing Go and adding it to PATH, the site built successfully. 4. Running the Hugo Server:
hugo server -D
The -D flag includes draft content. The server runs at http://localhost:1313/hugo/. (MOST PROBABLY). The website auto-reloads on file changes. Example output:
Web Server is available at http://localhost:1313/hugo/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Some warnings appeared during build:
WARN deprecated: site config key services.twitter.disableInlineCSS was deprecated
WARN The "twitter" shortcode was deprecated
These warnings do not prevent the website from running.
- Website Structure: I created the following structure for the site:
content/
├── _index.md → Homepage (About Me)
└── weekly/
├── _index.md → Weekly Assignments page
├── week01.md
├── week02.md
...
└── week20.md
Commands used:
mkdir content\weekly
hugo new _index.md
hugo new content\weekly/_index.md
hugo new content\weekly/week01.md
Repeat for weeks 02–20 as placeholders.
- Writing the Homepage: content/_index.md example:
---
title: "About Me"
---
# Hi, I'm YOURNAME
Welcome to my Fab Academy site! This page is about me and my journey in digital fabrication.
7. Weekly Assignments Page: content/weekly/_index.md example:
---
title: "Weekly Assignments"
---
Weekly Assignments
Click a week below to view its documentation:
- [Week 20](week20.md)
- [Week 19](week19.md)
- ...
- [Week 01](week01.md)
Principles and Practices (part 2 of 2), Final Project – Ideas & Sketches:
My Final Project: The Smart Health Assistant Coaster
I wanted to design a piece of technology that could genuinely help people achieve their health goals, moving beyond simple fitness trackers. That’s why I created the concept for the Smart Health Assistant Coaster.
The core idea is simple: a smart coaster that monitors your fluid intake, optimizes your drink temperature, and uses AI model to give you highly personalized health advice based on what you’re drinking.
The Hardware: The Smart Coaster
The coaster itself is the physical interface. I designed it to be available in both square and circle shapes to fit different mugs. It needs to be practical, so it has an Open/Close mechanism.
The key feature is the dynamic temperature control. Using a Heat/Cool Thermal Pad, the coaster can keep any drink at its ideal temperature. If my coffee is getting cold, it heats it up. If my iced tea is warming, it cools it down (I am thinking about using a specific material for the smart coaster to help cool the mug/glass over it to cool up, or I might just get rid of this idea, and just pursue into a idea that it just reminders the user via the app when their drink became the temperature they want). The coaster houses a battery and a microcontroller to manage all this. This microcontroller is crucial because it tracks consumption and transfers all that data to my app. I envision making this a unique coaster per user so the system is entirely personalized.
The coaster also has a visual reminder—a Reminder Light. This light tells me two things: whether I’m actively consuming the drink, and when the drink is running low. I also included a simple Adjust function to quickly change the set temperature.
The Software: The Mobile Health App
The mobile app is the brain and the dashboard. It shows me the real-time status of my drink.
Crucially, it handles the two-way communication: -Temperature Alert: It can give me prompts like, “Your drink is on optimum heat (YOU CAN START DRINKING), do you want me to adjust the temp?” -Consumption Tracking: It records my Consumption and uses a Predictive Recommender(for a specific diet that the user wants) to give me advice.
The Intelligence: The AI Model
This is where the “Health Assistant” part truly shines. I plan to train an AI Model specifically to personalize my health goals. I will input what I want to achieve—whether that’s to get fit, lose weight, or just maintain a healthy life.
Based on my goal and my current consumption habits, the AI will: -Adjust the Ideal: Automatically adjust the recommended temperature for my drink and tweak the ideal daily consumption amount. -Give Direct Advice: The app will then tell me exactly what I need to do to meet my goal, delivering highly specific alerts like, “You should drink two more cups of water, 2L to go, etc.; or you drank a lot, you’re above the 2L limit etc.”
Ultimately, the Smart Health Assistant Coaster is a holistic system that ensures my hydration is optimized for both enjoyment and health, acting as a constant, intelligent coach right on my desk.
Draft Materials List: Smart Health Assistant Coaster
I. Core Processing & Connectivity:
These components handle the logic and data transmission.
Microcontroller (MCU) -> ESP32 or ESP8266, or most probably own built PCB (e.g., NodeMCU): Controls all components, processes sensor data, and includes integrated Wi-Fi and Bluetooth for connectivity to the mobile app. (The ESP32 is generally better for power-hungry tasks like controlling the thermal pad
Power Management -> Lithium-Polymer (LiPo) Battery: Provides portable power for the coaster.
Charging Circuit -> LiPo Battery Charger Module (e.g., TP4056): Manages safe charging of the battery via a USB port (e.g., USB-C).
Power Regulator -> DC-DC Step-Down Converter: Ensures stable and correct voltage supply for all components, especially the MCU.
II. Sensing & Measurement:
These components capture the physical data (weight and temperature).
Consumption/Weight Sensor -> Load Cell (Single Point Strain Gauge): Measures the weight of the glass/cup. Changes in weight allow for precise, real-time tracking of fluid consumption.
Load Cell Amplifier -> HX711 Module: The signal from the load cell is very small; this module amplifies it for the microcontroller to read accurately.
Temperature Sensor (On Coaster) -> DS18B20 (Waterproof) or MLX90614 (Non-Contact IR): Measures the actual temperature of the beverage container/liquid surface. The waterproof DS18B20 would need to be in contact with the mug, while the MLX90614 can measure from a small distance.
Temperature Sensor (Ambient) -> Built-in to the MCU or separate Thermistor: Measures ambient air temperature for more accurate thermal control and consumption prediction.
III. Thermal Control (“Heat/Cool Thermal Pad”):
This is the most specialized and power-intensive part.
Thermal Element -> Peltier Module (TEC - Thermoelectric Cooler): Creates the Heat/Cool Thermal Pad. By reversing the polarity of the DC current, it switches between heating one side and cooling the other.
Peltier Driver/Controller -> H-Bridge Motor Driver (e.g., L298N or specialized TEC driver): Controls the direction and amount of current flowing to the Peltier module to switch between heating and cooling modes
Heat Dissipation -> Aluminum Heat Sink & Small Fan: The Peltier element generates heat on the opposite side of the desired effect (cooling generates a lot of waste heat). A heat sink and fan are essential to efficiently dissipate this waste heat into the environment.
IV. User Interface & Enclosure:
These components handle physical feedback and housing.
Reminder Light -> RGB LED (Common Anode): Provides visual feedback (e.g., Green for optimum temp, Red for drink low/needs consumption). The RGB allows for multiple statuses using different colors.
Adjust Function -> Momentary Push Button: Serves as the tactile input for the ‘Adjust’ function (e.g., to manually tare the weight, or switch modes).
Coaster Body/Housing -> 3D-Printed PLA or ABS Plastic: Creates the main enclosure for the Circle or Square design, designed to be durable and insulate the heat sink/fan.
Top Plate -> Aluminum or Ceramic Disc: The surface where the cup rests. Chosen for good thermal conductivity with the Peltier module.
Another Concept:
I thought of again pursuing with the idea of smart coaster, but now it will be used by restaurant, like specific places that require coasters for drinks etc. So, the thing with this project is to put screens over the smart coaster, and these will eventually have advertisements on it. Although it might sense weird, this will eventually help those chain that use the coasters to gain advertisement fee over those advertisements, and nearly every restaurant use coasters, so it would create another way of gaining additional gain. But, this is some sort of a entrepreneurship project, where I also gain a sort of income through those gains by cutting a little few percent of the revenue that the advertisement companies provide to the restaurants =D
Summary of Week 01:
By the end of this week, I successfully:
- Created an SSH key and connected it to GitLab.
- Cloned a Hugo template repository.
- Installed Hugo and Go, and configured modules.
- Created the website folder structure (content/ and weekly/ pages).
- Built and previewed the website locally.
- Documented every step, including commands, outputs, warnings, and errors.