Background

For a long time now I’ve wondered what it would be like to have my own personal website. One look at html’s syntax however put me in an odd state of discomfort thus preventing me from taking the plunge.

Very recently however, I finished all of the problem sets and lectures for Harvard’s CS50P Python course. For the first time in my life I’ve felt like I can actually kinda somewhat maybe program and CS50P’s final project requirement gives me a chance to prove that.

The final project within CS50P gives you very little guidlines on what the project must look like, the one caveat being that the project must:

entail more time and effort than is required by each of the course’s problem sets.

Some people create video games, scripts, hacking tools, etc etc.

For my project I decided that I wanted to automate the very common task in my life of downloading new manga for Japanese immersion

This project would entail a few things:

1. Periodically scrape relevant web sites for new manga releases
2. Create a cli interface to add to and update an rss.xml
3. Automatically download and format new manga
4. Transfer manga to my homelab

By the first step I felt I was already confused, there were all these new libraries (BeautifulSoup4, Selenium, Playwright, Scrapy) I didn’t really know which to pick and I had absolutely no idea what was happening in the html documents I was attempting to scrape.

While I’ve had interactions with html in the past, they were merely short flings of passion that immediately ended after I realized my mistake and opened the file I had actually intended to open.

This project was the first time that I kinda had to actually look at the thing and figure out what it was trying to say.

Thus, shortly after starting a project in Python, I had spent 16 hours learning how to write my own website.

Hugo

While I had originally started writing my website in pure HTML and CSS (I have no intentions of dirtying my hands in “they who shall not be named”) I quickly realized that I would have to manually copy and paste all changes that I wanted globally.

All I wanted was a header that stayed with me throughout my webpages and HTML and CSS couldn’t even offer me that.

While I knew there were probably solutions to my problem I also knew that they would lead me dangerously close to redirecting my career path towards that of a full stack web engineer.

At least until I found hugo.

What is hugo

While I can’t even pretend to understand how to use this thing (The tags page still doesn’t work for me and I don’t know why) my basic understanding outlines like this:

Hugo is a templating toolkit for quickly generating static web pages from markdown files

In me-terms, this meant that I could write the same header.html in one file and have that automatically show up at the top of every one of my web pages.

It also has many other convienences such as shortcodes that allow you to use some of your hugo templates from within your markdown files.

This was a huge win for me, as it meant that I could retain some sembelance of the sanity I would have lost copy pasting a header into a raw html file to write about how a cat looked at me weird on the street.

Conclusion

While I still have a lot to learn (my header is still off center) I’m excited to say that I finally have my own website where I can share my very important thoughts about how you should use emacs instead of vim.

Learning HTML, CSS and eventually Hugo has been a really fun endeavor for me and if this blog post has caught your interest in any way I highly reccomend you take the plunge as well.