Build a static website with Hexo.io in 24 hours
I was recently featured on an EmailonAcid tutorial which was an exciting few days to say the least. The one problem I noticed though was that my website was not up to scratch. It couldn’t handle the traffic and was generally pretty bad. I needed something better and quickly!
Enter Hexo, a Node.js static site generator. It will import your content from another website using RSS and then generate static pages for each, you can then deploy your site using FTP or GIT. I managed to do this start to finish in just 24 hours and I’ll walk you through the process below. This will cover moving from a Wordpress installation to Static Hexo site.
Firstly you’ll need to ensure you have Node.js and Git installed on your machine. This is beyond the scope of this tutorial, so check the links if you haven’t got them.
First download the node package using npm
Next you’ll need to make a workspace folder for your site, I did this:
Configure the site
Now you’ll want to configure your site using the _config.yml file. This will let you set your site name, permalinks and description. You can find all the options for this in the Hexo.io Documentation
Import from Wordpress using RSS
There is actually a Wordpress hexo migrator, but I found the RSS importer to be easier and faster. Just replace example.co.uk with your domain.
Install the theme
This theme is the flexy theme by Sjaak van den Berg, but you can find other themes on the Hexo.io theme page.
Or if you’d like, use my branch of Sjaaks theme on GitHub
Preview the site
We’re nearly there but we should check the site looks okay before putting it into production so lets install the hexo-server.
Now we can view the site on localhost:4000 by using:
Tweaking the site
This took me the longest. Spend a bit of time tweaking the site to suit your needs and also get used to the Markdown Syntax. I won’t go into detail here but essentially you’ll want to tweak your theme and posts and make sure you’re 100% with it.
.htaccess and modrewrite
An important step for SEO and UX is to ensure you setup 301 Permenant Redirects. This will redirect any old links out there to your new content. It’s a bit of a manual job but heres an example .htaccess file for you to copy.
Generating and Deploying
Get your live production (do not distract me) hat on and lets push this site live.
I first push the site to GitHub so I can keep track of versions
Once that has installed I update the _config.yml file and add in the following settings:
Cleaning, generating then deploying…
Once you’ve entered your Git username and password your site should be added to the repository.
Annoyingly, you can only have one deploy array, so I comment the one above out and then deploy to my hosting account using FTP.
Now add the FTP settings into the _config.yml under the commented out Git settings
One last time…
Volia! You’re now up and running.