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

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.
The S3 interface, i already created the buckets
The two created 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.

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.
Since my domain was bought on Route 53, I could create a record in the Certificate Manager
  • 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
Our Cloudfront distribution
  • 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.
Associating the root domain to its cloudfront distribution

What’s next ?

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store