Blog

Setup Static Website Hosting on Amazon S3 Bucket

Create an S3 bucket

https://console.aws.amazon.com/s3/home?region=eu-central-1

create-an-s3-bucket.png

Naming

Naming is very important. Partly because it will form the direct public url but also if you use some external CDN or reverse proxy. The AWS routing needs the bucket name to reflect the custom DNS in that case and the bucket name is used in numerous places.

naming.png

Enable versioning

enable-versioning.png

Enable logging

enable-logging.png

Permissions

permissions.png

Review and create

review-and-create.png

Endpoint

Note the endpoint address as this is used for direct access but also if you put a CDN or reverse proxy in front of you website. The AWS routing requires the bucket name is equal to your custom DNS name (in my case blog.rylander.io).

endpoint.png

Enable static website hosting

enable-static-website-hosting.png

Specify Bucket Policy

In order to serve folder content correctly, you must add a bucket policy to handle defaults for folder urls. Otherwise AWS S3 will just serve an XML listing.

specify-bucket-policy.png

Create and Add an IAM user for deployment

Once an empty bucket is created, we’ll also need an IAM user with appropriate permissions to upload the blog pieces. Creating an IAM user is simple; be sure to create an access key when you do (or go back into the IAM display, hit the Security Credentials tab, and click Create access key).

The Access Key and the Secret Key will be stored on your local computer in a configuration file for the AWS SDK for javascript as detailed later.

create-and-add-an-iam-user-for-deployment.png d8c8dc4f-b2d7-47d4-936e-5117b345edbd.png

Create new IAM Policy

create-new-iam-policy.png 2d4c2515-4c08-41d1-9c2c-ddf09a0e523a.png

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “S3BlogDeploy”,
“Effect”: “Allow”,
“Action”: [
“s3:
],
“Resource”: [
“arn:aws:s3:::blog.rylander.io/
“,
“arn:aws:s3:::blog.rylander.io”
]
}
]
}

The Sid field is an arbitrary string (no whitespaces) to name the policy. The Resource field lists all things this policy can act upon; it’s important to list both the contents of the bucket (arn:aws:s3:::example.com/*) as well as the top-level of the bucket itself (arn:aws:s3:::example.com). Without both, hexo deploy won’t be able to function.

5c4a0df1-fbc0-44c3-807f-62fcfe21097a.png ac22d532-9063-402f-ae17-1f7bf274cb61.png

Attach Policy to IAM User Account

Once the policy is made, select it (from IAM‘s Policies sidebar) and click the Attached Entities tab. Hit Attach, then pick your user from the list of IAM users.

attach-policy-to-iam-user-account.png e5136f64-4cce-4d99-93fb-1d318b831afa.png d5bb65e3-71dd-46e8-9129-f4752646ebdd.png

Verify access to S3 bucket

http://blog.rylander.io.s3-website.eu-central-1.amazonaws.com

Make sure to verify the serving of folders as well, which depends on the bucket configuration made earlier.

verify-access-to-s3-bucket.png

Reconfigure Cloudflare DNS

https://support.cloudflare.com/hc/en-us/articles/200168926-How-do-I-use-Cloudflare-with-Amazon-s-S3-Service-

When hosting on DigitalOcean, I had CloudFlare point to an actual IP but for AWS S3 I need to switch to CNAME. The CNAME must reflect the bucket name, as per AWS guidelines as the routing in AWS relies on the hostname. The Endpoint to use is displayed in the Management Console for the “Static website hosting” panel in the Bucket configuration.

https://blog.rylander.io (the http-https redirection is configured using CloudFlare in my case).

reconfigure-cloudflare-dns.png

Hexo deployment config

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

Specify the plugin, bucket and region in site _config.yml.

Note the credentials are not stored inside the config file.

hexo-deployment-config.png

Install the AWS javascript SDK for node

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/getting-started-nodejs.html

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/installing-jssdk.html

1
npm install aws-sdk --save

Edit the configuration for the AWS SDK

1
nano ~/.aws/credentials
edit-the-configuration-for-the-aws-sdk.png

Deploy to AWS S3

1
hexo deploy
deploy-to-aws-s3.png