Categories
Uncategorized

A Guide to Static Site Generators Using Hexo and WordPress

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, gjstatic 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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *