Creating a website has never been easier than it is today. Now with cloud computing it’s dirt cheap and sometimes even free! If you’re looking to spin up a quick, free, static website then the easiest way is to use AWS S3. When you use AWS S3 to build your website, it’s as simple as creating the files, uploading them, and you’re done!
Keep in mind that while AWS S3 is a great way to create a static website, it’s just that — a static website. That means that dynamic content isn’t really going to be possible unless you spin up an EC2 (or some other compute resource) instance and make requests to that. At that point though, it would be easier to use that EC2 instance to serve the content as well.
Looking to get deeper into AWS? Check out these books:
If you use VS Code for your editor of choice, check out this compilation of The Best Extensions for Full Stack Developers.
What is a static website?
A static website is a website that displays the same thing to every user who comes across your website. Each web page contains fixed content regardless of who stumbles upon them. This doesn’t mean that it doesn’t update per se, but it means that it doesn’t change depending on who is viewing the website. Simple web games can be static pages. Facebook is not a static website. Looking to create a static website with React? Check out my article on what Next.js is! It’ll help you create your app and then export it as a static site along with so much more.
Create an Account
The first step to creating your website is to create an AWS account. If you already have an account, you can skip this part and go right to “Create an S3 Bucket.”
Alright, let’s go create an account. The first thing you’re going to do is go to https://aws.amazon.com/ and click the “Create an AWS Account” button in the top right.
Then enter the information requested over the next few pages such as contact and billing information. Don’t worry, it’ll ask for your credit card but AWS S3 is included in AWS’s free tier so you won’t have to pay. Once you have your account setup, you can move on to the next step!
Create an S3 Bucket for your Website
At the AWS Management Console, search for the S3 service or click here to go directly to the S3 console page. Once there, create a new bucket by clicking the “Create bucket” button. A setup menu should pop up. In this menu, enter a unique DNS-compliant name for your bucket (if you have a url you are going to use, enter that here with whatever top level domain you want to use), select your region, then click next.
On the “Configure options” menu, check the “Versioning” box so that when you upload new versions of a page, they are versions of the previous one instead of new objects. You can also add any tags here as well. Once finished, click next.
In the next menu, “Set permissions,” you need to uncheck “Block all public access.” And then you need to check “Block public access to buckets and objects granted through new access control lists (ACLs)” and “Block public access to buckets and objects granted through any access control lists (ACLs).” These will keep your bucket protected but accessible.
Finally, click next to review your settings. Then click next once more to go to the final review section. Once finished, click “Create bucket” to create your S3 bucket.
Properties & Permissions
Once your S3 bucket is created, you need to set the permissions so that your website is accessible by the public. To do this, go into your bucket and click the “Properties” tab.
In “Properties” click on “Static website hosting”
Here, make sure “Use this bucket to host a website” is selected. Enter the name of your index and error documents (you need both, but these can be simple HTML documents with one word). At the top of the box should be an endpoint URL, this is where you will access your website (unless you register a domain). Copy the URL somewhere and hit save.
Go back to the bucket overview and upload your index, error, and any other files to the bucket here if you haven’t already.
Create a bucket policy
The last thing you need to do before you can access your new site is to let the public retrieve objects from your S3 bucket. To do this, go to the “Permissions” tab of your bucket and then click “Bucket Policy.” Once there, you should see an Amazon Resource Name (ARN) at the top of the editor and a “Policy generator” link below it. Copy the ARN and then click the link to go create a policy.
In the policy generator, select “S3 Bucket Policy” for the Policy Type. For the statement options, set the following as so:
|Allow||*||Amazon S3||GetObject||<Your ARN>/*|
Once all those are entered, hit “Add Statement” to add those options to the statement we are creating. Once you look over the statement to ensure you entered everything correctly, click “Generate Policy.”
This will bring up a JSON document that you need to copy and paste into your bucket policy from earlier.
Copy this document to your bucket’s permissions bucket policy section like this:
Before you hit save on this, in the “Resource” option, make sure that “/*” is at the end of your ARN. If you do not have this, you will likely get an error saying that the policy does not affect any resources or something similar when you hit save.
Finally, hit save and now you can go to the endpoint you copied earlier and see your website in action!
Register and Route your Website Domain Name with AWS Route53 (optional)
If you want to use a domain name to access your new website, then this can be achieved with whatever domain name service you use. The easiest way, however, is with AWS Route53 as they provide easy aliases that you can make for your bucket.
Register a Domain Name
I have a domain
If you registered your domain name with Route53 then you can continue to the next step, “Create a Record Set,” otherwise we need to register our domain with Route53 first to use it.
If you purchased a domain from another registrar other than Amazon then you can still use this domain. You will need to edit the nameservers later however to match the nameservers of Route53. If this is your case, skip the “I Have a Domain Already” section and follow along from there. The process is similar but different enough to warrant its own section.
Purchase a domain
Here, look for a domain name that you want to purchase with the “Register domain” section
Once you have a domain that is open for purchase, add it to your cart. Prices of domains typically range from $12-40 but can be way more depending on several factors. Once you pick your domain and add it to your cart, hit continue. Fill out your “Registrant Contact” information and then click continue. Finally verify everything and complete the purchase.
Once you purchase the domain, it might take a little bit of time for Amazon to setup. While you’re waiting, you can grab a cup of coffee and read about microservices or a vs code setup for full stack developers.
See your domain
Once your domain has been fully registered, you should be able to go to the “Registered domains” section on the left to see your registered domains
Click the domain you just registered to pull up the registrant information. Here you should see a button at the top that says “Manage DNS,” click it to be brought to your hosted zones.
Checking your Hosted Zone
Route53 typically creates a hosted zone for you when you purchase a domain from them. If you do not have one setup already for some reason then you’ll need to create one.
Do this by clicking “Create Hosted Zone” and create it with the domain name you just registered. The type should be “Public Hosted Zone” When you create one, you will need to reset your name servers in the record set or in the registrant info (I’ve found more success with the latter) to match.
Before you continue, make sure your S3 bucket has the same name as your domain and top level domain. Once your hosted zone is ready to go, if it wasn’t setup already, continue on to the “Create a Record Set” section.
I Have a Domain Already
If you have already purchased a domain with another registrar then the process of using Route53 is super simple. Head to Route53 via the AWS Management Console or click here to be taken to the Route53 Console page. Once there, you’ll want to click “Hosted zones” on the left size to be taken to your hosted zones.
Create a Hosted Zone
Once in Hosted zones, you’ll want to create a hosted zone by clicking the “Create Hosted Zone” button in the top left. Create the hosted zone using the domain you own. Do not include any top level domains such as “www.” The type of your hosted zone should be set to “Public Hosted Zone.” Click save and your hosted zone should be created.
Update your nameservers
In the hosted zone, you’ll have two records automatically made — an NS and SOA. The NS record is the name server record. You’ll want to go to your registrar and update the name servers with these four servers. If the domain was already setup in a different DNS service then it may take up to 48 hours for the new routing to take effect.
Create a Record Set
Once your hosted zone is created, the next step is to create a record for your domain to point at your bucket. To do this, we are going to create an alias record.
In your hosted zone, click the “Create Record Set” button. This will bring up the record set creation menu on the right side. Keep the name blank and the type as “A – IPv4 address.” Next, change “Alias” to “Yes.” Then select the bucket you created as the “Alias Target.”
Once you have your bucket selected, keep the “Routing Policy” set to Simple and “Evaluate Target Health” as no. Click “Save Record Set” and wait. It will take some time before Route53 propagates the domain and alias downstream.
I don’t see my bucket!
If you don’t see your S3 bucket as an option there are a few possible issues:
- Your bucket is not actually public
- Make sure the permissions and policy you set match the above outlined walk through. If your bucket is public, it will have “Public” in orange highlighted under the “Permissions” tab in your bucket.
- Your bucket does not have the same name/tld as your domain
- If your bucket does not have the same name as the domain you registered then you will need to recreate the bucket with the correct name. This means that if you want to use blog.yourdomain.com then your bucket should also be called blog.yourdomain.com. Same goes for www as well.
- You changed one of the above and have not refreshed the page
- This one happened to me, I didn’t set my bucket’s name correctly. I changed it in another tab and afterwards I needed to refresh the entire page before it would show up.
Once you wait a little bit, go to your domain and you should see whatever you set as your index.html!