This article was originally published at:
https://www.blog.duomly.com/aws-course-lesson-1-how-to-host-website-on-s3-with-cloudflare/

Intro to AWS course - How to host a website on S3 with Cloudflare

In the first lesson of the AWS course, we'll talk about hosting a website on S3 with Cloudflare.

How you ever heard about the idea of hosting a website on the Amazon S3?

Yes, it's possible, and it's one of the best ideas, especially if we can combine that with free CDN from the Cloudflare company.

It's blazing fast because the page is static, so we don't need to wait for the server response(almost because every server has some response time, but here we just server stuff, without DB queries, etc.), and hosted through Content Delivery Network.

It's very secure because there is no backend and almost no way to put any vulnerable code (of course, if you won't allow that).

It's very cheap because you do not need to handle tons of the data, like unnecessary CMS files, that you should run somewhere, and serving files is much less expensive than computing power.

It's easy to configure because you don't need to spend a lot of time configuring your server, installing databases, and configuring Nginx or apache.

In this case, it's enough to create a bucket, make it public, add cname record in cname and upload your page.

Are you ready to go into the blazing-fast static pages world?

Let's start!

And if you prefer video, here is youtube step by step tutorial:

How to create an S3 bucket

Of course, if we would like to work with the AWS S3 service, we must have created AWS user, and it would be useful to config IAM users for that.

Anyway, if we have that ready, we can head into the S3 service.

Next, we should click the "Create bucket" button.

How to config S3 bucket

Now, we should see the window of creating the bucket, but before we create that, we should add some configuration.

In the field where we specify the bucket's name, we should add the name exactly the same as we'll use for the URL.

If our URL should be "training.duomly.com", our bucket should have the name "training.duomly.com".

If we decide to have "www" in the URL, the "www" should be in the bucket's name.

The next important thing that we should configure is to set up a whole bucket as the public, so users will be able to see the data inside.

Of course, you do not need to add file listing access, and probably you shouldn't, but files that should be accessible to users should have the public "read" access.

Next, you can confirm creating the bucket.

How to add an S3 bucket policy

Great, our bucket is created, congratulations!

Now we can focus on the configuration inside the bucket, but don't worry, there are only two steps.

The first one is to specify the bucket access policy.

You can write your own, or you can use the one that is in the example below:

{
  "Version": "2008-10-17",
  "Id": "PolicyForPublicWebsiteContent",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOURBUCKETNAME/*”
    }
  ]
}

How to setup S3 bucket as a hosting

The second step that you should perform is to configure bucket as the web hosting.

To do that, you need to go into the "Properties" tab in your bucket.

Next, you need to open the menu position "Static web hosting", and turn it on.

Inside that table, you need to specify which one page will be responsible for the main page, and which one is for 404.

You can put "index.html" in both of the inputs.

After specifying pages, you should copy the bucket URL (you'll need that URL for the Cloudflare to point CNAME record on that).

Go into Cloudflare on the domain

We are done with the S3 bucket configuration, now we can go into the Cloudflare.

Of course, you need to have added domain and configured your domain-registrar DNS servers for the Cloudflare, but I assume you have to.

Next, you need to open your domain's dashboard and go into the DNS tab.

How to setup cname record in Cloudflare

Now, we can configure our DNS records to point the subdomain into the S3 bucket.

It's the moment when you'll need the S3 bucket URL that I've recommended you to copy in 2 steps before.

To configure your domain or subdomain for the S3, we need to add a DNS record that'll point into the S3.

When you use a subdomain, you need to select an option to add a cname record.

In the input "name", you should type only your subdomain name, not the whole URL.

And in the "target" input, you should add the S3 bucket URL.

Next, you should click "save".

If all went fine, you should see the new DNS record in the table below. 

How to upload a website to S3

You have configured S3 as web hosting, and Cloudflare subdomain to work with S3, congratulations!

Now, we can focus on the uploading website in the hosting.

It's very simple and quick.

You should go into the S3 bucket view and click upload.

How to setup S3 website as a public

In the upload window, you can select or just drop files, and click "next".

In the next step, you can setup permission access for the files.

You can give the read access for everybody, and click confirm.

Of course, you need to verify if all the files should have the same access, and for sure, don't give write access for nobody else than your user.

Simple, right?

Purge cache

Cloudflare has an excellent feature that'll help you improve performance, and sometimes will save you by keeping your website online.

That feature is a cache.

It's great, but if you do a lot of changes, the cache can keep your changes for a long time, and users will not see the difference.

In most cases, the cache will detect changes and will upload the page.

If you want to be sure users will be updated, its worth to purge the cache after changes.

To do that, you need to go into the Cloudflare and click on the "Caching" tab.

Next, you need to click on the "Configuration", and in the section "Purge cache" you should click the button "Purge Everything".

Now you can try to visit the URL and verify if all works fine.

I'd suggest you test the page with Google PageSpeed Insights to see how powerful the performance of S3 + Cloudflare is.

Conclusion of AWS course - How to host a website on S3 with Cloudflare

Congratulations!

In the first lesson of the AWS course, you've learned how to host a website on S3 with Cloudflare, but it's only the first step to the good practices of the IT architecture.

In the next episodes, I'll show you more of the AWS services, and I will teach you useful things, like how to configure EC2 as backend, how to create serverless apps, or how to handle databases with the Amazon RDS.

We will talk about that exciting stuff like How to build Real-time apps with AWS amplify, how to train machine learning model, how to setup CDN with CloudFront, or how to send emails with SES, but we will not only talk about single services.

I will show you how to set up IT infrastructure for your small, medium, and massive projects, what you should take care of most, and how to scale your applications.

You can find the episode where we build very fast AMP static website with Hugo, and host it to the AWS S3:

https://www.blog.duomly.com/how-to-build-website-with-hugo-and-amp-tutorial

Thanks for reading,
Radek from Duomly