How To Host Your Personal Website for Free

Through the magic of AWS S3 and Cloudflare

Picture from https://unsplash.com/@kevnbhagat

With the web rapidly evolving in the last five or so years, dev-op practices that used to be considered the standard are now obsolete.

To get a website online, the standard used to be to look at paid shared cPanel hosting services, such as NameCheap or GoDaddy. While shared hosting is still a valid solution for pushing your website to production, more intuitive solutions have surfaced. I’ll be explaining the approach that I took for deploying my personal website where I effectively pay $0 per month to keep my website online.

First things first — prerequisites:

You will need to have the static files (HTML/CSS/JS) to your website. This guide is only applicable to sites that utilize a static set of files.

You will also need a custom domain. Domains typically run around $15 a year on average, depending on the TLD extension you are looking at. It is definitely worth the investment for personal branding.

You will also need to have an account created on Cloudflare and Amazon Web Services. If you are not familiar with either of these services, that is OK — I will be explaining each step you need to take on both platforms. Let’s get started.

Setting up AWS S3 bucket:

After signing into the AWS console, head over to the S3 Management Console.

Go ahead and click the Create Bucket button. A modal will appear asking for details about the bucket you are creating.

AWS S3 Management Console

For your Bucket Name, make sure you are entering exactly what your domain name is. For the example of this tutorial, I will be using the domain tutorial.joey.dev . For the region, I am picking what is geographically closest to me, US East (N. Virginia). Feel free to pick what is closest to you as well. Click Next when you are ready to move on.

AWS S3 Create Bucket — Step One

Once you are on step two, click Next. On step three, make sure you uncheck the Block all public access option, as well as the other checkboxes. We do not need to utilize S3 Log Delivery, so disable that option too. Click Next.

AWS S3 Create Bucket — Step Three

On step four, go ahead and click the Create bucket button. After you have created the bucket, you should see the new bucket shown in the list of your buckets on the S3 Management Console page. Click your newly created bucket, and you should see something similar to this:

AWS S3 — Newly Created S3 Bucket

Click the Properties tab near the top of the screen, and then Static website hosting on the first row of cards. Click the Use this bucket to host a website option. For the index document, go ahead and enter index.html and click save.

Make sure you note down the endpoint they give you.

AWS S3 — Static website hosting configuration

Awesome! Now the last part of the AWS side is uploading your static site’s files to your new bucket. Click the Overview tab and then the Upload button. You will be greeted with the modal below. Go ahead and upload your site’s files.

AWS S3 — Upload files step one

After selecting the files to upload, click the Next button. On step two, you will want to click the Manage public permissions dropdown and change it to the option Grant public read access to this object(s). Click Next.

AWS S3 — Upload files step two

From step three, ignore all the options and click the Next button. On step four, click the Upload button. After uploading, you should now be able to visit your website through the back end endpoint URL I told you to save.

Hooray! Let’s move on to setting up Cloudflare.

AWS S3 Hosted website

Setting up Cloudflare:

I am assuming that you are a first-time Cloudflare user and have not connected your site’s domain to Cloudflare’s services. From the Cloudflare dashboard, click the Add a Site button. Enter your website URL, and click Next. Click Next once more, and, when asked about a plan, select the Free plan and move on.

When you get to the DNS query results page, go ahead and delete all the records it has scanned. Your results should look similar to this:

We want to add two different CNAME records.

For the first record, for name, enter www , and for Domain name, enter your domain name without http://. E.g. tutorial.joey.dev ).

For the second record, for name, enter your domain name, and for Domain name, enter your back end S3 bucket endpoint we visited earlier in this tutorial. Make sure the orange cloud is enabled when adding these records.

Cloudflare DNS records configuration

After you have confirmed that your records are set up correctly compared to my picture, click continue. You will now have to change your domain’s nameservers from your domain’s registrar to point to Cloudflare’s nameservers. You should reference your domain registrar’s knowledge base on a guide on how to change your nameservers, as every website is slightly different in terms of layout.

After changing your nameservers, you will need to set up a few page rules. Before that, let’s make sure the SSL certificate is on the correct setting. From the Cloudflare dashboard, click on the domain to be redirected to the domain dashboard. Click the Crypto tab and make sure your SSL is set to Flexible.

Cloudflare SSL Configuration

The end is near! Click on the Page Rules tab. We will need to create two page rules to have all non-SSL traffic redirected to SSL. For this section, I will include the page rules I am using for my actual sites. If you are on a .dev domain, you will only need this page rule (this rule is required for all other domain TLD extensions as well):

Since .dev domains automatically redirect to SSL, the only case you need to take care of is the case when someone enters www.domain.dev. This rule combats that.

If you are not on a .dev domain, you will also have to include additional this page rule:

Visit your website using your custom domain. Ta-dah! You will be visiting an SSL enabled version of your site that is hosted on the cloud utilizing an AWS S3 Bucket.