Thoughts of an Eaten Sun

through the mind of kyle tolle

Migrating to a Static Site Blog

Ever since I started my blog in 2009, I’ve used Wordpress. It’s hosted my blog reliably and served me well. But the time has come to use something else.

I first got into web design to make static websites for my writings. Then I learned how to build dynamic sites. This was powerful and meant I didn’t have to do a lot of manual work to create the page for each piece.

Technology has evolved and, once again, made static sites feasible and worthwhile. Sites can be both dynamic and static. What’s changed is when the dynamic site creation happens. There are many free or inexpensive ways to host HTML once it’s been created.

On May 22, 2016, I made the cutover. The site you see now is not Wordpress. It’s a static site served from AWS. The biggest improvement you’ll notice is speed. Allowing you to read immediately.

Reasons for Leaving Wordpress

My main reason for moving away from Wordpress is performance. My second reason is cost.

Wordpress can be slow. I’ve often had times when loading a page takes 20 or more seconds. Load times like that are death for a site. No one wants to wait that long for a page to load; they’ve got better things to do. They’ll leave the page before it even loads, understandably. That’s not what I want to happen, though. I did add some caching mechanisms, which helped a bit. But caching doesn’t address the issue that Wordpress is, by design, a dynamic site application. It’ll always be slower than a static site.

Over the long run, the hosting costs for a Wordpress site will be much more expensive than hosting static HTML files. Wordpress requires processor time and memory and a database, which are all more expensive than disk space.

Dynamic and Static

Wordpress generates HTML when a page is requested. When a reader visits a page, Wordpress grabs the text of the post from a database, and turns that into the HTML you see. It also dynamically includes comments. Readers always see the latest comments for each post. My blog, however, has never used commenting much. Which means the pages of my posts do not change once published. The HTML is the same for every reader requesting the page.

To the reader, it’s equivalent to a static site, but still has all the overhead of a dynamic site. My goal is to remove that overhead. Make it fast as hell, so people can begin reading immediately.

I do want my site to change over time, though. When I publish a new post I need to add a link to the index, and create the HTML for the post. But I can run these tasks using a script when I publish a post. This code allows the site to be dynamic, but at publishing-time instead of reading-time.

Now, when a reader views a page, we return a small HTML file instead of reading from a database and running code. Returning a file is extremely fast in comparison to running an application.

Using a CDN

Additionally, Wordpress is an application that runs in a single location. All requests for a page have to go to that one server. A visitor from another country sends a request across a great distance, and Wordpress sends the page back across that distance.

Since static HTML files don’t change, we can store them on servers all around the world. When someone in another country visits the page, the HTML is returned from a server that’s much closer to them. Their page loads much faster, thanks to the physical proximity of the HTML. This is the entire concept behind a CDN.

Another concern with Wordpress is that, when multiple people visit the site at the same time, the later visitors wait in line while the server handles the requests which came in first. If the first page takes 20 seconds to load, the second user has to wait that time plus the time it takes to load their page. That’s painful. Since returning an HTML file takes next to no time, multiple visitors don’t have to wait long. And the CDN helps make that load time even faster.

My Static Implementation

There are loads of options for creating a static site. I decided to write my own static site generator, because it was an interesting and fun challenge. It takes blog posts written in Markdown and turns them into HTML files. The code then sends that HTML to Amazon S3, where the files are stored. Visitors to get a page from Amazon CloudFront, which is a CDN that sits in front of the files on S3. Amazon’s infrastructure is incredibly fast and powerful. I take advantage of their scale and capability to make my blog fast, reliable, and inexpensive.

This new site lacks features compared to Wordpress, but all the content is here. The temporary lack of features is a trade-off I’m willing to make. I can improve this static site, but I could never make Wordpress this fast.

I will write more about my migration from Wordpress to static site, improvements in performance, creating semantic HTML, styling the site, and other topics.

This is a fantastic first step toward eliminating my traditional web hosting plan, and using all-static sites. Yes, this site is drastically different, but I’m proud of and excited by the change. A change better for both the reader and me. I look forward to improving upon it! Cheers.