Blog

Easy Way: Static Hosting with Amazon S3 and Cloudfront


Some weeks ago we analyzed how to setup a static website using Amazon S3 and Amazon Cloudfront manually (You can find that here). We learned to use the dashboard of each service and how to configure the basic parameters needed for our setup. In this new tutorial, we will be using Amazon Cloud formation.

Amazon Cloud Formation is a service that allows us, to create and manage a collection of related AWS resources. Is like a predefined configuration of several services connected together to work in the desired way. In this case a static hosting and global distribution with both Amazon S3 and CloudFront.

AWS Console Dashboard

Before starting, on our main dashboard from the AWS Console, we can find some useful CloudFormation Templates created by Amazon Web Services. Those can be found in Build a solution, under AWS Services.

For starting the tutorial, we will click on Host a static website (With S3, CloudFront, Route 53 ~5 minutes). A new page will show up, with all of our websites created with this wizard. For setting up a new website, just click on New Website button.

On the new window, insert the name of the webpage (this name will appear on the previous page, where all our pages are shown). And select Your Website under How do you want to start?. Once done, click on "Create your website".

DONE! Wait some time for the system to upload your website to S3 and to start the distribution on Cloudfront. It may take 15mins approximately to setup everything.

On the same page, we will be able to re-upload the content of our website and our CloudFront domain that later can add to our custom domain or to Amazon Route53. After some time, a live preview of our page will appear.

If we have our domain with Amazon's Route53 Service, we can set it up using the Buy Domain button. This will allow us both, to buy a new domain and use it, or to use an already owned domain.

We can edit any parameter we want on S3's dashboard or in CloudFront's dashboard. But the basic setup is already done and configured by itself. Easy right?

Be sure to comment any question or suggestion in the comments.

Share what you've learned

Get Free Updates

Subscribe to receive my lastest publications! And don't lose any post again.

Delivered by FeedBurner

Let's Get In Touch!


Actions speaks louder than words! Do you want to contact me? Go ahead!