Guided Lab: Automating Amazon S3 Static Website Hosting with GitHub Actions

Tutorials-Dojo

Description

Amazon S3 (Simple Storage Service) is a highly scalable, reliable, and low-latency cloud storage solution provided by AWS. While S3 is typically used for storing data and media, it also offers a Static Website Hosting feature ideal for hosting static HTML, CSS, and JavaScript files. This means you can serve a website directly from an S3 bucket, enabling cost-effective and efficient website hosting without a traditional web server. With the static website hosting capability of S3, you can quickly deploy a website and make it accessible worldwide.

GitHub Actions is a workflow automation tool that integrates seamlessly with GitHub repositories. It allows you to define workflows triggered by various events, such as pushes to branches or pull requests. These workflows can automate tasks like testing code, building projects, and deploying updates.

In this lab, we’ll leverage GitHub Actions to automate the deployment of our static website. Whenever we push an update to our GitHub repository, GitHub Actions automatically uploads the new content to our S3 bucket, keeping the website up-to-date without manual intervention.

Prerequisites

This lab assumes you have a basic understanding and knowledge of:

Amazon S3 service
IAM Access Keys.
Git commands.
Using any code editor like VS Code, Atom, or Sublime Text to edit the HTML and configuration files.

If you find any gaps in your knowledge, consider taking the following lab:

Objectives

By the end of this lab, you will:

Set up a simple static website with a Philippine theme.
Create and configure an S3 bucket for hosting.
Initialize Git locally and create a GitHub repository.
Use GitHub Actions to automate updates to your website on S3 after each commit.

Subscribe to access AWS PlayCloud Labs

Lab Steps

Create a Static Website

1. Create a Folder for Your Website:

On your local machine’s desktop, create a new folder called philippines-website.

2. Create the HTML File:

Open your code editor and create a new file inside the philippines-website folder named index.html.
Paste the following HTML code into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discover the Philippines</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        h1 {
            color: #0073bb;
        }
        p {
            line-height: 1.6;
        }
        .highlight {
            color: #e67e22;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to the Philippines</h1>
    <p>The Philippines is an archipelago comprising more than 7,000 islands, known for its rich biodiversity, vibrant culture, and stunning landscapes.</p>
    <p><span class="highlight">Manila</span> is the capital city, while <span class="highlight">Cebu</span> and <span class="highlight">Davao</span> are major urban centers.</p>
    <p>The country offers a wide range of tourist attractions, from pristine beaches to historical landmarks.</p>
</body>
</html>

3. Save and Close the file. This is the initial version of your website.

Set Up the S3 Bucket for Static Website Hosting

1. Navigate to S3.

2. Create a New Bucket:

Name your bucket uniquely (e.g., philippines-website).
Uncheck “Block all public access” (for now, as we’re setting it up as a public website).
- Then, check the “I acknowledge that the current settings might result in this bucket and the objects within becoming public.”

Click Create Bucket.

3. Set Permissions:

Go to the Permissions tab.
Under Bucket policy, add the following policy, replacing your-bucket-name with the actual name:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

4. Upload the HTML File:

Go to Objects and click Upload.
Upload index.html you created earlier.

5. Enable Static Website Hosting:

Go to the Properties tab of your bucket.
Scroll down to Static website hosting and click Edit.
Enable static website hosting, and set index.html as the Index document.

Save your changes.

You should be able to access the website via the Bucket website endpoint under Properties.

Create a GitHub Account and Repository

1. Sign Up for GitHub (if you don’t already have an account):

Visit GitHub and create a free account.

2. Create a New Repository:

Click New Repository on your GitHub home page.
Name it philippines-website and make it Public.
Click Create repository.

Initialize Git Locally and Commit the Website Files

1. Initialize Git:

Return to your code editor, open the terminal, navigate to your philippines-website folder, and run:

git init

2. Configure Git Username and Email:

To ensure your commits are associated with your GitHub account, set your Git username and email with the following commands (replace your-username and your-email@example.com with your actual GitHub username and email):

git config --global user.name "your-username"
git config --global user.email "your-email@example.com"

Alternatively, if you are using Visual Code Editor, you can install GitHub Pull Requests in the extensions. Then, Sign in.

- You will then be prompted with:

- Click on Sign in with your browser. Then, click on Authorize git-ecosystem.

- A “Succeeded” notification will appear, confirming authentication is complete. You may now proceed to the next steps.

3. Add Files to Git using the command:

git add index.html

4. Commit the File using the command:

git commit -m "Initial commit of the Philippines-themed website"

5. Connect Your Local Repository to GitHub:

Link the local repo to GitHub (replace your-username):

git remote add origin <https://github.com/your-username/philippines-website.git>

6. Push the Commit to GitHub:

git push -u origin master

Note: The command above may vary depending on whether your local branch is named main or master. In recent Git versions, main is the default branch name is the main one for new repositories, while older repositories or configurations may still use master. To check your current branch name, you can use the git branch.

7. Return to your GitHub Account, and you should see the newly uploaded HTML file.

Create an Access Key for GitHub Actions

1. Go to IAM in the AWS Console.

2. Go to Users > Click on your current User name > Security credentials > Create access key

3. Select Other as Use Case

4. Enter a Description tag value like Git-Access. Then, Click on Create access key.

5. Take note of the Access key or download the CSV file.

Add AWS Credentials to GitHub Secrets

1. In your GitHub repository, go to Settings > Secrets and variables > Actions.

2. Add these in the Repository secrets:

AWS_ACCESS_KEY_ID: Your IAM user’s Access Key ID.

AWS_SECRET_ACCESS_KEY: Your IAM user’s Secret Access Key.

AWS_BUCKET_NAME: The name of your S3 bucket (philippines-website).

AWS_REGION: The region where your bucket is hosted (e.g., us-east-1).

Result:

Create the GitHub Actions Workflow

1. In your GitHub repository, go to the Actions tab.

2. Click on set up a workflow yourself.

3. Add the following YAML code:

name: Deploy to S3
 
on:
  push:
    branches:
      - master
 
jobs:
  deploy:
    runs-on: ubuntu-latest
 
    steps:
    - name: Checkout code
      uses: actions/checkout@v2
 
    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ${{ secrets.AWS_REGION }}
 
    - name: Sync files to S3
      run: |
        aws s3 sync . s3://${{ secrets.AWS_BUCKET_NAME }} --delete

Explanation:

on: push: Triggers this workflow every time you push to the master branch. You can change this according to the branch name you are using.
checkout code: Downloads your repository content.
configure AWS credentials: Uses the AWS GitHub Action to authenticate.
sync files to S3: Uploads files to the specified S3 bucket, replacing existing files.

4. Click on Commit changes… then Commit changes again when prompt appears.

Update index.html with New Content

1. Open index.html in your code editor.

2. Replace the existing content with the following updated HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discover the Philippines</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        h1 {
            color: #0073bb;
        }
        h2 {
            color: #e67e22;
            margin-top: 30px;
        }
        p {
            line-height: 1.6;
        }
        .highlight {
            color: #e67e22;
            font-weight: bold;
        }
        .cta {
            margin-top: 20px;
            padding: 10px;
            background-color: #0073bb;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Welcome to the Philippines</h1>
    <p>The Philippines is an archipelago comprising more than 7,000 islands, known for its rich biodiversity, vibrant culture, and stunning landscapes.</p>
    <p><span class="highlight">Manila</span> is the capital city, while <span class="highlight">Cebu</span> and <span class="highlight">Davao</span> are major urban centers.</p>
    <p>From pristine beaches like <span class="highlight">Boracay</span> and <span class="highlight">El Nido</span> to the lush, mountainous regions of <span class="highlight">Banaue</span> and <span class="highlight">Sagada</span>, the Philippines has something for every traveler.</p>

    <h2>Discover More About the Islands</h2>
    <p>Whether you are looking to relax by the beach, explore historical sites, or immerse yourself in Filipino culture, this country offers endless opportunities for adventure and exploration.</p>

    <a href="<https://www.tourism.gov.ph>" target="_blank" class="cta">Plan Your Trip Now</a>
</body>
</html>

3. Save the file.

4. Open a terminal in the philippines-website folder and run the following commands to stage, commit, and push the updated file to GitHub:

a. To update your local machine with the previous steps we did, run:

git pull

b. Add Files to Git:

git add index.html

c. Commit the File:

git commit -m "Enhanced content with new call-to-action and information about Philippine islands"

d. Push the file to the Repository

git push -u origin master

a. Click on the index.html in your repo:

b. Check your repository workflow runs:

6. Access the website via the Bucket website endpoint under Properties in your S3 Bucket.

Congratulations! You’ve successfully set up a fully automated deployment pipeline for a static website hosted on Amazon S3. By using GitHub Actions, you’ve eliminated the need for manual uploads, allowing for seamless updates each time you push changes to your repository. This workflow saves time and ensures that your website remains current with minimal effort. With these skills, you can confidently manage automated deployments, making GitHub Actions and Amazon S3 valuable tools in your web development toolkit.

As a best practice, remember to delete any resources no longer in use, such as the S3 Bucket, to maintain a clutter-free AWS environment.

Thank you for joining this lab, and happy learning!