Today I am going to walk you step by step on how to build a simple static website using Amazon S3. Sometimes all you need is a little HTML and CSS for a successful website. In fact, it can often be faster to develop a website without an entire web framework.
February 13, 2019
Today I am going to walk you step by step on how to build a simple static website using [Amazon S3](https://aws.amazon.com/s3/). Sometimes all you need is a little HTML and CSS for a successful website. In fact, it can often be faster to develop a website without an entire web framework.
## What is a static site?
A static site is a website that is a collection of HTML and other assets that does not get served from a web framework. A static site is in no way non-interactive though.
**Examples of cool web applications that are static:**
HTML and CSS are all you need to get started with a simple static site.
Static sites do not need to be served by a web server. You don't need the infrastructure that is otherwise required to host a web framework. Developing a website without an entire web framework can be more efficient.
You also benefit from a separation of concerns, your front end is just that, no templating languages or calling methods on your models in your view. You get to just deal with the frontend without worrying about the backend.
## The steps for building your first static site:
1. Build a tiny bit of HTML 2. Upload the HTML to an AWS S3 Bucket 3. Make the Bucket accessible and public 4. Add some JS and CSS to make your "static" site shine!
## Getting started with your HTML file
The easiest way to do it, is to create an HTML file. Traditionally this is called index.html but the naming doesn’t matter too much. You can point the web server to serve whatever HTML file you want.
Now you have some basic HTML and you need to serve that somewhere. One of the easiest options is to simply upload the HTML file to an S3 bucket on AWS.
## Create a new bucket on AWS
First, head to the S3 console on AWS. You need to add a new bucket.
For this example, I just created a public bucket named "testheadway." Don’t worry about the settings yet. Just click through to get the bucket created.
## Edit the bucket for hosting abilities
Next you need to turn on the ability for the bucket to host a static website. Click on the bucket to edit it.
Once we’re in the edit view for the bucket, head to the "Properties" tab for the bucket.
Then click into the Static website hosting card.
Now select "Use this bucket to host a website" and add the name of your index document this is almost always going to be your index.html it should match the name of the document you created earlier.
Easy peasy if you ask me!
Now, once this is turned on you should see an endpoint for your S3 bucket. This is the URL used to access your newly created static website.
## Edit the bucket permissions
You need to adjust a few more settings to have public access to this S3 bucket. The bucket permissions need to allow everyone to getObject's from your bucket. As basic policy could look like the below. Just make sure to update the "Resource" to be the name of your S3 bucket.
Note: This is not secure nor recommended for production ready static sites. Seek an AWS security expert for recommended bucket permissions.
Copy and paste the below in the Bucket Policy by heading to Permissions.
The next step is to click into the Bucket Policy.
Now, you need to save the getObject policy. AWS will warn you that you are giving public access to your objects in your bucket. This policy only allows people to access objects in your bucket, which is what you want since people are going to be accessing your index.html.
If you head to that URL now you can see that you get a giant 404.
**This is expected, you haven’t uploaded your index.html file yet.**
## Upload the index.html
The next step is to upload your index.html.
At this point, if you head back to the bucket URL you should see your HTML rendered in the browser.
Congratulations, you’ve got a basic website being hosted from AWS!
Here are some ways you can extend the site easily with some CSS and JS.
In the same way that it was pretty easy to serve straight up HTML, it’s just as easy to add some CSS to your application.
Stick a new file into your directory called styles.css. Like other static site generators you can add some basic styling to your HTML just by referencing the CSS in your HTML.
Now you just need to delete the index.html file from the S3 bucket and upload these two files and you should have a minimally styled website up and running.
**It should look something like:**
## Using jQuery to add new elements
**You only have three files. Pretty easy and simple, but very powerful.**
**Checkout the final product here, it’s not so static after all 😉:**
[See the "testheadway" website](http://testheadway.s3-website-us-west-2.amazonaws.com/)
This same process stands with a single page application (SPA) with React. If you want to host your SPA on S3 all you would need to do is build your React app and then add all the static assets (HTML, JS, CSS files) to your S3 bucket.
If you built your SPA from a `create-react-app` application there is already a build command to build your app.
**You need to run:**
`npm run build`
This should build your static assets and compile them into the build directory for your application.
Instead of uploading a single HTML file, you'll upload the contents of the build directory to the S3 bucket.
Now your React app will mount when it finds your index.html.
## The advantages of building a static site vs a dynamic site
There are many ways to build web applications in todays day in age, and one of them is to host a static site and let it interact with your backend.
Overall this is a quick overview of how you can build a sample application completely from a static website that is easily and cheaply host on Amazon S3.
Let me know if you have any questions about static sites or if we can help you build a SPA, a static site, or help you deploy your static site to Amazon S3, we’re happy to help.
## Recommended resources for building static sites