Sam Johnston - Interactive Email Developer

Sam Johnston

I design and code responsive websites and emails, specialising in interactive email and CRM workflow optimisation.

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.

Requirements

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.

Install Hexo.io

First download the node package using npm

1
$ npm install -g hexo-cli

Initialise Hexo

Next you’ll need to make a workspace folder for your site, I did this:

1
2
3
$ hexo init staticsite
$ cd staticsite
$ npm install

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.

1
2
$ npm install hexo-migrator-rss --save
$ hexo migrate rss http://example.co.uk/?feed=rss

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.

1
$ npm install hexo-server --save

Now we can view the site on localhost:4000 by using:

1
$ hexo server

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.

1
2
3
4
5
6
7
8
9
10
11
RewriteEngine on
Redirect 301 /get-in-touch/ http://samjohnston.co.uk/contact/
ErrorDocument 404 404/
<Files .htaccess>
order allow,deny
deny from all
</Files>
Options All -Indexes

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

1
$ npm install hexo-deployer-git --save

Once that has installed I update the _config.yml file and add in the following settings:

1
2
3
4
5
deploy:
type: git
repo: [repository url]
branch: [branch]
message: [message]

Cleaning, generating then deploying…

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

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.

1
$ npm install hexo-deployer-ftpsync --save

Now add the FTP settings into the _config.yml under the commented out Git settings

1
2
3
4
5
6
7
8
9
10
deploy:
type: ftpsync
host: [host]
user: [user]
pass: [password]
remote: [remote]
port: [port]
ignore: [ignore]
connections: [connections]
verbose: [true|false]

One last time…

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

Volia! You’re now up and running.

Comments