My summer vacation is now officially over. I had a bunch of stuff I wanted to do.
- Finish the Metal Gear Rex (it's a pain to panel line)
- Rewrite Gundam.Builders website
- Make this blog into a static site
Well, I managed to make this site static. Hang on, it's going to be quite techy after the bump.
Wordpress
Before this Panzercraft blog ran on Wordpress. It's a popular blog system, currently powering 26.5% of the internet. Popularity unfortunately also makes it a prime target for hackers. The vulnerabilities get patched on a regular basis, but it's still a hassle to update it all the time.
Wordpress requires a web server with PHP and a database. For every visitor, the PHP scripts on the server connect to the database and fetches data. The data is then rendered to a web page which is then sent to the visitor.
All the steps above take time. How much time? That depends on how good and fast your server setup is. There are caching solutions available which make this faster. Caching works by storing the resulting page and them showing that to later visitors. But even with caching, a web server needs to be running and responding. And all this for displaying a web page that doesn't change much after it's published.
Static sites
What if you could just render everything once and show that for every visitor. That is essentially what static site generators do. They build the site from source filed and assets to plain old HTML files. You can then upload them to a web host, Dropbox or Amazon S3 for example. No need to hassle with databases or anything of the sort.
It's also secure because all that is ever shown to the user is simple HTML files. No need to do security updates, because there is nothing that you can hack. There is no access point or database connection available on the site itself.
Wintersmith
There are plenty of static site generators available. I used Node.js in the Gundam.Builders project so I wanted to go with a JavaScript based generator. Hexo is the most popular in this category, but it was too complex for my requirements. It also had some problems with the server not updating, which I assume is because I am using windows.
I went with Wintersmith. It seemed simple, yet powerful enough for needs. I did have some problems in migrating the content from the old blog but I solved those with a bit of good old copy & pasting.
Grunt
Unfortunately, Wintersmith wasn't as flexible as I had hoped. A lot of it's plugins are outdated. Instead of forking them and updating them manually, I decided to use Grunt. Grunt is a JavaScript based Task Runner which can automate a lot of repetitive tasks. Grunt plugins are more robust and better maintained than Wintersmith plugins.
My current Grunt configuration does the following:
- Builds the site using Wintersmith
- Makes sure that all images have width and height attributes in HTML
- Resizes images to different resolutions
- Injects the resized images as a srcset to the image HTML tag
- Minimizes the file size of images
- Removes unnecessary CSS
- Inlines critical CSS to each HTML file
- Autoprefixes the CSS
- Minimizes HTML, JavaScript and CSS files
All from a single command line command!
Conclusion
Was it worth it? I spent a lot of time on this project. One could argue that I could have used that time, for example, to finish the Metal Gear Rex panel lining.
But I learned a lot. I also don't have to worry about security issues in the future and I'll be able to retire the old web server at some point.
As for performance, here is a GIF of the new page loading versus the old one. As you can see, it's much faster. This should in the long run improve the page ranking in Google and bring more visitors to the site. And that's the the whole point of this blog.
I think it was worth it. Let me know in the comments if you want more information on some of the points.
