Week 0

Assignment

This week, we needed to set up a website. It was my first time learning about static site generators. I chose to use Hugo instead of Jekyll because I have a good friend named Hugo, and I had already heard of Jekyll – so wanted to dive into the deep end.

Brainstorm

I had some fear diving into web dev because historically, HTML+CSS+JS have been a bit of a rocky experience for me. However, following the Hugo Quick Start was an easy enough setup.

I scrolled through the Hugo themes and this Twitter one caught my eye. I love it! I might change it in the future, we will see – it works for now. Keeping Neil’s advice on “spiral progress” in mind.

Learnings

Creating a new post is easy: hugo new content posts/week-x.md. This takes after the /archetypes/default.md file.

Posts can stay as drafts until the header is changed to draft = false. Drafts can be previewed on the site with hugo server -D.

Publish the site with hugo.

Deployment is performed with Forgejo. Set the baseURL in hugo.toml to your desired publication site. After editing .forgejo/workflows/publish.yml to contain the Hugo deployment mechanism, I now have it configured that on every git push, my site is deployed.

AI Usage

I tried my best to avoid using AI since I sincerely wanted to figure out Hugo. When I did, I prompted it to not make code changes but just to answer my questions.

I cloned the theme as a subdirectory of my main git repo, so I was confused how to organize the theme within the rest of the repo.

I asked Codex to help me color my hyperlinks within my blog.

My blog was struggling to succeed in the workflow, specifically because I was trying to clone a git submodule for the Twitter theme I’m using. Codex said it’s because the theme is registered with an SSH URL in .gitmodules but the URL should be switched to HTTPS since the runner has no ssh executable.

Model used: Codex GPT 5.6 Luna

Files

Markdown files for the posts are stored at content/posts.

Takeaways

Hugo is super easy to use. I need to remember to change the draft setting to “false” once I am ready to publish. To check the workflow status, view the repository on the ForgeJo home.

Fear less!! Document more.

For compressing images onto my website, I am using a simple bash command that grabs all of the files in a less-optimal filetype from my images/ folder and converts them into compressed JPEGs using ImageMagick: for f in ./*.HEIC; do magick "$f" -strip -resize '1600x1600>' -sampling-factor 4:2:0 -quality 35 "${f%.*}.jpeg"; done.

• To embed an image:

The prefix of the filepath for linking any kind of file in the webpage is: /863.26/jeannie.she/[X] where [X] === the filepath following /static in my repo directory.

• As an example, I have stored a file at the path: static/week2/point_display/point_display.ino. The correct path to reference in the blogpost is: /863.26/jeannie.she/week2/point_display/point_display.ino. [X] = week2/point_display/point_display.ino. For compressing videos onto my website, I am modifying a command taken from this website and generally using this: ffmpeg -i input_video.MOV -c:v libx264 -preset slower -b:v 1000k -vf scale=-2:1080 -pix_fmt yuv420p -movflags +faststart -an output_video.mp4 optionally followed by: for f in ./*.HEIC; do rm "$f"; done
• To embed a video: