A newbie coder’s perspective.

In this post, I’d like to write down some details about this website, how it was made, and why I chose Hugo to build it.

So why Hugo? I was previously familiar with Hugo for a website I made a few years ago for my gaming clan. Needing something easy to maintain without being too expensive to host I researched Hugo again to see if it suited my needs for this project.

Therefore I considered what I needed:

1. It needs to be easy to maintain
2. Easy enough for my still growing CSS/HTML/Javascript skills to manage and make a custom theme for.
3. Simple to host on Github Pages or Netlify or any other static website host.
4. Have a easily manageable blog feature since I’ll be using this to showcase future projects.

Hugo provides all of these things once I got over my intimidation of learning something new, the Hugo documentation, forums, and the many guides on youtube were all beyond helpful. I also learned from looking at other’s themes that had features I was curious about and examining how they pulled together the HTML files, config, and sometimes data files.

First I sketched in Figma of how I thought the website might look:

As you can probably tell quite a few changes happened since that sketch, for now, the web templates section doesn’t exist and will in the future look just like my projects section. I also replaced the blog section with a contact section. The image is gone, I added more color, and removed the images representing skills for something easier to read.

I used Hugo’s params function to template out the projects section so those are read from yml files, this makes it easy to add new projects in the future though I do plan to add some sort of slider so once there are more than four projects you can swipe through. But as I’m still learning javascript I decided this would be too time-consuming to try and add to the website for now.

For the initial first iteration, I’m very happy that my website turned out as well as it did being my first big project in Hugo and without any sort of “guide” (meaning like a tutorial for the whole project from start to finish). I hope to update this more in the future but for now, I will return my focus to the full-stack development course I signed up for.