‍

How to build a website from scratch under the AWS free tier (Part I : Front)

I used to love to pick up any CMS to launch and host a website.

As a growth hacker, its a valuable resource that allows you to test different ideas, landing pages etc.

With experience, I realized that Wordpress was not customizable enough anymore for me. Moreover it started to get on the expensive side and I felt like I didn’t get what I wanted for what I was paying.

That’s how this story came about, I needed a quick and easy solution to host potential tech product, where I can manage front and back end on a suite of services I am familiar with.

This two part tutorial will show you how to build (or transfer) your website from scratch on AWS in a few steps, making it faster, safer and cheaper.

This first part is going to focus on how to host and distribute the front end of our website. I will use my website 5€ pour rien as an example. (Literally means 5 euros for nothing and yes it’s dumb)

In this part, we are going to be using:

• S3 to store and host our content
• Cloudfront to distribute it and the Amazon Certificate Manager to secure it.
• Route 53/Your domain name manager to edit the DNS zone of your domain

Prerequisites

• An AWS account (obviously)
• A domain name, if you don’t have one, I’ll recommend you to buy one on AWS’ Route 53. If you do so, you’ll have less configuration to do overall.

Host your website files on S3

1. If you already have a hand on your website files, you’re all good. Otherwise, you can start a new site from scratch yourself or with a template from HTML5UP.

2. Once you’re there, login to your AWS console, and get to s3 to create two buckets, named your-domain.com and www.your-domain.com.
We’ll modify the permissions later, so you can use the default options so far :

‍

‍

3. Then upload your files to the www.your-domain.com bucket.

4. Change the options and permissions of your buckets :

• First, for your www.your-domain.com bucket, go to the Properties tab, and select Static Web Hosting. Type in your index document, usually index.html and save.

• We have to make the objects of this bucket public to be shown on the interwebs so take caution in not hardcoding any sensitive data in the files you upload. Go to the Permissions tab, and copy paste the following by replacing your-domain.com :

{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::www.your-domain.com/*"
       },
       {
           "Sid": "PublicReadForGetBucketObjects",
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::www.your-domain.com/*"
       }
   ]
}

• For the your-domain.com bucket, go to the Properties tab, and select Static Web Hosting, but this time select Redirect requests, selecting the previous bucket as a target bucket. Tick Redirect all requests if it’s not done already.

• For permissions, paste the same block changing the www.your-domain.com to simply your-domain.com.

5. Congrats ! You should already be able to see your site live on the endpoint indicated on the s3 prompt. The only problem is that the url is problably not optimal. To change that we are going to change the DNS settings of our domain name.

6. Do this step only if you don’t care about : 1) Your site being secured, 2) Your site not being optimally fast. Go to your domain name manager and add an A (alias) record with a name of www and the value being the endpoint of your S3 hosted www.your-domain.com website.

If you’re on Route 53, click on Hosted Zones on the navigation menu, click on your domain, click on Create Record Set.

As name type www before your domain name, select A — IPv4 address, tick Yes on Alias and select your bucket.

You’re done !

Secured distribution with Cloudfront

1. Head on over to Amazon’s certificate manager and make sure you’re on the US-EAST region, because it’s Amazon’s global region. To change the region, check the upper right corner of the navigation menu.
   You can then create a global certificate for free by clicking on Request a certificate.

2. Add your domain names to the certificate (don’t forget the root domain)

3. If you have email setup for your domain, go for the email validation, you’ll receive a link confirmation to click to confirm and validate your certificate.
Otherwise, select DNS validation and edit your DNS zone accordingly. This method unfortunately takes time (a bit less if you’re on route 53) so you’ll have to wait until your DNS settings are propagated to get the certificate.

Since my domain was bought on Route 53, I could create a record in the Certificate Manager

4. Get your www bucket endpoint that should look like www.your-domain.com.s3-website.your-region.amazonaws.com.

We’re going to create a new Cloudfront distributions to distribute and encrypt the content on both our endpoints.

Click on Create distribution and Get Started on the web portion of the next screen.

On that screen here are the only things you have to do:

• In the Origin Domain Name paste your endpoint, do not search for your bucket in the propositions, for some reason Amazon does not use the proper URL when using it. (The origin ID fills automatically)

• In the Cache Panel below, select Redirect HTTP to HTTPS

• In the Distribution Settings, write your alternate CNAME accordingly with the endpoint your are creating the distribution for and select the certificate you created earlier (which should show if you created it on us-east)

‍

• Click on Create Distribution and you’re done ! (in my case the, root domain). A distribution can take up to 40 minutes to be deployed but usually takes between 10 and 20 minutes.
• Keep note of your origin/distribution domain name as we’re going to use it for our next step

‍

5. There’s only one thing missing now, and that’s to actually use our distributions with our domain name. To do so, we’re going to once again look for our domain name manager.
In my case, it’s super easy:

• Click on your domain’s hosted zone and create an A — IP v4 (alias) record, click on Yes for the alias option.
• The alias target should give you options, and if you scroll a bit, you should see your Cloudfront domain name under Cloudfront distributions if you gave the right alternate CNAME when creating the distribution.
• I started with the root domain here so I’d have to repeat the operation with a www.5e-pour-rien.com record.

‍

If you don’t use Route 53, the idea is the same, create an A record with a name of @ (itself) and a value of your-domain.com’s Cloudfront distribution domain name (d2xxxxxxx.cloudfront.net) you created.

Repeat with an A record for www.your-domain.com and its Cloudfront distribution domain name.

6. You’re done ! All you have to do is to wait for the distributions to be deployed and for the DNS changes to be propagated.

What’s next ?

If you already have a backend running, you can just enjoy cheap rates and speed as is.

If you don’t, stay tuned for part 2 where I explain how to build a super lightweight and scalable back end with AWS Lambdas !

Bonus : Make live changes on your website instantly

You can change the default options of the Cloudfront caching, but I wouldn’t recommend it since it’s part of what makes the distribution so fast. The alternative is to use Cloudfront invalidations to refresh your website.
You get up to 2000 free invalidations per month so you can use them quite a bit although it’s much better to do your biggest changes locally.

To do so, click on one of your distributions and go on the Invalidations tab:

‍

Click on Create Invalidation and type /* to invalidate all of your files

‍

Wait a bit, and you’re all done ! All your changes are live !

‍