Laptop Specifications:

Device: MacBook Air
OS: macOS Sonoma Version 14.4

Git Setup

To check the installed Git version:

1

git --version

Output:

1

git version 2.39.3 (Apple Git-146)

SSH keys

Using SSH keys, you can perform Git operations without repeatedly typing your username and password. This website was helpful when setting this up.

To generate ssh key:

1

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

Copies the public key directly:

1

$ pbcopy < ~/.ssh/id_rsa_gitlab.pub

I then went to gitlab and pasted this into gitlab > edit profile > ssh keys

Registers all ssh keys locally:

1

$ ssh-add ~/.ssh/id_rsa_gitlab

Tests SSH connection:

1

$ ssh -T git@gitlab.fabcloud.org

After I typed yes I got:

1

Welcome to GitLab, @dora-tasci!

Cloning Given Repository onto Laptop

I created a folder named FABLAB on my desktop and then cloned the repository that was given to me into that

Navigates to wanted folder: cd desktop/FABLAB

Cloning:

1

git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/hisar/students/dora-tasci.git

i made some small changes to the index.html files to see if pushing and git stuff all worked fine and pushed changes through cd dora-tasci

Hugo

To check the hugo version: hugo version Output: hugo v0.139.2+extended+withdeploy darwin/arm64 BuildDate=2024-11-23T15:33:51Z VendorInfo=brew

This website was helpful when adding the hugo theme I wanted - Stack.

I navigated to my FABLAB folder in terminal with cd FABLAB and then created a new hugo site

1

hugo new site hugo-template

Initiliazed git with git init

This created a folder named hugo-template with some existing folders

I then added the theme i wanted as a submodule, this command added the stack theme’s folders under FABLAB/hugo-template/themes/stack

1

$ git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/stack

I copied the files under exampleSite to hugo-template and deleted the hugo.toml file. I chose merge or replace for existing files.

To make the website run locally:

1

hugo serve -D -F

This was what the website looked like before I made any changes Stack theme running on local

From now on what i did was basically edit the files to customize the website and then see changes locally. I worked locally for a while until i was happy with the changes and ready to push

Customization - Fail :(

I wanted to make the font-family and font-size different for the title of my website different so i went to fonts.google to choose a font i liked and copied the HTML and CSS embed code.

HTML under /themes/stack/layouts/partials/head/custom.html

1
2
3


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">

CSS under /themes/stack/assets/scss/custom.scss

1
2
3
4
5
6


.sidebar header .site-name {
font-family: "Luckiest Guy", cursive;
font-weight: 400;
font-style: normal;
font-size: 40px;
}

Ran it locally and it looked just the way I wanted it to (the issue started when I pushed it to gitlab and realized none of these changes showed up)

i spent many many hours and faced many failed pipelines while trying to figure out what was wrong and why the changes only showed up locally. I realized the problem when i made some more changes in different files and started getting 403 error through terminal when I tried to push. This was because of the way submodules worked. I did some research and understood that i either had to fork the repository (since i downloaded the hugo theme stack as a submodule it worked like a different repository which i couldn’t push to) or i had to copy files under themes out of it.

Customization - Success!

I copied all files under themes/stack to the top level folder of hugo-template and deleted other configuration files, leaving only hugo.yaml. I basically no longer had a themes folder and would therefore no longer face issues trying to push to a repository that I didnt have access to.

To change the background color I changed the necessary variables (I found which ones were necessary through trial and error) under assets/scss/variables.scss and also made changes to the custom scss files once more.

Homepage

I was happy with the design of everything now except the home page. Since it is the “main” page of my website it works a little differently compared to other buttons on the website such as About, Archieve, Search, Links and it took some time to figure out how to make a home page and add a md file to it. This tutorial was helpful

Other

To change the other options in the side bar (ex: Archieve -> Weekly Assignments) I changed the title variable in the md file located under content/page/archieve

Getting ready to push to git

Once I was done playing with the folders locally I did the following to push to gitlab:

Deleted all the files under dora-tasci folder and copy pasted everything under the hugo-template folder into dora-tasci
Edited baseurl under yaml file And most importantly I changed the .gitlab-ci.yml file to this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


image: registry.gitlab.com/pages/hugo/hugo_extended
variables:
  GIT_SUBMODULE_STRATEGY: recursive
pages:
  script:
  - hugo -D -F
  artifacts:
    paths:
    - public
  only:
  - main

Pushing to git

1
2
3
4


git status (checks what has been changed)
git add . (commits all changes for push)
git commit -m “write your message”  
git push -uf origin main

Optimizing photos

Adding photos to md files:

1

![Image caption](./photo.jpg)

I used this website to lower the resolution of the images

Week 1. Project Management