AI: Batteries Included

Simple Storage Service (S3) | AWS Hub

What problems are we trying to solve?

Our website's repository exists and compiles locally, and we use GitHub to upload and track our changes online. However, our website isn't actually hosted online for users to access on the internet.

At this stage, our first goal is to get our website online -- and this means that we need to store the source code that makes up our project online -- which is where AWS' Simple Storage Service (S3) comes in.

S3 gives us the ability to store and access our website's production-ready code in one centralized place -- using a cloud-based infrastructure that serves our immediate needs for a static website, while giving us the option to add functionality directly through other AWS products in the future.

Why not use free options Google Drive and Google Sites?

The Google application suite can be a very simple and quick way of getting something up and hosted, but you'll quickly find just how limiting the platform is -- especially if you'd like to go beyond their handful of preset templates. Google Sites won't let you make code changes to your website in HTML/CSS/JavaScript, limiting your functionality.

Most importantly, user-generated data from a Google Site cannot be stored, accessed, and analyzed by third-party applications directly from your webpage -- there is no database integration that would allow for dynamic inputs from different users accessing our site.

On its own, we won't be able to use S3 alone to include these kinds of features for our website -- but it gives us the ability to quickly implement such functionalities through other AWS products in the future.

Why choose S3?

AWS' Simple Storage Service (S3) is our choice for object storage/retrieval because it fulfills our data needs:

  • it's centralized, storing our data as "objects" in organized folders called "buckets" in the same place based on our project
  • it's accessible, as we can store, retrieve, analyze, and hand off data within it with ease as long as we can access AWS on the internet
  • it's secure, working in conjunction with IAM protocols to ensure trusted administrators can view and handle potentially-sensitive data

In S3, costs are determined by how much data you've stored and how much data you transfer. After registering our domain with Route 53 (around $10-15), our static website will likely cost around $1 per month for upkeep.

Understanding S3

S3 is like a huge virtual warehouse that provides the containers you store your initial stuff in (like our repository), accepts and organizes new objects that come about over the course of your project, and liaisons with its "sibling" services (like Lambda, Cloudfront, and EC2) to fulfill specialized, data-based tasks.

Terminology: Buckets, Objects, and Keys

In S3, we'll use three basic terms to refer to the ways we store/reference data:

  1.    Object: a single document (file) containing data
  2.    Bucket: the top-level storage container that can contain several objects
  3.    Key: a string of text that describes where an object is located

What's the difference between a local repository and an S3 bucket?

In addition to our source files (the core structure and content of our website), our local repository contains additional files that we use as part of our development process -- such as our .git files that track our changes locally and help us manage versions in GitHub.

While useful to us, we don't want our users to be able access non-source files like .git -- it would expose our codebase to the public, bloat the size of our bucket unnecessarily, and affect our performance.

S3's structuring allows us to package our website's source files (src) efficiently -- we provide the static objects that make up our website and containing it in a secured bucket.

To sum it up:

  • A repository is what we use in our IDE as we make changes locally, containing our core source files along with other useful files for development like .git
  • a bucket is a prepared package that just contains our source files, such as our HTML documents, CSS style sheets, and icons/images

What kinds of objects will we include in our S3 bucket?

Early on, our objects will likely include:

  • CSS style sheets -- documents that define how we want the website to be structured, shaping the raw HTML (or other markup language) that just defines our content
  • Background images and/or logos -- if we want our users to see a picture of our team in the background of our "About" page, we'd include that as an object
  • JavaScript files - if we want to include components like dropdown lists, buttons, or other widgets
  • Documents/images for users -- things like PDFs, pictures, or other kinds of static files that we'd like our users to have access to direct from our website

To clarify, AWS/S3 is not generating new content when we upload our source files as objects into our website's bucket.

Instead, we're standardizing our data in terms/formats that the rest of AWS' products can read/access -- opening up opportunities in the future to add increased functionality to our website in the future.

Example of an S3 bucket structure

For a simple static website not yet using JavaScript components, our bucket structure might look like this:

your-website/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── style.css
├── images/
│   ├── logo.png
│   └── background.jpg
└── documents/
    └── resume.pdf

This structure is similar to what you'd see in your local project, but it's optimized for web hosting -- containing only the files that users need to see and interact with.

How do I set up an S3 bucket for static website hosting?

We'll cover the step-by-step process in our dedicated S3 hosting tutorial, but the basic steps include:

  1. Creating an S3 bucket with a unique name
  2. Uploading your website files to the bucket
  3. Configuring the bucket for static website hosting
  4. Setting up proper permissions for public access
  5. Optionally connecting a custom domain through Route 53

Ready to get started?

Once you've understood the basics of S3, you're ready to start hosting your first static website! Check out our Static Website Hosting Guide for a detailed walkthrough.