This site is intended as a project for me to learn front-end development, and I wanted to host it on Amazon Web Services. I ran into a few snags getting this up and running, and I never found a complete tutorial on how to do this. I'm hoping this post fills a gap.

So why AWS? Well, AWS is the current industry standard cloud offering, and many of the services are budget friendly. Additionally, for me, personally, the organization I work for is looking to move the bulk of its workload to AWS, and I'm anxious to learn as much as I can about the platform. AWS has some cool SaaS offerings, such as Relational Database Service and Directory Service, so I did a DuckDuckGo search on AWS webhosting and discovered I could do it through S3.

Setting Up Your S3 Buckets

For those who don't know, S3 is Amazon's storage service. Setting this up was pretty simple. First, you need to register your domain. I use Namecheap, but you can use Amazon Route 53 or your domain registrar of choice. Next, log into the S3 console at https://console.aws.amazon.com/s3/ (I won't go into creating an AWS account, but it's pretty straightforward). If you want to redirect from one domain to another – I have a rederict for my website from cmjgrubb.com to www.cmjgrubb.com – you'll need to create two buckets, one for the page itself and the other for the redirect. We'll cover the redirect bucket first. Hit the "Create Bucket" button. The name of the bucket is going to be your fully-qualified domain name you're redirecting from, e.g. mine is cmjgrubb.com. Click next. I'll leave you to decide your settings on that next page, but take some time to explore your options. For now, just choose the defaults on the permissions page and press on. When you're satisfied, click "Create bucket."

In the main S3 console, click on the name of the bucket you want to redirect from. Hit the "Properties" tab at the top. From there, click on "Static website hosting." Click the "Redirect requests" radio button and enter the FQDN (e.g. www.cmjgrubb.com) in the "Target bucket or domain" text field. That's it for the redirect! Now let's look at creating the bucket you'll host from.

Head back to the S3 console, and hit that "Create bucket" button again. The name of this bucket is the FQDN of your site. Again, explore your options on the next page and select what works for you. Back on the main S3 console, you click on your new bucket. Click the properties tab. Click "Static website hosting." Click "Use this bucket to host a website." I just used the standard index.html for my index document. You can upload your index document and any other files you'd like in the overview tab.

Configuring CloudFront for HTTPS

The S3 part was pretty straightforward. It was setting up CloudFront that gave me issues. To be honest, you don't even need CloudFront, but if you want to run your website over HTTPS, you'll need to set it up. For good or bad, the modern web is pushing us in that direction. Who am I to stand in the way of progress?

The first step is to get yourself a certificate. That's outside the scope of this article, but it is important that the certificate doesn't use higher than 2048-bit encryption. That's the highest CloudFront supports.

The console for CloudFront is at https://console.aws.amazon.com/cloudfront/. Start there and click the "Create Distribution" button at the top. On the next page, you want to select a Web CloudFront. The origin is going to be the FQDN of your S3 bucket, which you can find under Properties > Static website hosting on your S3 console. For viewer Protocol Policy, you want to redirect HTTP to HTTPS. The Alternate Domain Names (CNAMEs) is the FQDN of your website. You are going to want to use the custom SSL option.

A side quest! Now, we have to jump over to AWS Certificate Manager at https://console.aws.amazon.com/acm/home?region=us-east-1#/. Make sure that you have the little "N. Virginia" in the top right. For some reason unbeknownst to me, this is important. Beknownst to me is the fact that this will not work in another region. Click the "Import certificate" button at the top. You'll just copy and paste your certificate and key into their respective text boxes. The rest is pretty straightforward.

Back to the main storyline, you should now see your certificate in the dropdown. I think you can select the defaults on everything else and click the "Create Distribution" button in the bottom right. The last piece of the puzzle is to create a CNAME record with your domain registrar from the hostname you want to use pointing to the domain name in CloudFront, which can be found in the main console for your distribution.

That should be it! Unfortunately, I wrote this tutorial after having done this. I hope I didn't miss anything, but if you have any questions, comments, or suggestions, hit me up on Twitter at @CmjGrubb. I hope this was useful for you!

Postscript – Making Changes to Your Website

I just ran across this last night. I uploaded some changes to my S3 bucket, but my changes weren't reflected. It makes sense, though; CloudFront is a caching service meant to speed up your webpage first and foremost. We just need to clear the cache, right? Unlike many things in technology, it really is that easy. Go back to your CloudFront console and click on your distribution. Click on the "Invalidations" tab. Sounds pretty dramatic, right? Click the "Create Invalidation" button. Type the path of the filename(s) you want to refresh. If you want to refresh everything, you can just enter an asterisk for a wildcard. Finally, don't forget to clear the cache on your browser.

God bless!