I guess the title of this post can be interpreted ironically, as queertales.com has been quite static for a few years, with rare updates from me, but that’s not really what this post is about. Up until recently queertales.com has been running on the open-source blogging platform WordPress, and the page design was 10 years old and not very mobile friendly. While WordPress is great in many ways, I felt my site was a bit too slow, especially now that Google has started penalizing sites that load slowly, so I wanted to see if I could improve it.
Let’s first look at what a static site is, and how it compares to a dynamic site, like one generated by WordPress. Dynamic sites are generated by the server on the fly as you access the site. This means that the server has to run some code that dynamically builds the page you see using data from a database, which is one of the main reasons it can be slow, especially if using shared hosting. Conversely a static site is pre-generated on the web developers computer, and then the completed pages are uploaded to the server. This means the web server doesn’t have to compute anything, and can send you the pages almost instantaneously when you access the site.
In some ways making static web sites is a bit like going back in time, when most web sites were just hand coded HTML pages, but instead of hand coding each and every page by hand you can now use a static site generator to build everything for you, and handle things like generating sitemaps and more. Static site generators have some clear advantages over dynamic ones, mainly that they’re:
- Fast - as the web server doesn’t need to run any code
- Secure - since the web server isn’t running any code or using a database, many attack vectors simply won’t work
On the downside, they’re more technical to set up and use. A WordPress site is as easy to use as Facebook, and many hosting providers offer it as a simple one-click install, while most static site generators require you to install and run commands on your home computer, and write posts in strange markup languages. This makes static sites a perfect fit for me, as I’m reasonably comfortable with all the techincal stuff and it means I can write my posts in my preferred text editor; emacs.
Static site generators have gained a lot of popularity in recent years, and there is now a plethora of them to choose from. After testing out a few, I settled on Hugo, with Pelican coming in a close second. What tipped it in the favor of Hugo for me was that it can keep the folder structure of the site, plus it’s super fast and easily portable. On the downside, it’s written in a language I’m not familiar with, so writing a custom theme for it took me longer than I had hoped for.
In the end, the performance of the site improved significantly, which was great, but the main improvements came with my responsive theme, which meant that the site scales to fit small phone screens while still working nicely on bigger desktop computers.
