I host this site with SSL for pennies a month using Amazon S3 and CloudFlare. Here’s how to do the same.

Setup Amazon S3

The first step is to create an account on Amazon S3. Now click on the “Create Bucket” button.

If you want to use a custom domain like wsvincent.com, your S3 bucket name MUST EXACTLY match your custom domain name. Since my site is wsvincent.com that is what I name my S3 bucket, too.

Under “Region” I recommend using “US Standard” if you are based in the U.S.

Next we need to setup the Properties for our S3 Bucket, which should automatically open after creating the new Bucket. Under “Permissions” click on “Add Bucket Policy” and copy/paste the below making sure to change “wsvincent.com” to the name of your S3 bucket.

    "Principal": "*",

Make sure to click “Save” once you are done.

Next click on “Static Website Hosting” and then the “Enable website hosting button.” For “Index Document” enter in “index.html” and for “Error Document” enter “404.html.” Then click the Save button.

Note: Technically it does not matter if you setup your website to include “www” (https://www.wsvincent.com) or not (https://wsvincent.com/) in the URL, but I think it is cleaner without, so we are going to setup a “www” S3 bucket too and make sure it redirects automatically.

To do so, create a second S3 bucket with “www” in front; in my case that means a bucket named “www.wsvincent.com.” Next click “Static Website Hosting” and click on the button next to “Redirect all requests to another host name” and enter the name of your first bucket; in my case, “wsvincent.com.” Then remember to hit Save.

The final piece is to upload our site to S3. Click on the bucket itself, and then on the “Upload” button to manually do this.

Ok so now our site is up on S3! If you want to see this for yourself, go into Properties for your bucket, click on Static Website Hosting and note the “endpoint” for your particular bucket.

In my case it is http://wsvincent.com.s3-website-us-east-1.amazonaws.com/.

But we want our URL to be something nicer like wsvincent.com so we need to setup our DNS.

Setup CloudFlare

CloudFlare is a great service and its Free tier includes SSL and improved site performance through a Content Delivery Network (CDN). So let’s use it!

Signup for a CloudFlare account. Step 1 is to click on “Add site” in the navbar and enter the eventual URL you want for your site and then “Begin Scan.”

It will take a minute or so for CloudFlare to do its initial scan. Once complete, click on “Continue Setup.”

Step 2 is to setup your DNS. We want to have two CNAME records that point to our S3 buckets. Delete the A Record that CloudFlare may have found/automatically added by clicking the “x” on the right side of the screen.

CloudFlare will create a CNAME record for you with “Name” as “www.” Update the “Value” to point to your S3 www bucket. For this site, that is “www.wsvincent.com.s3-website-us-east-1.amazonaws.com”. NOTE: Make sure to not include the “/” at the end or “http://” at the beginning of your S3 bucket URL.

For the second bucket, Type=CNAME, Name=@, Domain Name=theS3endpointforyourbucket. Click “Add Record.” Note the S3 bucket here is for your main bucket, “wsvincent.com.s3-website-us-east-1.amazonaws.com” in my case.

Make sure the cloud with an arrow going through it next to each record is ORANGE as is in the image below. Otherwise CloudFlare is not “on.”

Scroll down and click the green “Continue” button.

Step 3 is to select our CloudFlare plan. Click on “Free Website” and then Continue.

Step 4 is to change the nameservers on your Domain Register. We will do this in the next step so for now it is ok to just click “Continue.”

Step 5 is on the Crypto page. Set the SSL to “flexible” so that we can accept both http and https traffic.

Step 6 is to set the default to use https rather than http. Google hurts your SEO if you do not do this. Click on “Page Rules” in the top nav and under “Add new rule” write the following URL pattern, changing wsvincent.com for your own URL: “http://wsvincent.com/” Underneath is a link for “Add a Setting.” Scroll down to “SSL” then for “Select SSL setting” click “Flexible.”

Now even if someone goes to the http version of your website, CloudFlare will automatically route them to the https version. Go ahead and try it on my site. http://wsvincent.com will route to https://wsvincent.com.

The last step is to click on “DNS” in the top nav and then scroll down until you see the CloudFlare Nameservers section. Chances are it will show you two records for “jeff.ns.cloudflare.com” and “tegan.ns.cloudflare.com” but it is fine if you see something else.

Remember these two nameserver addresses. Our final piece of the setup puzzle will be to copy them over to our Domain Register.

Setup your Domain Register

I recommend using NameCheap but if you have GoDaddy or another service that is fine too. The instructions below assume NameCheap though.

Sign in to your account and then click “Manage” next to your domain.

Under NAMESERVERS click on “Custom” and then enter the two nameservers you were provided by CloudFlare. In my case, it was “jeff.ns.cloudflare.com” and “tegan.ns.cloudflare.com.” Make sure to click the small checkmark once done.

And that’s it! It can take up to 24 hours for all these changes to go into effect but in general things should work after a few minutes. Good luck!

Next Steps

Learn more about static websites with the following posts: