Static site generators are systems that compile templates into static HTML pages. If that sounds efficient—yes, it is. There is no server processing or rendering, so static websites tend to be very fast and lightweight, saving you and your users precious time and bandwidth. This increased efficiency is reflected in lower costs and, potentially, higher revenues.

From Optimizing WordPress to Going Static

Speaking of efficient revenue generators, WordPress comes to mind. It powers 28 percent of the internet and is a potent platform with lots of great features, including extensive user and content management backed by an array of plugins, themes, APIs, etc.

Even big players in our industry use WordPress. Websites like Smashing Magazine and CSS-Tricks use WordPress, albeit significantly customized instances in both cases. However, working with WordPress can be a tedious task, especially when customizing and optimizing for performance.

I started a small blog back in 2015. My first instinct was to use WordPress. It gave me a jumpstart, as I was working with WordPress already. I created a new droplet on DigitalOcean as a server, established Vesta as Hosting Control Panel, and installed WordPress as a blog platform. Ultimately, I designed and developed a brand new WordPress theme. The only thing missing was the content.

I knew I wanted to share some tips about Atom, as I was using this great editor at that time. I published a few articles about it and shared them with the community.

At first, I wasn’t paying that much attention to performance because I was too focused on the content. After a while, I noticed some performance issues. The score on Google PageSpeed Insights was lousy, so I worked hard to fix and optimize my website, attaining an almost perfect score of 99/100:

  • I switched from Nginx+Apache to Nginx+PHP-FPM.

  • I used CloudFlare for speed and protection.

  • I used Cloudinary to host images.

  • I tweaked my theme and used Critical CSS.

The only warning was for a Google Analytics caching issue which I didn’t know how to fix at the time.

But what if 99/100 or 100/100 still don’t get you the desired performance? That’s where static page generators enter the fray.

Enter Static Page Generators and Hexo

So what is a static site generator?

As the name implies, a static website generator is a system that generates static HTML files. Serving static HTML files is much faster than creating pages on the fly. There is no server rendering or compiling, which often causes a delay in page loading.

When talking about performance, one must think about caching. Although there are multiple techniques for caching WordPress, this is not usually a straightforward task, unlike caching static files. Serving cached files is more performant than serving actual files from the server and it can save time when loading websites.

In June of this year, Vitaly Friedman of Smashing Magazine introduced JAMstack in a workshop in my city. I’d never heard of it, and I was very intrigued. After the seminar finished, I studied this new concept for a bit, and I realized how awesome it is. I realized that my website doesn’t need a WordPress.

The first step was to decide which static page generator to use. I wasn’t aware how many there are. I decided to give the Hexo blog framework a try. It is deployable to Netlify, has a plugin to migrate from WordPress, and uses Node.js, which I’m familiar with, unlike Jekyll and Hugo, which are based on Ruby and Go, respectively. And, as I discovered later, it is blazing fast.

Abstract diagram migrating a WordPress blog to a Hexo blog for better performance

Migrating WordPress to Hexo

Hexo installation is as simple as it could be. Install hexo-cli globally using npm, run the hexo init command, install npm dependencies, and voilà:

npm i -g hexo-cli
hexo init <blog-name>
cd <blog-name>
npm install

To make the migration, install the hexo-migrator-wordpress plugin. This plugin expects XML files as a source. XML files could be exported via the WordPress export tool, which can be found in administration panel under Tools -> Export -> Wordpress. Finally, type the hexo migrate command to finish the import.

hexo migrate wordpress <source> 

The only thing left to do is to check the result. Run the hexo server command to start the server and open the browser at given address.

hexo server

Markdown and Its Limitations

Hexo supports Markdown out of the box. Markdown is a markup language that many use to format README files, comments, and posts. But it could be used for writing your article as well. Its syntax is intuitive and easy to learn.

Another advantage for Markdown is that it generates clean and valid HTML. That allows developers to create clean and maintainable CSS rules for styling blog articles and pages.

A developer’s life is never easy. We often run into problems that could cause us to spend time on unexpected things. If we learn something along the way, then we didn’t waste this time, and that is a good thing. The same happened to me. I thought everything went well because there was no compiling error, but then I noticed that some things didn’t work as expected.

For example, Codepen demos didn’t load. I searched for a Hexo plugin, and found one. Unfortunately, this plugin wasn’t official, and it generated HTML errors that were unacceptable. I wanted to contribute and fix the problems, but the latest pull request was unresolved for more than a year and a half. I decided it would be easier to fork the repository, fix the problems, and publish the plugin on the Hexo page so that anyone could use it. The plugin was accepted, I updated the content, and Codepen demos worked like a charm.

Similar problems occurred with CanIUse embeds. Now that I knew how to create a Hexo plugin, there was no excuse not to do so. My hexo-caniuse plugin was also published, as was my hexo-cloudinary plugin for responsive images loaded from Cloudinary CDN.

Redesign and Optimization

The design of the website is rather fundamental. Hexo offers a handful of themes for free on the official website, but I wanted a unique theme for my Hexo site. After I read the documentation and learned how to customize Hexo, I started to develop an original theme from scratch.

To create new templates, I decided to use EJS for templating. Having never worked with EJS, I saw it as a chance to learn the new template syntax. If you don’t like EJS, Hexo provides you with Swig, Haml or pug support via plugins.

During the redesign process, I was paying close attention to performance. By following best practices, we can speed up our static website even more. Placing JavaScript files at the bottom of the document and using the Critical CSS technique creates the best experience for your audience.

SEO optimization is crucial for blog visibility on search engines like Google. Hexo has a built-in helper for inserting Open Graph data. Hexo uses YAML files to store site and theme configuration. I used the theme configuration file to configure the site name, description, and various social IDs.

Adding Gulp or Webpack to your build process is always helpful and recommended. I used Gulp to minify and compress CSS and JavaScript files, and everything was ready. I could deploy it.

Netlify

Netlify is a platform that provides hosting for websites and apps with blazing fast performance. It markets itself as a unified platform that automates code to create performant and easy to maintain websites.

“Simply push your code and let us take care of the rest.”

As you’d expect, configuring the website is straightforward:

  1. Set up the domain.

  2. Change the DNS records.

  3. Set up build and deployment.

  4. Turn on SSL.

When everything was set up, I ran a handful of basic tests to see the scores, including Pingdom Website Speed Test, Web Page Test, and Testmysite.io. The results were excellent, as the site got the highest scores on every tool.

CloudFlare

Despite the excellent scores, I wanted to try CloudFlare, just to see how much it would speed up the website additionally. CloudFlare can be overwhelming at first, but learning how to use it is fundamental. After I configured CloudFlare, I reran the tests and the results were even better.

The final test was Google PageSpeed Insights. The score was almost 100% both for mobile and desktop versions. The problem was Google Analytics browser caching. I managed to fix the issue by using CloudFlare App for Google Analytics.

How Much Does It Cost?

Using Hexo on Netlify with CloudFlare costs nothing.

Hexo is an open-source platform, so it’s free no matter how you decide to use it. It has a large community, and is the third most popular open source static page generator according to StaticGen.

Netlify has an open plan which provides us with great options for our hosting. Images are hosted on Cloudinary’s open plan as well. CloudFlare’s free plan allows us to configure a high number of rules which can speed up your already fast website. It also allows us to fix the Google Analytics browser caching issue. I didn’t pay for the domain either, since I used a free personal domain provided by the government.

This project setup reduced my budget to a minimum. If you need more advanced features for your project, a static page generator may still save you a few bucks.

Serving cached files means CPU and bandwidth usage is reduced, which in turn means you can use cheaper hosting plans with less powerful hardware. Not only that, your website will be much faster, meaning your users will enjoy browsing on both mobile and desktop devices. And, because page load speed can impact Google Search rankings, your website will rank higher, gaining even more visitors.

All this means that you could spend part of your budget elsewhere—for example, on promoting your website or creating additional content, which will help gain a tad more revenue.

The Case for Static Site Generators

Migrating from WordPress to a static page generator is no simple task, and it’s definitely not something every WordPress user should do. However, Hexo made this transition relatively painless, thanks to its plugins, excellent documentation, and a simple API.

Before deciding whether or not you want to migrate your product to a static solution, you need to be aware of the limitations that come with static page generators, such as content restrictions, Markdown learning curve, and version control.

You should also be aware that Hexo is a blog framework. It is perfect for developers and tech people that know how to use a text editor and terminal. If you like using a web interface to manage your content, there is a plugin that provides that functionality as well. It’s called hexo-admin and it’s quite popular.

If you’re already using WordPress, you should stop and think which features of WordPress you are using right now, and which are indispensable. Do you have a complicated content structure? Are you using user management? Are you using a lot of plugins on your instance of WordPress and are they all necessary? Are you satisfied with performance of your site?

If the answer to most or all of these question is no, than you are ready to supercharge your website with a static page generator. Depending on the use case and your requirements, static pages could help maximize efficiency while minimizing cost. If, on the other hand, you demand WordPress flexibility, you’re probably not even considering such a move.

Understanding the Basics

What is a dynamic site?

As the name implies, a dynamic site is generated dynamically, on the fly on the back-end, on servers. That means that a page is generated on every request, which is not optimal for performance.

About the author

Silvestar Bistrović, Croatia
member since February 6, 2017
Silvestar is a fearless web developer. He's been working with web technologies since 2011. Building web interface using latest front-end techniques is his main passion. He always tries to code with performance, usability, and accessibility in mind. High scores on page scoring tools are proof of quality work he's aiming for. Silvestar likes his code clean, organized, and documented, whether he works solo or in a team. [click to continue...]
Hiring? Meet the Top 10 Freelance Front-End Developers for Hire in November 2017

Comments

Alexander Zinchuk
Thanks for an article. So it's only applicable for those who do not have dynamic features such as user accounts, comments, search, etc.?
Star Bist
@alexander_zinchuk:disqus Thank you for you comment! Features like search and comments are available on Hexo, but user management is not, at least not out of the box. For example, I'm using Disqus for comments as I was using that on Wordpress as well.
Alexander Zinchuk
Ok, thanks.
Erik Engi
@StarBist:disqus Great article! Will try out the mentioned plugin. I am moving my projects towards the so called "serverless" architecture any way. Plus I don't like WordPress that much. I have a question regarding the CloudFlare part. You write that "...the results were even better." with Cloudflare. Netlify claims that "...You Don't Need Cloudflare with Netlify" ( https://www.netlify.com/blog/2017/03/28/why-you-dont-need-cloudflare-with-netlify/ ) and by that they mean they "...already offer what Cloudflare does, and more." (except they don't have plugins :)). So I assume they include performance too. How is that? Could you please share more details about this? Maybe your tests as well. Note: Google PageSpeed Insights doesn't counts that much and we should definitely exclude Google Analytics browser caching from the test or you should apply a similar technique when you use Netlify directly. For example you could host https://www.google-analytics.com/analytics.js directly on Netlify.
Star Bist
@kireerike:disqus Thank you for your comment! I like Google PageSpeed Insights because it shows if the best practices are applied. I like CloudFlare because it has Always Online, Rocket Loader, Auto Minify and Caching Levels which could speed up the website, in my opinion. Good luck with the migration and let me know if you have any more questions!
Erik Engi
@StarBist:disqus You are welcome! Thank you for your reply! I see, I like it for the same reason. (Although it not includes everything, but this makes it more clear.) I see, I use it as well for some of my websites, but I don't use it for the ones where I already use Netlify. Thank you! Actually this is what my previous question was exactly about: Which one is faster Netlify or Netlify with CloudFlare and why?
Star Bist
I just tested the other site on Netlify that I'm managing and the results with and without CloudFlare are pretty much the same. I guess it depends.
Erik Engi
I see. So does "...the results were even better." with Cloudflare? Maybe you should correct that part of the article if it isn't true. I have not tested it, but I assume that Netlify with Cloudflare shouldn't be faster than Netlify on it's own and in my opinion using 1 service for the same thing is better. Maybe there is even a little overhead if you use CloudFlare as well. However I can understand that you can benefit from Cloudflare plugins. That can be a plus.
Star Bist
Automatic minification and caching did speed up my site, so that statement stays. And my site got the perfect score on PageSpeed Insights because of that.
Erik Engi
Interesting. Netlify has automatic minification too. However I can confirm that their minification service doesn't produce the lowest file size possible (for JavaScript files). For some reason it didn't worked on my CSS resources when I have tested it before. Plus HTML minification is something which they don't provide currently. So using Cloudflare (as well) can be better for the average user. However I think if we handle minification our self when we generate our static site and use a local version of analytics.js, then using Neltify or Netlify with Cloudflare should perform similarly (maybe the second one could be slightly slower if there is some overhead). I think caching shouldn't make a difference. Both services offers that.
comments powered by Disqus
Subscribe
The #1 Blog for Engineers
Get the latest content first.
No spam. Just great engineering posts.
The #1 Blog for Engineers
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Silvestar Bistrović
JavaScript Developer
Silvestar is a fearless web developer. He's been working with web technologies since 2011. Building web interface using latest front-end techniques is his main passion. He always tries to code with performance, usability, and accessibility in mind. High scores on page scoring tools are proof of quality work he's aiming for. Silvestar likes his code clean, organized, and documented, whether he works solo or in a team.