Devlog Four: Building a Static Site with a Hugo Template

Last week, I attempted to build a static site (like this one) using a different Hugo template more suitable for a project, rather than a personal page.

During this attempt, I hit several snags that left me siteless after hours of trial and error. The late hour of nearly 2am meant I had to quit attempting to build, but by this point in the evening I was finally starting to understand my problems and make sense of the issues. This, paired with a sit-down with my prof a few days later, taught me a lot about what went wrong.

I can’t say I am at a position where I can easily build my own site yet, but I’m thrilled about the handful of things I’ve learned so far.

When I set off to build this site, I had assumed everything I downloaded would be packaged in the same way as the “Academic” theme, and could be placed in a GitHub repo and deployed through netlify. So, I initially downloaded the theme package I wanted off of Hugo, copied it directly into my new sites GitHub repo, and tried to deploy it through netlify. Error. This failed miserably, and I quickly realized I had a lot of information to build my site missing - I literally just had the bones of a theme but nothing to which I could apply the theme!

This prompted me to jump onto youtube to consult some tutorial videos. My search terms for videos really highlights my lack of understanding about what a static site is and how it is created and served. I had no idea it could be served from my own machine and that I could use the command line to generate, create, and more. Honestly, I didn’t think anything could happen outside of my GitHub repo. With that, I searched “Hugo site on GitHub and netlify.” This directed me to a few promising videos including JAMstack Tutorial - Full site using Netlify & Hugo by freeCodeCamp.org, Building a Serverless Blog with Hugo and Netlify by FooBar, and (my personal favourites) Hosting Your Website With Github and Netlify and Building A Website Using Hugo by Chris Stayte. I have a feeling that the Chris Stayte videos were my favourites in part because they were the last ones I watched. By that point in my adventure, I had consumed enough content on this process that I knew the Academic template was different than what I was working with.

Each of these tutorials introduced me to a handful of new tools and actions. Primarily, I learned how to (loosely) use: * Terminal * Visual Code Studio * Github Desktop

I also used home-brew to set up Hugo on my machine, and learned a handful of simple commands to use in terminal, like cd to change directories and mkdir to make a new directory.

While watching these videos, I had several problems that were preventing my site from appearing. For starters, I was creating a site, but not placing the themes folder in it. Another time, I put the theme folder in the wrong place. On a separate occasion, I uploaded the entirety of my new site folder into my GitHub repo, and not just the public folder. None of my errors were ever too big, but my basic misunderstanding of what my machines role in this process was, and of what exactly I was trying to create, made every minor blip feel insurmountable.

Fast forward: a week later I talk with my prof about this issue. Following this chat, I learned that my computer was in a way taking the role of netlify and each deploy was being built by my machine following instructions in the command line. Then all I’d need to do is re-upload the public folder of my site into my GitHub repo. Prior to this conversation, I saw my machine as only playing a role in the early set-up stage of the site folders, and after that thought all work would take place online, as it does for my Academic site. Yet again, my primary issue with figuring this all out was that I went in with blinders, thinking I already new what had to happen and ignoring any information contrary to this. Despite all the videos implying that my machine was where all this work would happen, I kept trying to jump ahead and questioned them when they weren’t working in a GitHub repo… Silly me!

Another major lesson learnt, as one may be able to guess by the lack of details in the description of my issues, is that I was not taking notes about my process throughout. Not only would this have helped me in writing this devlog, but it also would have given me some insight into why my site still isn’t working as anticipated - surprise, surprise! While everything looks great in the locally hosted version, the actual site as hosted through GitHub looks like a butt-ugly word doc or something you’d stumble on in the early 2000s. Though I still do not have a working, presentable site, I am a step or two closer and only carrying a quarter of the frustration I started this process with.