Transitioning to a static HTML/CSS website

Published: 2022-07-27

I recently transitioned this site from Wordpress to a static HTML/CSS site that I put together by hand (along with some CSS that I adopted and tweaked from W3 Schools). In my view, Wordpress is very easy to use, but I was starting to think it was overkill for a personal website that's very simple in design and is primarily text-based. I also wanted to better understand the fundamentals of HTML & CSS, and what better way than to build a site yourself?

I love working with HTML. It's easy to understand and it makes sense. However, maintaining it is far more tedious than Wordpress - at least for me, and at least for right now. Although it's simpler, it's far from being easier. It is, however, more lightweight and I have more freedom to make changes to the design and I don't need to open up a web browser to makes these changes.

I was also inspired to "downgrade" this site (for lack of a better word) after being inspired by This is a motherfucking website as well as This is still a motherfucking website. These sites really drive home the fact that you don't need a fancy CMS, site generator, or loads of media content to have a decent and functional website.

Challenges with a static site

Although I'm happy with the outcome, the transition has been tedious and at times somewhat difficult. For example, if I make any changes to the navigation bar or footer, I have to edit and update every single page on the site - but this can be mitigated with the find and replace command.

Speaking of the navbar, it's been a bit tricky as getting it to work properly on both desktop and mobile. I was initially trying to replicate exactly what I had with the ExS Wordpress theme, which included a responsive navigation bar with both dropdown menus and also collapsed into a hamburger menu on mobile. Due to my limited knowledge I couldn't figure out how to create an identical navbar with both features without incorporating javascript. I since realized that a dropdown wasn't necessary.

Because all of my posts will essentially be static HTML pages, RSS is a challenge and can become very manual. I'm still working on implementing an RSS feed thanks to these instructions I found on a Neocities webpage.

Being a personal website, I also include personal photos here and I'm still trying to figure out an easy way to create thumbnail jpegs(I'll likely use imagemagick), organize them into a gallery grid, and link them to the full sized image without having to do it all entirely manually.

What I like

Overall this has been a fun and educational experience. Not only do I have a better understanding of HTML & CSS that I didn't have before, I also have a much greater respect for Wordpress developers and Wordpress theme developers - attempting to replicate the look and feel of the previous iteration of this site was fairly time consuming. Someone might ask "Why are you making life harder for yourself? Why not just stick with something like Wordpress?" I see this question similar to that of a high school student asking "Why do we need to learn math when we have calculators?" Using calculators are very useful tools, but relying entirely on a calculator denies you of a more fundamental understanding of math (or in this case, websites).

Though I could have learned a lot tinkering with a Wordpress theme, I thought it would be better to spend my time tinkering with HTML & CSS as it's more foundational.

It just feels like a more simpler and lightweight site. Avoiding JavaScript. in my view, adds unnecessary complexity to a website that's intended to be lightweight (such as this one). Secondly, I don't (yet) know Javascript.

Moving Forward

I may look into using a static site generator like Hugo or some other tool that lifts some of the burden of manually tagging and updating pages. Currently, every time I want to update a page or publish a new post (this one being the first) I have to open up a text editor and include the HTML tags, then SSH into my shared server, upload the new document, and edit the writing page with the new link. Though this in itself has also been informative.

I'm still in the process of finalizing everything. As mentioned above, I need to add an RSS feed as well as reimplement my photo galleries.

Thanks for reading. Feel free to send comments, questions, or recommendations to hey@chuck.is.