DEV Community

Cover image for Building a CI/CD Pipeline for a Simple Static Website on AWS
mark_kiguli
mark_kiguli

Posted on

Building a CI/CD Pipeline for a Simple Static Website on AWS

Introduction:
In this guide, we'll walk through the process of setting up a Continuous Integration/Continuous Deployment (CI/CD) pipeline for a simple static Hugo website on Amazon Web Services (AWS). We'll explore what a CI/CD pipeline is, discuss examples, and highlight the significance of using AWS services, GitHub Actions, and Jenkins for building and deploying web content. Our emphasis will be on creating a CI/CD pipeline with AWS CodeBuild and an S3 bucket for hosting the website.

What is a CI/CD Pipeline?
A CI/CD pipeline is a set of automated processes and tools that allow developers to continuously build, test, and deploy their code. It ensures that code changes are automatically integrated, tested, and delivered to a production environment, reducing manual tasks and accelerating software delivery.

Examples of CI/CD Tools:

  1. GitHub Actions: A native CI/CD tool integrated with GitHub repositories, enabling automated workflows and deployments.
  2. Jenkins: An open-source automation server that provides hundreds of plugins to support building, deploying, and automating any project.

Setting Up an S3 Bucket:

  1. Create an S3 bucket in your chosen AWS region.
  2. Make the contents of the bucket publicly accessible.
  3. Add a bucket policy to control access and permissions.

Enabling Static Web Hosting:
Enable static web hosting on the S3 bucket to allow hosting a static website directly from the bucket. This feature simplifies website deployment and provides a public URL.

Importance of CI/CD for Web Development:
A CI/CD pipeline offers several benefits, including:

  • Faster development cycles
  • Automated testing and validation
  • Consistent and reliable deployments
  • Improved collaboration among development teams

Setting Up AWS CodeBuild Environment:

  1. Create an AWS CodeBuild project in the same AWS region as your S3 bucket. Configure the build environment based on your project's requirements.
  2. Pay close attention to setting up webhooks that trigger automated testing, formatting, and deployment based on code changes in your repository.

The Buildspec.yml File:
The buildspec.yml is crucial as it defines the build script that sets up your server and automates the testing of your code before deployment to the S3 bucket. It's the heart of your CI/CD pipeline.

Here's the buildspec.yml for your website:

version: 0.2

phases:
  install:
    runtime-version:
      python: 3.11

  pre_build:
    commands:
      - echo "Building website"

  build:
    commands:
      - echo "Post-building website"
      - aws s3 sync build/ s3://YOUR_BUCKET_NAME --region BUCKET_REGION --delete
    finally:
      - echo "Build done successfully"

Enter fullscreen mode Exit fullscreen mode

In our buildspec.yml, we set the runtime environment to python 3.11, basically this was because we would run aws client on it, not necessarily so but it would reduce the complexity as we are just deploying a simple static website.
We then synced our build contents to our s3 bucket.
Notice we added a --delete flag, this is to ensure the bucket is empty before anything is added there.

By following these steps and understanding the importance of CI/CD, you can automate the deployment of your website, ensuring a seamless and efficient development process.

Top comments (0)