Site Refactor
September 19, 2024
Hello Posting
I refactored my entire website to allow me easily write and add blog posts, but now that I’m here, I realize I have no idea how to actually write a blog post. So, in the interest of getting over the demon of perfectionism that sits on my shoulder any time I want to write something, or share an opinion, I’ll start with a post about the big site refactor I’m doing.
What Came Before
When I first started working on this site, I knew that if I let myself spend as much time as I wanted setting everything up so that adding content was as seamless as possible I would never add any content to the site. To avoid spending all of my time setting up the doll house, I forced myself to start simple: pure html, css, and javascript. As I actually got to the point where I needed more powerful tools, I was allowed to incorporate them.
By the time I had the basics of the site all set (home page, guestbook, a few shrines) my set up had grown quite bit:
- Sass instead of raw css to support easily making the site layout responsive to different window sizes, and different color themes for different pages.
- Reusable html snippets so that the layout could be consistent across pages with minimal repeated code.
- Simple bash scripts to allow me to easily push updates to neocities.
- Gulp to compile the code into an uploadable format, and watch for changes in the files.
Basically, I had set up an incredibly hacky, very small and very ugly static site generator. I could have kept that set up, it was good enough, but there were still some limitations that made adding some of the new features I was excited about rather difficult:
- Blog - I would have to either use java script to load posts (which won’t work for some users), or I would have to copy and paste a bunch of boilerplate each time I wanted to make a new post (which would definetly stop me from using the blog).
- Visual Art Portfolio - same issues as above
- Collapsable credit widgets - A ton of boilerplate that made me hesitant to pull in external assets. (Annoying because part of the fun of neocities is all the graphics people pass around)
What Came Next
Enter hugo, a powerful static site generator. My workflow for making changes to the site is now much better, and more exiting.
To create a new blog post, all I have to do is create a markdown, or html file in the content/blog folder with the text of the post. Hugo takes care of inserting the post into the template ui, rendering the contents, and adding the link to the new post to the blog post index.
To edit the layout of blog posts, I can make my changes to layouts/blog/single.html - Any changes to this file will be reflected on all posts. So if I wanted to change my color scheme for blog posts, I could go into the file, set my css variables, and then voila!
I’m also now using sass to generate a bunch of utility classes that let me change layout based on breakpoint. So for example, I can add the hidden-xs class to an element, and it will be hidden on mobile screens!
Hugo has some cool capabilities for creating themes that other people can reuse in their own hugo projects, so I think I’m going to try and break out some of the reusable functionality I have for Faerie Knight’s Castle into a theme others can use to make their own sites!
If any of this has piqued your interest, here are some links for getting started with hugo: