Serverless-Website-on-AWS-part2

Deploy an Hexo blog on S3 using the deployer.

This is part two of that tutorial. We have our blog ready to be updated on the AWS.

First if you don’t have one already get an aws account go to https://aws.amazon.com/ and create an account. then Sign in to the console.

The first bit of the website is the storage space. We will be using S3 Simple Storage Service of AWS here. S3 among other allow you to expose static files such as HTML CSS and JS which are what a surprise the components of any website.

S3 is a very inexpensive storage place less expensive and our website will be static we don’t really need a server.

So let’s create a bucket:

  1. Click on S3
  2. create bucket
  3. give it a name (the S3 name has to be free as S3 for the region you choose your S3 bucket)You should name your bucket after the domain name you will be using (eg. yourwebsite.com)
  4. Choose a Region
  5. Click Next
  6. Uncheck the boxes under Manage public access control lists (ACLs) and Manage public bucket policies for this bucket
  7. review the config
  8. click on your bucket
  9. Go to properties
  10. Click on Static Website Hosting
  11. Click use this bucket to host a website
  12. Enter index.html and error.html

Then we want to grant everyone read acces to the objects in our bucket. We do so by adding a bucket policy.

Go to permissions -> bucket policy
Add the following policy :

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::example-bucket/*" ] } ] }

[https://docs.aws.amazon.com/AmazonS3/latest/user-guide/static-website-hosting.html](https://docs.aws.amazon.com/AmazonS3/latest/user-guide/static-website-hosting.html)

Now in order to deploy the blog let’s give Hexo access to S3.

We will create an AWS user with access to S3.

  1. Login to your AWS console.
  2. Choose IAM from the console
  3. Click Add User name it hexouser
  4. Check Access Type -> Programatic access
  5. Choose Attach existing policies directly and add AmazonS3FullAccess policy.
  6. Copy the Access Key Id (aws_key) and Secret access Key (keep a local copy of it as you want be able to retrieve them if ever you lose it)

Change _config.yml to use your knew access keys.

deploy:

type: s3

bucket: YOURAWSS3BUCKET

aws_key: YOURKEY # /

aws_secret: YOUR SECRET #<AWS secret key> 

aws_cli_profile: https://YOURCLIPROFILE.signin.aws.amazon

region: eu-west-2 # (London) #<region> 

headers:  {CacheControl:  'max-age=604800, public'}  #<headers in JSON format> // pass any headers to S3, usefull for metadata cache setting of Hexo assets

delete_removed:  true # <true|false> // if true will delete removed files from S3. Default: true

On your machine install the deployer using

npm install hexo-deployer-s3

To do your first deployment type :

hexo deploy

Congratz your blog is Live on AWS.

to verify you have public access go to

Object URL https://s3.amazonaws.com/yourwebsite.com/index.html

That being done now let’s actually set up our domain Name