Personal Hexo Blog Tutorial // Part 2 Hosting on AWS s3

This is the second in a set of three turtorials on how to setup a Hexo blog site.

• How to install hexo onto your computer and how to publish your first post
• How to host your site on s3
• How to store your code in github and enable continuous deployment using CircleCI on commits

What is a Static Site

Before we go further in this set of tutorials we need to go over a few terms and ideas, the first of which is static sites. In the world of websites there are two kinds of websites, static and dynamic. Static sites are sites that have content that does not change, no matter who goes to the site they all recieve the same content. Dynamic sites are sites where the content may change depending on how a user interacts with it. For instance, in a dynamic site such as Twitter different content depending on which user is logged on and which accounts you are following. Hexo is a static site generator, you write your blogs posts in markdown and out comes HTML, CSS, and Javascript. These are then downloaded by people when they visit your site in a browser. Static sites are known for their reliablity and smaller file sizes resulting in faster downloads.

AWS S3

AWS has a storage service called s3, short for Simple Storage Service. It is used to store and receive files, it is highly scalable in terms of its ability to both send and receive files. This is helpful for hosting static sites as it allows for quick and efficient delivery from a stable scalable source. Some uses that I have had for s3 are hosting this site, storing files for retrieval/backups, storing user profiles, and as a central storage for files needed by team members.

Route 53

Route 53 is a” is a highly available and scalable cloud Domain Name System (DNS) web service”, as stated on their homepage. It is tightly integrated with their products and can allow you to route user requests to other AWS services that you are using such as the s3 bucket that we will be using to host our site. On top of being used for routing for our bucket it is also the service used primarily for the routing of requests to an AWS EC2 instace, an on demand virtual private server service that aws offers if you are ever in the need to host projects or dynamic sites.

AWS Command Line Tools (CLI)

AWS provides a nice suite of command line tools that allows you to interact with their services. This is helpful when it comes to automating the deployment of your site to s3 and in most things that you want to do at scale. If you are automating a process that involves AWS and you have not interacted with the cli tool directly then the underlying tool most likely wraps the AWS cli or their API. To begin with the AWS cli we must first install it, please ensure that you have pip installed:

pip install awscli --upgrade --user

After the above runs let’s ensure that it has been installed by running the following command:

aws --version

Now that the cli is installed we must configured it so that it is connected with our AWS account this is done through the following steps:

1. Open up the AWS console in your web browser
2. Navigate in the to iam service
3. Generate a new iam user by clicking on users
4. Under users click add user
   • Under user input ‘personal-blog’ or something similar for the user name
   • Click programmatic access for the access type
5. Under permissions attach existing policy directly and choose AmazonS3FullAccess
6. Then review and complete
7. You will now be displayed with some credentials for this user, they consit of an Access Key ID and a Secret Access Key, hold on to these as we will need them to configure your AWS cli
8. Using the credentials that you received above issue the following command and insert your credentials, when it asks for region specify us-west-2 or another if you need to, and for output format hit enter

   aws configure

Now your AWS cli should be setup for you and you can continue with the tutorial.

Setup of s3 bucket for hosting and Route 53 for routing

After around a week of trying to prep a better tutorial for how to host through s3 I realized that what AWS had was pretty good but the prefacing info that they gave was not really there so in this tutorial I have given the prefacing material. Please continue further with the AWS s3 hosting tutorial and then return for how to deploy to the s3 bucket using a script.

Script for deploying new changes to s3

I’m a big fan of automation scripts for anything that I have to do more than once, this applies not only to work but also with presonal projects such as this blog. So with that I would like to give you guys a script that will allow you to be a bit more efficient with your time in your blog. This script builds the hexo static files and then uploads them to your s3 bucket. To run it please ensure that your AWS cli is configured and run what is below:

hexo clean
hexo generate
aws s3 sync public/ s3://<your-bucket-name>

Hope that this tutorial has been helpful and that you now have a new public facing blog. Come by for the next one which will go over how to have your site automatically deployed through the use of CircleCI.