Serverless blog with Hexo and S3

So, you want to maintain a serverless blog? Well, I also have put together this blog just using the followings

  • hexo
  • AWS
    • S3
    • Route 53

Before get started in details step-by-step, please allow to write few words on expected outcome: after completeing all the steps you should be able to have your serverless blog ready for your visitors!

Setup hexo project

$ npm install hexo-cli -g
$ hexo init <folder>
$ cd <folder>
$ npm install
$ hexo server --draft

After following the above steps, you should have the blog running on http://localhost:4000. For more details on configuration and customization, please follow on Hexo office site.

Draft your first blog post

Let’s create a draft blog using the following command,

$ hexo new draft "My First Blog Post"

which should create a markdown file in source/_draft.

Finalize the draft

When you feel that you are doing with drafting the post and ready to publish, do so using:

$ hexo publish draft "My First Blog Post"

At this point, you can try to run the server without draft mode and you should still see the post on localhost:4000

$ hexo server

Get your bucket ready

Let’s create a bucket from where visitor will be served the blog. To do so:

  1. Login to your AWS console
  2. Select S3 from Services
  3. Click Create bucket
  4. Type Bucket name, choose a Region and then click Next
  5. Click Next on Configure options window
  6. In the Set permissions window, uncheck Block all public access and click Next
  7. And finally click Create Bucket in Review window

After bucket is created, let’s enable Static website hosting, to do so:

  1. Select your bucket from Buckets
  2. Click Properties tab
  3. Select Static website hosting
  4. Select Use this bucket to host a website radio button
  5. And then click Save

One last thing to the bucket, update bucket policy:

  1. Select Permissions tab
  2. Select Bucket Policy
  3. Copy following policy and replace your-bucket-name with a valid bucket name
    {
    "Version": "2008-10-17",
    "Statement": [
    {
    "Sid": "AllowPublicRead",
    "Effect": "Allow",
    "Principal": {
    "AWS": "*"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
    ]
    }
  4. And finally click Save to make your bucket ready!

s3-deployer

Before try to generate static files and upload to s3, let’s install npm package hexo-deployer-aws-s3:

npm install hexo-deployer-aws-s3 --save

and then modify _config.yml:

deploy:
type: aws-s3
bucket: <bucket-name>
region: <region-name>

Let’s generate static file which we will be putting on s3 bucket so that our vistor can read blog post.

$ hexo generate
$ hexo deploy

Assuming you have AWS credentials in ~/.aws/credentials.

Now, let’s find the endpoint of the site hosted on s3:

  1. Go to bucket’s Properties
  2. Click Static website hosting

At this point, your site should be accessible using the endpoint.

Route 53

One last thing to host your site on your own doamin.

  1. Add an A-record aliased to the endpoint retrieved earlier.
    I’m using Route 53 as DNS service provider, you can use your existing name server as well.

That’s it. Happy Serverless Blogging!