How to host a static website (with SSL) on AWS in just a few minutes!

You can say what you want about AWS, its pricing and its not always very understandable interface, but when it comes to hosting static files and its CDN service, there's not much to complain about!

In a previous article, I showed you a simple way to host a static demo on Github, but how do you go about it when you want a production-ready static site?

That's exactly what we're going to look at today, and all you need is a domain name and an activated AWS account!

Create an account today and get 12 months of access to the free tier: https://portal.aws.amazon.com/billing/signup#/start

I should point out that this article is absolutely not sponsored!

1 - Creating the bucket and uploading the files

When we talk about AWS S3, we're not talking about a repository, nor a server, but a bucket.

The advantage of this service is that you can host static files very easily, at low cost, and make them publicly available (or not) through a URL.

Head over to the S3 console: https://s3.console.aws.amazon.com/s3/home

Then, simply click on the "Create bucket" button, choose its name, its location and the access rights. You must allow public access because we're going to host a site, which is by definition, public.

Once that's done, you should end up with an empty bucket, into which all that's left to do is upload your files.

Careful, when you upload the files of your static site, you must allow public read access to the files, otherwise the bucket may refuse you access and return a 403 error.

2 - Bucket configuration

Being able to access your files through a link is great, but that doesn't mean we're already done, because without additional configuration, S3 will return our html files as plain old text files...

And after all, it's right, they're only text files deep down!

But fortunately, by going to the "Configuration" tab you should find a box titled "Static website hosting", by clicking on it, you should be able to enable this option for free and configure it as shown below:

And by magic, AWS should directly provide you with a link to access your website! In the rest of this tutorial, we're going to link our custom domain name to this hosting thanks to Amazon Cloudfront.

Remember to test that the link given by S3 does indeed let you access your site, otherwise redo the previous steps!

3 - Creating the Cloudfront distribution

Cloudfront is Amazon's web services CDN, and it will serve us for four things:

• Make our site easily available everywhere on the globe
• Reduce the read load on our S3 bucket
• Link a custom domain name, and above all...
• Add an SSL certificate to our hosting!

For this, head over to the Cloudfront dashboard: https://console.aws.amazon.com/cloudfront/home

Then, click on the "Create distribution" button and select the classic "web" mode. You should land on a fairly long form, filled with very different fields but don't worry, some are essential, others are simply useful, but we're going to focus on only four of them:

• (Mandatory) In the "Origin domain name" field you're going to copy-paste the url that your S3 bucket provided you with just before. (Be careful to properly copy-paste the url and not select it from the list, this is important)
• (Optional) Then you can enable the "Automatically compress objects" option, this enables gzip compression of your files on the server.
• (Mandatory) In the "Default root object" field, enter "index.html".
• (Optional) You can enter the name of your site in the "Comment" field, this will help you find your way among all your distributions!

At the end, all that's left is to confirm the creation. Deploying a new Cloudfront distribution can take a bit of time, but you should be able to access your new url (at xxxx.cloudfront.net) a few minutes later!

Just like with the S3 url, remember to check that your site is accessible through the Cloudfront url once the distribution has moved to the (Deployed) status

4 - Generating the SSL certificate

Managing SSL certificates with Amazon means you don't have to worry about renewal, and that the certificate integration into other services is very simple.

For this, simply open the "Certificate Manager" available at https://console.aws.amazon.com/acm/home, select "Provision certificates", click on the "Request a certificate" button then on "public certificate.

Then just follow a few simple steps:

• Add your domain names
• Choose DNS validation (skip the section on tags, then confirm the request)
• For each domain, AWS will provide you with a record to add to your DNS configuration (without which Amazon won't be able to verify that the domain belongs to you)

Once these steps are complete, it will take Amazon a few minutes to validate the certificate, your certificate will be available once its status changes to "issued".

5 - CDN configuration

Most of the configuration was done when creating the Cloudfront distribution, but we still need to link our domain name, enable the SSL certificate and redirect http calls to https!

For this, simply go back to your Cloudfront dashboard and click on the distribution ID in question to display all the settings tabs like this:

Domain name and certificate

The first step will be to add our domain name and our certificate, for this, simply click on the "Edit" button in the "General" tab.

Then, you need to enter your domain names, choose the "Custom SSL Certificate" option and finally choose your freshly issued certificate from the list.

Careful, the Certificate Manager must show the "issued" status next to your certificate, otherwise it won't be visible in the list (if it doesn't appear, try reloading the page).

http to https redirection

Once that's done, go to the "Behaviors" tab, select the "Default (*)" line and click on the "Edit" button.

All that's left is to select the "Redirect HTTP to HTTPS" option as shown below:

Update

Cloudfront caches as many files as possible to lighten your hosting load, which means that when you modify files, or when you change the CDN configuration, you sometimes need to invalidate the old cached files.

For this, I invite you to click on the "Invalidations" tab, then "Create invalidation" and invalidate the whole cache (*) to make sure you don't run into any issues caused by the configuration change!

6 - DNS configuration

The last step is to add a CNAME record to your DNS manager for your domain, pointing to the xxxx.cloudfront.net url of your distribution.

Once the DNS propagation is complete, your site should appear perfectly with your domain name, and be accessible only over https!

Congratulations, you now know how to publish a static site on AWS! I hope you enjoyed this article, if you run into a problem while following it, don't hesitate to let me know in the comments at the very bottom of the page!