Switching to Static Site Generation

Switching from PHP powered thing to a static site generator

Back in who knows when at this point, I decided I wanted to make a CMS. I know it predates Node.js, but I not sure if the idea predates Ruby on Rails. The "CMS" I wanted to make would be modular, and the template with the system would allow pages to include only the functions they wanted. In some ways, I noticed it would work like some static site generators, but have features that allow the normal CMS style updates.

The static site generator (SSG from this point on) I'm using is called Eleventy which is sometimes typed as 11ty (and I'll use that from this point on). The CMS I wanted to make is basically 11ty but has a database to allow web page updates like a normal CMS. Funny how things work.

The reason I switched to SSG however is that I'm not doing enough with my site to even bother with needing the overhead of worrying about security stuff that a dynamic site would have to deal with in the modern web era. One nice thing about using a static site over a dynamic site, I could easily host it almost anywhere, even in an S2 bucket! Assuming that is possible though. And I make changes to the site like once every few years. So for website hosting, if hosting a static site is cheaper than dynamic, I can save money!

New HTML redesign

Since I had to switch from a custom template I made to a new one (Nunjucks), I took the time to redo the HTML and CSS powering the site. For most people, the change is basically minor (there are changes you'll notice besides this blog appearing on the site, but if you don't have the old site to compare to, you might not really notice it).

90% of the change is CSS. I don't think I have any real HTML changes outside of side effects from switching templates though. I combined the about with the index page. As I'm not doing a news page, that makes sense. I also removed a link to a status page I had since I'm not using it anyway.

With the CSS, the old site was using floats... That's how old the code was! No CSS grids or flexbox! Since all browsers I support have CSS grid support, I went that route. Because of this change, the sidebar actually goes to the bottom of the page instead of being just high enough to contain the navigation bar (assuming you're viewing this page on a device wide enough to have the two-column layout)

The other change... DARK MODE! If your OS has dark mode, you might notice that this site is in dark mode now. At the time of writing, I'm using a CSS switch that requires you to set dark mode either in your browser (I haven't seen a setting like this in a browser though outside the dev tools) or for your OS (and hope your browser support detecting your OS being in dark mode)

I did mess with Tailwind, but I might talk about that in another blog post. When I did the CSS, I didn't have the blog set up, and I'm seeing things I want to change, but don't want to think about now.

Clean up

With the switch from dynamic to static, I had to remove some random files here and there. I don't think any is of worth was lost because of this. Most (if not all) of the PHP scripts I removed were just random things I did for testing. For the non-PHP stuff I removed, either they were just some random test or were images that were hot-linked to a forum somewhere and I have no reason to keep the files around. There's one image I might never remove.

New host

As I talked about before, I can host this static site just about anywhere. I'm not having my site at the hosting place I have been using all this time because there was another I have been wanting to switch fully to (some things I can't move yet because I don't have time to configure things correctly). Now, why did I not host at Github pages? I don't see a reason to actually. It would create another build step that I did not want to have to maintain in the long run. I want the site hosted where I can just upload the built files and be done with it.