Free Serverless Blogging via AWS Amplify and Hexo

My goal for this blog post is to show you how you can quickly spin up a new blog based on a reputable node.js package that is hosted for free. Too good to be true? Nope! Read on :)

To run a blog about AWS means, by definition, one ought run that blog ON AWS, and what better way to run a blog than serverless? With a 12-month free AWS account I get 100% free hosting for a year. Even after that period, by my estimation it should only cost me about $0.50 / month to host my blog. Compare that to, on average, $10-$20 to host most other blogs, such as Wix, Wordpress.com, or Webflow. Plus, I’ll get the following added benefits:

  • Global CDN via AWS Cloudfront
  • 100% control over my content and theme with a great node.js blogging framework (Hexo)
  • Easy access to private git for source control with AWS CodeCommit
  • Free SSL/HTTPS certificates ($100 annual value) from AWS Certificate Manager
  • It's WAAAAY more fun! :)

Hexo is a great open-source blogging framework that is based on node.js, the perfect way to begin blogging with a head start. Check out my Hello World post for more details on Hexo and some other helpful links!

Our basic steps to setup and run our blog are the following:

  1. Install Hexo
  2. Install AWS Amplify for AWS publishing
  3. Publish to AWS

Install Hexo blogging framework

The first step to setting up our blog is to install Hexo, our blogging framework. Run the following node.js command to install Hexo (install Node first if you haven’t already).

1
$ npm install hexo-cli -g

After Hexo CLI is installed, you next want to create a new Site:

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

With your site generated, you can run your site with the following command:

1
$ hexo server

Your site should look like the following, running on http://localhost:4000:

hexo blogging out of the box

Add AWS Amplify to enable easy deployment to the cloud

Obviously there a lot yet to do to your blog before it reflects your unique persona/style (such as picking and installing a theme), but for now let’s get our blog published to AWS.

AWS Amplify is a new framework within AWS to help developers deploy their projects quickly and easily. You simply install the CLI, initialize it with your credentials and a few other settings, and then publish from the CLI - all the complex AWS configurations are made for you by the framework!

To begin, install the AWS Amplify CLI (if you haven’t already):

1
$ npm install @aws-amplify/api @aws-amplify/pubsub

After the AWS Amplify CLI is installed you need to initialize it in the root of your project:

1
$ amplify init

This initialization will prompt you for several settings. You can find my choices below.

“source” and “public” are necessary for supporting Hexo’s Source Directory and Distribution Directory paths

Initialize aws amplify

The logical next step would be to publish, but first we need add some additional hosting configurations and backend dependencies. Run the following command to begin and note my settings below:

1
$ amplify add hosting
Add hosting with AWS Amplify

One more step before we publish, and I promise its my last one. We need to make a few config changes to support some Hexo idiosyncrasies. Add the following into your package.json file at the root of your project:

1
2
3
4
"scripts": {
"start": "hexo server",
"build": "hexo clean && hexo deploy"
}

These configurations inform Amplify deployments how to start and build our Hexo package.

With this last step in place you can now use your standard “npm start” to run your blog locally, similar to “hexo server”. We’re now also ready to publish:

1
$ amplify publish -c

The key is the “-c”. Since AWS CloudFront (the CDN) caches files, it is necessary to use the -c to clear that cache otherwise your publishing won’t take affect until that cache otherwise gets invalidated. Obviously for our first publish this isn’t necessary.

After the publish is complete you should immediately be able to view your website, note the URL, hosted globally on AWS CloudFront CDN:

Globally hosted serverless hexo

Feel free to check out my out-of-the-box serverless Hexo deployment, however, as you guessed, the webpage you’re looking at is essentially the same thing :)

Resolve CloudFront index.html subfolder issue

You may notice that only your root assumes usage of index.html. All other pages and blog posts do not, and instead redirect you to the root/home. To fix this:

  1. Edit the CloudFront distribution, General Settings, and remove the "index.html" value from Default Root Object
  2. On the "Origins and Origins Groups" tab, click the origin created by Amplify and change the path to be the globally accessible URL of the S3 bucket hosting your website (you can get the URL as seen in the screen shot below).
S3 bucket URL index.html

update origin in cloudfront index.html

Next steps

Wasn’t that SUPER easy? All thanks to AWS Amplify to make serverless S3 app deployments a piece of cake. However, your work to stand up your blog is just beginning. Some of your next steps likely are the following:

  • Commit your code into source control (I'm using AWS CodeCommit) - but this was probably your first step, right? :)
  • Use AWS Certificate Manager to create a free SSL/HTTPS certificate for secure hosting and SEO benefits
  • Configure AWS CloudFront to use your custom domain
  • Install a Hexo theme if you don't like the out-of-the-box theme
  • Customize your site!
  • Write your first blog post!

Thanks! Please leave a comment below :)

~Phil