When following YouTube tutorials a lot of them will teach you to deploy resources through the console. Whilst this is a great way of learning it isn't what you will be doing in your day to day job as most project work will be done through code using an IaC tool like Terraform. In this post, I'll be showing you how to deploy a static website hosted in S3 using Terraform.

Something really useful I've learned from training: If you want to automate something, make sure you know how to do it manually.

As we deploy the changes with Terraform I would really recommend doing the steps manually to understand how everything works then replicate it with code.

Generating Code for the Website

Because we're really efficient developers (:D), I used ChatGPT to generate some HTML for an index.html and error.html page but feel free to write your own. I asked for a cool static website and this is what I got.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Cool Website</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            text-align: center;
        }

        h1 {
            color: #333;
        }

        p {
            color: #666;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4285f4;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #3367d6;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Welcome to Your Cool Website!</h1>
        <p>This is a simple and stylish static website.</p>
        <a href="#" class="btn">Learn More</a>
    </div>
</body>

</html>

Configuring the S3 Bucket

Now it's time to create our bucket to host the website.

I had some issues with the bucket ACL so make sure you're aware of what permissions you need by going through the steps manually and checking the official terraform documentation. The bucket should be set to public-read to allow the website to be publicly accessible.

Once the bucket is created, configure the static website hosting and upload the index.html and error.html files.

resource "aws_s3_bucket_website_configuration" "website-hosting" {
  bucket = aws_s3_bucket.example-bucket.id

  index_document {
    suffix = "index.html"
  }

  error_document {
    key = "error.html"
  }

  depends_on = [aws_s3_bucket_acl.example-bucket-acl]
}

resource "aws_s3_object" "index" {
  bucket       = aws_s3_bucket.example-bucket.id
  key          = "index.html"
  source       = "index.html"
  acl          = "public-read"
  content_type = "text/html"
}


resource "aws_s3_object" "error" {
  bucket       = aws_s3_bucket.example-bucket.id
  key          = "error.html"
  source       = "error.html"
  acl          = "public-read"
  content_type = "text/html"
}

Then navigate to the bucket website endpoint under the Properties tab of your S3 bucket and you should be able to access the cool static website you created.

You've now successfully deployed infrastructure as code! It can be a bit tricky sometimes especially with creating the roles and dealing with permissions but IaC tools are great for large scale projects that have a lot of infrastructure as it'll save you from having to make changes manually.

Hope you enjoyed and remember to keep practicing!

Deploying a Static Website using AWS S3 and Terraform

Table of contents

Generating Code for the Website

Configuring the S3 Bucket