Outline
In case you're not yet 100% clear on what static websites are, let's take a few moments to talk about how they work and what makes them useful. First off, when we say "static" we mean that your site is made up of nothing more than a file system. HTML, image, video, or PDF files can be requested and loaded in a user's browser, but they can't contain code for calling dynamic server-side resources like databases. So forget about building a WordPress site on file storage platforms like Amazon S3.
However, static sites can still provide some dynamic behaviour by offloading the processing to the client's browser - for video viewing, as an example - or to some third party service; to permit features like visitor analytics. There are also some clever ways to emulate much of the functionality and appearance of complex WordPress deployments while remaining safely in the scope of a static site. We'll talk a bit more about that later in the course.
The decision over how to create your HTML files is, of course, in your hands. You can certainly hand-craft files one at a time in a text editor and upload the whole thing manually. But there are also plenty of frameworks, templating tools, and dedicated static site generators to smooth the build process of particularly complicated environments.
My own Teach Yourself Data Analytics in 30 Days site is a pretty good example. Basically this is nothing more than ten plaintext Markdown-formatted files containing text, and some graphs rendered as PNGs. But when I imported those files into the static site framework Hugo, they were transformed into a stable and - reasonably - attractive site.
And, by the way, this site is one of many that I host on - you guessed it - Amazon S3. I don't just talk the talk, I walk the walk.
How do you choose from among the hundreds of tools that are out there? One helpful resource is this StaticSiteGenerators.net page that lets you filter through the forest of offerings by license, base language, age, and - perhaps most helpful - popularity. Although, to be honest, I'm not sure what those star ratings are actually based on. On this page, ranking by stars, the three top tools are Gatsby, Hugo, and Jekyll. I happen to use Hugo, but your choice will depend on your particular needs and previous experience.
Regardless, though, we'll mostly focus on working at getting your content - no matter how you created it - into a properly configured S3 bucket. We will, however, finish up the course with a quick introduction to working with Hugo. You'll learn to install a theme, preview a site while it's in development on your own machine, compile a finished site and, finally, to find your way around the Hugo file system. But all that's far off in the distant future.
For now, what will the software stack we'll be working with through the main sections of the course look like?
We'll begin with some HTML files. Since our site will only exist as an illustration of how to efficiently work with Amazon S3, there's no reason to make anything fancy. We'll create a bucket in S3 and configure it with all the permissions and configurations it'll need to serve our goals. To give our users fast, low-latency access to the site, we'll put it behind a CloudFront distribution. And to force all connections to use SSL/TLS encryption, we'll use a certificate from AWS Certificate Manager. Finally, we'll need a DNS domain our users can use to access the site. That we'll set up in AWS's Route 53.