Hey guys and gals. A post on the community forum of Indie Hackers inspired me to write this article. I'm going to get a little technical, so if you aren't down with that back away!

I'm a Senior Software Engineer living the tech dream in San Francisco and I am going to tell you how I quickly deploy static sites for my side projects (🚨 warning you need to know how to use React and not be afraid of Amazon Web Services). This is cheap, quick, and easy (albeit maybe a lot of clicking around). But fear not. Let me break it down for you. 

Here's what I'm going to show you how to do:

  1. Create a static site using GatsbyJS.
  2. Create an S3 bucket on AWS
  3. Create a CloudFront Distribution on AWS and point it at your shiny new bucket.
  4. Register a domain name with Route53 and point it at your static site.

Create a static site with GatsbyJS

If you're not familiar with Gatsby it's "a blazing-fast static site generator for React." It allows you to develop with React locally (with hot module reloading) and when you're done you run a build command and you get a built folder of .html and .js files that will run your site.

So to get started with Gatsby go to https://www.gatsbyjs.org/docs/. Read through the docs, create your site, and come back here.

Here's some gotchas to remember about Gatsby: 

• They use their own (outdated) versions of webpack and webpack plugins. If you add Gatsby to an additional project watch out for conflicting versions.

• Gatsby renders your React components as if they were rendered on the server when creating your built files. With that being said if you reference window you will need to do so only in componentDidMount OR check if window is undefined using typeof window === 'undefined'.

Create an S3 Bucket on AWS

If you don't already have an account on AWS go make one https://aws.amazon.com/. After you create your account it's time to make your bucket. The easiest way to find stuff in the massive AWS menu is just type it in the search bar after opening the "Services" drop down menu.

After you get to the S3 UI click the Create Bucket button

After clicking the create bucket button a modal will pop up. All you need to do is type in your bucket name (whatever you want) and click the "create" button. We will be using CloudFront to manage permissions.

After you create your bucket you should see it in the list of buckets. Click on the bucket name to open the bucket UI and you'll be able to drop files into the bucket. If you haven't done so already go to your Gatsby project folder and run gatsby build. Gatsby will build your project to a /public folder. Upload all the files/folders from the public folder into your bucket (not the public folder itself just the content of the public folder).

Register a Domain Name in Route 53

Route 53 is the AWS domain management service where you can register domain names and update things like name servers and CNAMEs. We are going to take care of the domain name business now because it will make it easier to create an SSL certificate when it comes time to create the CloudFront distribution. We will come back to Route 53 after creating the CloudFront distribution to tie the two together.

Once you get to the Route 53 dashboard you'll see you can register or transfer a domain. Once you do this you'll see it show up in the list of domains. After your domain is in Route 53 it's time to set up the CloudFront distribution.


Create a CloudFront Distribution

When you get to the CloudFront dashboard click Create Distribution

You'll want to Get Started with the web distribution:

The first field is the Origin Domain Name. Select the field and you will see a drop down list. Select your S3 bucket from that list.

The next field is Origin Path. This is important. Type in index.html (no slash). This is going to tell CloudFront that when someone hits the root of your domain (example.com as opposed to example.com/somepath) its going to show index.html - which was generated for you by Gatsby.

We want to make it so only the CloudFront distribution can interact with the bucket. This means that people won't be able to directly access your bucket, only the CloudFront url that points to the bucket. The following options will do that:

We also want to redirect to HTTPS so lets turn that on:

g-zipping is cool too so lets have CloudFront compress objects automatically for us:

Next you want to tell your CloudFront distribution if you will be using a custom sub-domain. If you registered example.com and want to use www.example.com you will need to add www.example.com here (only www.example.com and not the root domain that would be example.com). We will set up a CNAME for the www domain and an Alias for the root domain after we create our distribution.

You want an SSL certificate and CloudFront makes this easy to set up. In the SSL Certificate section choose Custom SSL. Since you don't already have one created for your domain click "Request or Import a Certificate with ACM".

When you get to the ACM UI you want to create a certificate for both the root domain (example.com) and the www domain (www.example.com). So just click add domain to add the www domain to the cert.

Create the certificate. ACM should've opened in a separate window. Go back to setting up your CloudFront distribution and click the refresh icon next to the certificate drop down list and you will see your new cert - select it.

Click "Create Distribution"! On to the final step - pointing your domain at the distribution.

Add an Alias/CNAME in Route 53

First go to the CloudFront dashboard and get the domain name for your CloudFront distribution. Copy it.

Next go to Route 53 and click Hosted Zones

Click on the domain name you want to use. You will see a button that says create record set. Click that button and a form will show up on the right hand side of the screen. Since you are setting up the root domain leave the Name field empty and change the Type to A - IPv4 address. Select Yes for Alias and add your CloudFront domain to the Alias Target field. Click Create.

Creating the Root Record Set

Next we want to add the CNAME for the www domain. Same thing as above - click Create Record Set. Set the name to www. This time choose CNAME and Alias is set to No. Add your CloudFront domain to the text field.

Creating the www record set

Click Create and boom! You're done. If you made it this far pat yourself on the back for slaying AWS dragons. Lets recap what you did:

  1. Created a static site with Gatsby
  2. Created an S3 Bucket
  3. Registered a domain name with Route 53
  4. Created a CloudFront distribution with a custom SSL certificate. Also restricted access to the bucket so only the distribution can read from it. 
  5. Pointed you domain name to the CloudFront distribution.

Good work. Now you should have a static site up and running that's going to cost you next to nothing. 

More from Indie Hackers: