Inception (A serverless blog)

Create a serverless blog by generating a Hexo blog and uploading the static files to S3

2019-05-23

Over the past few years I have become a massive fan of serverless computing. After being introduced to the concept, it has now become my defacto recommendation to clients. So after deciding to start this blog my initial thoughts where - could I adapt a severless solution? Some initial digging and I came across this post on current options for a serverless blog.

Investigating each of the options I decided to use Hexo as it could be used to generate a static website that I could then upload to AWS S3 for serving to the world.

Before starting on the setup you will need NodeJS (minimum v8.9.3) and the AWS CLI installed.

First up, install the hexo-cli globally

1
npm install -g hexo-cli

Next use the hexo-cli to create your new blog - replacing <folder> with your desired location. More information can be found at the excellent Hexo docs

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

Now you should have everything needed to start creating your blog content. Hexo comes with a built in server mode however in order to replicate being served from S3 and ensure the static site works as expected, install http-server.

1
npm install http-server --save

Paste the following helpful scripts into your package.json

1
2
3
4
5
6
"scripts": {
    "start": "http-server",
    "watch": "hexo generate -w",
    "new-post": "hexo new post 'Inception'",
    "deploy": "AWS_ACCESS_KEY_ID=<AWS_ID> AWS_SECRET_ACCESS_KEY=<AWS_SECRET> aws s3 cp public s3://<BUCKET_NAME>/ --recursive"
}

Open two tabs of your command prompt:

  • in the first tab run npm run watch - this will watch the hexo file directory and generate static files into the public folder
  • in the second tab run npm run start - this will use http-server to serve the geneated public folder on port 8080

You should now be able to see your blog in your favourite browser at http://localhost:8080/

Hexo has a large list of themes available which offer varying styles and additional functionality. We will install the Clean Blog theme. First clone the repository into your projects themes folder:

1
git clone https://github.com/klugjo/hexo-theme-clean-blog.git themes/clean-blog

Update the _config.yml theme property to use the newly downloaded theme.

1
theme: clean-blog

Lastly update the <AWS_ID>, <AWS_SECRET> and <BUCKET_NAME> in the deploy npm script to the relevant AWS details and then run

1
npm run deploy

to copy the public folder to your S3 bucket.

If you want to connect you S3 bucket to your Route53 domain then please follow this article, this article also includes details on how to turn your bucket into a static file host.

Congrats - you now have a serverless blog :)