Automate Your Workflow: Setting Up a Continuous Deployment Pipeline for Your Static Website with AWS

Static websites, lightweight and efficient, are a popular choice for personal portfolios, landing pages, or even simple applications. However, manually deploying updates can be tedious and error-prone. AWS CodePipeline offers a solution: a continuous deployment pipeline that automates the process, ensuring your website reflects the latest code with every push to your version control system. This article guides you through creating an S3 bucket to host your static website and configuring CodePipeline to automatically deploy changes from a GitHub repository.

1. Creating an S3 Bucket: Your Website's Home

• Log in to the AWS Management Console and navigate to the S3 service. Click "Create bucket."
• Choose a unique and memorable name for your bucket. This will be part of your website's URL later.
• For "Region," select the closest AWS region to your target audience for optimal performance.
• Leave the remaining settings at their defaults and click "Create."

Enabling Static Website Hosting:

• Once the bucket is created, select it from the list.
• Navigate to the "Properties" tab and scroll down to "Static website hosting."
• Click "Edit" and choose "Host a static website" under "Hosting type."
• Specify "index.html" as the "Index document" (the default file loaded when someone visits your website).
• Click "Save changes."

Securing Your Bucket (Optional):

By default, your bucket is private. If you want your website to be publicly accessible, navigate to the "Permissions" tab and click "Edit bucket policy." Paste the following policy, replacing <your-bucket-name> with your actual bucket name, and click "Save changes."

JSON

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

 

2. Building the Pipeline: Automating Deployment with CodePipeline

• Navigate to the AWS CodePipeline service and click "Create pipeline."
• Provide a descriptive name for your pipeline (e.g., "static-website-deploy").
• Choose "New service role" to allow CodePipeline to create a role with necessary permissions.
• Click "Next" to proceed to the source stage configuration.

Connecting CodePipeline to GitHub:

• In the "Source provider" section, select "GitHub (Version 2)."
• Click "Connect to GitHub" and follow the on-screen instructions to grant CodePipeline access to your GitHub account.
• Select the repository containing your website's code and the branch you want to deploy from (usually "main" or "master").
• Click "Next" to skip the build stage (not required for static websites).

Deploying to S3:

• In the "Deploy" stage configuration, select "Amazon S3" as the deployment provider.
• Choose the S3 bucket you created earlier and ensure "Extract file before deploy" is selected. CodePipeline compresses files during transfer, and this option ensures proper deployment.
• Leave the remaining settings at their defaults and click "Next."

Review and Launch:

• The final step provides a summary of your pipeline configuration. Review the details and click "Create pipeline" to initiate the pipeline creation process.

3. Pushing Code and Witnessing Automation

With the pipeline set up, any push to your specified GitHub branch will trigger CodePipeline. The pipeline will automatically retrieve the latest code, deploy it to your S3 bucket, and within minutes, your website will reflect the updated content.

To access your website:

Navigate to your S3 bucket in the AWS Management Console. Click on the name of your website's index document (usually "index.html"). The S3 console will display a public URL that you can use to access your website on the internet.

This configuration provides a basic continuous deployment pipeline for your static website. CodePipeline offers further customization options, such as integrating approval stages or deploying to different environments. As your website and development workflow evolve, you can explore these options to further refine your deployment process.