Categories
AWS Static Website

FREE* Static Website W/ SSL on Amazon S3 + CloudFront CDN W/ Third Party DNS Step By Step for Beginners

For this tutorial we will build a Static website with SSL encryption using AWS S3 Buckets and use our Third Party Domain Name Host Provider (Google Domains in my case but GoDaddy or other DNS hosts will work the same) to produce a lightning fast website on one of the worlds fastest CDNs (Cloud Delivery Network based on Amazon CloudFront). Many of us out there own our Domain using other DNS providers and cant utilize AWS S3 with CloudFront because of this so with this procedure we will enable all of the benefits of AWS and keep our own DNS Host Provider with only a small catch, the name swervers will be hosted on Route 53 so you only get 20000 free lookups a month – then its a few pennies or more after that. For this tutorial I will be assigning www.itadmin.business to my S3 Bucket and obtaining an SSL certificate from AWS to secure our site and give us the almost mandatory now a days https lock icon in our address bar.
First we need to Log into our AWS console. If you do not yet have an account you are in luck because AWS offers you free tier access for a year to get started with at the following link. (not an affiliate link yet but thanks anyway)
*and then its almost free forever depending on the traffic and size of your website
Amazon offers many free cloud services for the first year.

Set up your S3 Bucket

Once we are logged into our Console scroll down or use the search bar to get to the Storage block and select the S3 link.
Click on Create bucket – big orange button on the right of the page.
Enter your domain name as the Bucket Name and select the us-east-1 Region so you can streamline your installation.When we create our Certificate for SSL encryption we will issue that in the us-east-1 region which is necessary to enable the custom SSL certificates option.
Leave the rest of it as default and Click Create Bucket.
Back in the S3 buckets page click on your newly created Bucket.

If you have your website files handy get those ready and skip ahead to the Uploading your static website but because this is a beginner tutorial I will deviate from that and go into a quick tutorial of how you can build a static website. First thing we need is an index.html file. You can create this in a text editor like Notepad++ or Sublime Text or even a very basic editor like NotePad on Windows. Below I paste in the skeleton of a basic Static HTML website and all associated CSS style all in the same document. Normally you break up the CSS into a separate style.css file and reference it but for the sake of simplicity I will put it all in the same document which you can modify for yourself. For those who notice the formatting I did it to save page space. There is even a print button and the document is set up to give you consistent header and footer placement during printing. This document is Heavily commented for ease of use. Although JS could be included for some advanced features I have opted to stick to basic HTML and CSS so anyone can customize the file but I may include an optional static site with JS at the end of this tutorial once time permits and I will update all registered email addresses on file.

Now lets upload our static website. If you dont have one handy I have included a very basic html document you can use and customize to suit your needs or as a placeholder.

Creating a Static HTML Website

In the file below I provide the code you see in the screenshot above that you can customize for your static web page. In the interest of simplicity I have included all of the styling inside the html document and have heavily commented every relevant line so anyone can edit this with minimum effort. The program used above is Notepad++

Uploading Your Static Website

Click the Add files button and then open the folder where you html files are located and select all the relevant files you wish to upload (hint: hold the shift key and select the first and last files to select all or hit ctrl + a on your keyboard) and then select Open
Now you can just click the Upload button. We wont bother with the Set Permissions, Set Properties, or Review tabs as they are unnecessary for our purposes since we are following the REST API version of CloudFront S3 web hosting.
Now that your files are uploaded click on the index.html file to obtain your website address
Now that our files are uploaded we can move on and create our custom SSL certificate.

Custom Domain Name + SSL Encryption

Now that we have a URL that links up our index.html to our S3 Bucket location we can set up our custom domain name with SSL encryption.

Go back to your AWS console and search for the Certificate Manager
If this is your first time go to the Provisions certificates block and click on Get Started
You should now be on the Request a certificate page. Before we begin we must make sure we are in the us-east-1 region.
To use AWS free certificate feature with our custom domain name from a third party DNS provider such as Google Domains we must enable AWS Cloudfront and assign a CUSTOM SSL certificate and that is only available through the us-east-1 region.
In the Domain name Field enter in your Domain name then click on Add another name to this certificate and enter in you CNAME (www.yourdomainname.com) (Use the example above) and click Next
Choose DNS Validation since we already own our DNS name. In my case I purchased itadmin.business through Google Domains and I will verify it through the Google Domains Console.
In Step 3 we are afforded the opportunity to Tag our certificate, I will do so by Tagging my “Website” as “itadmin.business” and then click review.
If everything looks good click Confirm and Request.
Now that our request is being processed we are given some key information we need to add into our DNS providers console. In my case I use Google Domains so I will show you how there but the process will be the same for every DNS provider including GoDaddy and others, it will just look slightly different. The common denominator here is that we need to create two CNAME records to validate our AWS generated SSL certificate. The name and value for each are different so make sure you enter in both separately.
Above I copy and paste the names and values into the two CNAME records we need to validate our certificates.
Success!!! Our 2 certificates changed from pending to issued. This should take less than 2 minutes usually.

Set up CloudFront + SSL for super fast and secure load times across the globe

Just a few more steps! Back in our management console search for CLOUDFRONT and click on it.
Click Create Distribution
Click Get Started
Click on the Origin Domain Name and you should get a drop down menu with your Amazin S3 bucket available for selection. Select it.
Click on Restrict Bucket Access, Then Create a New Identity and in the comment add whatever you like or follow my example, and finally choose Yes to Upadte Bucket Policy. (For those of you have tried the Object URL method in the past we did not modify our bucket policy to be public when we created our S3 bucket and are instead going with the REST API method which allows our content to be a little more secure since now only our CloudFront distribution is granted access to our bucket contents.)
Scroll down to the Default Cache Behavior settings and only change the Viewer Protocol Policy to Redirect http -> https
Scroll down further in the page to the Distribution Settings and in the Alternate Domain Names (CNAMEs) box enter in your
yourdomainname.com, www.yourdomainname.com
addresses. In my example above I entered in
itadmin.business, www.itadmin.business
and secet your custom SSL Certificate we created earlier. This only works if you created both certificates at the same time so if you get an error here it is because you did not follow the certificate instructions correctly.
Scroll down toward the bottom and type index.html as the Default Root Object
Scroll to the bottom of the page and click on Create Distribution
You should be greeted with this message so just click the distributions link in the menu on the left.
Now you should have a valid CloudFront Distribution. Notice the status is “In Progress” so give it a few minutes until it changes to Deployed. This could take 15 minutes since it is a global network, not bad.
After a few minutes our status changes to deployed but we can continue while that is taking place to set up our name servers on our Third Party DNS Host. (Google Domains in my case but the procedure is the same for any other DNS host like GoDaddy etc…) BTW if you purchase or transfer your Domain from AWS to begin with then you dont need to change your name servers so you can skip that part.

Change your Name Servers from Your DNS Provider to Route 53

Back in the Management Console search for Route 53
Select DNS management and click on Get Started
Create a Hosted Zone – click it twice
On the right enter in your domain name without the www prefix and click on Create
We are automatically given our name servers that we need to export into our Third Party DNS host
Copy and paste the NameServers from Route 53 to the custom name servers in your Third Party (Google DOmains in this example) DNS settings and save.
In Route 53 click on Create Record Set
In the Create Record Set menu on the right leave the Name field empty and click Yes on Alias then choose the CloudFront Alias target from the drop down menu then click create at the bottom.
One more time lets click on Create Record Set
Now we arfe going to create a second A-ALIAS record this time with the www prefix in the name column. Our method of having both CNAMES in our SSL certificate has provided us with a 2nd drop down option for CloudFront distributions which is what makes this work properly.
Now we can check to see if our DNS has propagated but I warn you this process takes time. If your browser has cached the domain name you just set up make sure you clear your cache otherwise you might be pulling your hair out 45 minutes after you read this line.
Your static website should now be live, secured with SSL encryption that never needs maintenance and fast as lightning all over the world, except in countries that block the firewall their people. Enjoy!

Upload and modify your files from your desktop using CyberDuck (Donationware) with IAM controlled access

To edit your website files you can log into AWS and go into your S3 Management Console and upload into your Bucket or you can use a handy little program on your Mac or PC from CyberDuck. This software is donationware (free) so you can donate if you choose or you can purchase it through the Microsoft Store or Mac App store. Go ahead and install it after you download.
To give access to CyberDuck we can give it a root access key but that isnt something I would feel comfortable doing, so instead lets create a new IAM user and assign only the minimum permissions needed to get this convenient little program running.
Once in IAM click on Add user
Name the User (NoSpaces!) and choose Programmatic access then click next.
To keep it simple we will just choose the Attach existing Policies directly button and search for the AmazonS3FullAccess Policy and check it then click next. This will give the CyberDuck program access to every Bucket in your AWS S3 storage.
No need for Tags but why not……Click Next
Everything looks good so click on Next/Create.
Success!!!! Now we have an Access key ID and a Secret access key that we need to enter into CyberDuck.
Open CyberDuck and Click on Open Connection then choose Amazon S3 from the drop down menu in the window that pops up. Enter your Access Key ID and Secret Access key that you created earlier.
You should now have access to your S3 buckets directly from CyberDuck. You can upload/modify/download your files from here without having to log in.

And we are done! Thanks for following along and I hope this will help people create easy and affordable websites without any hassle or extra research and development time. If you like what you see and would like to contribute please Donate or check out my YouTube channel and subscribe. Thanks and be safe out there.

6 replies on “FREE* Static Website W/ SSL on Amazon S3 + CloudFront CDN W/ Third Party DNS Step By Step for Beginners”

Leave a Reply

Your email address will not be published. Required fields are marked *