Build a Serverless Production-Ready Blog

http://www.slowcoder.com

Are you tired of maintaining your CMS (WordPress, Drupal, etc) ? Paying expensive hosting fees ? Fixing security issues everyday ?

I discovered not long ago a new blogging framework called Hexo which let you publish Markdown documents in the form of blog post. So as always I got my hands dirty and wrote this post to show you how to build a production-ready blog with Hexo and use the AWS S3 to make your blog Serverless and pay only per usage. Along the way, I will show you how to automate the deployment of new posts by setting up a CI/CD pipeline.

To get started**, Hexo** requires Node.JS & Git to be installed. Once all requirements are installed, issue the following command to install Hexo CLI:

npm install -g hexo-cli

Next, create a new empty project:

hexo init slowcoder.com

Modify blog global settings in _config.yml file:

Start a local server with “hexo server“. By default, this is at http://localhost:4000. You’ll see Hexo’s pre-defined “Hello World” test post:

If you want to change the default theme, you just need to go here and find a new one you prefer.

I opt for Magnetic Theme as it includes many features:

• Disqus and Facebook comments
• Google Analytics
• Cover image for posts and pages
• Tags Support
• Responsive Images
• Image Gallery
• Social Accounts configuration
• Pagination

Clone the theme GitHub repository as below:

git clone https://github.com/klugjo/hexo-theme-magnetic themes/magnetic

Then update your blog’s main _config.yml to set the theme to magnetic. Once done, restart the server_:_

Now you are almost done with your blog setup. It is time to write your first article. To generate a new article file, use the following command:

hexo new POST_TITLE

Now, sign in to AWS Management Console, navigate to S3 Dashboard and create an S3 Bucket or use the AWS CLI to create a new one:

aws s3 mb s3://slowcoder.com

Add the following policy to the S3 bucket to make all objects public by default:

Next, enable static website hosting on the S3 bucket:

aws s3 website s3://slowcoder.com — index-document index.html

In order to automate the process of deployment of the blog to production each time a new article is been published. We will setup a CI/CD pipeline using CircleCI.

Sign in to CircleCI using your GitHub account, then add the circle.yml file to your project:

Note: Make sure to set the AWS Access Key ID and Secret Access Key in your Project’s Settings page on CircleCI (s3:PutObject permission).

Now every time you push changes to your GitHub repo, CircleCI will automatically deploy the changes to S3. Here’s a passing build:

Finally, to make our blog user-friendly, we will setup a custom domain name in Route53 as below:

Note: You can go further and setup a CloudFront Distribution in front of the S3 bucket to optimize delivery of blog assets.

You can test your brand new blog now by typing the following adress: http://slowcoder.com :