Deploying a Static Website on AWS S3 with AWS CodePipeline

Published:7 August 2023 - 8 min. read

Goodness Chris-Ugari Image

Goodness Chris-Ugari

Read more tutorials by Goodness Chris-Ugari!

Azure Cloud Labs: these FREE, on‑demand Azure Cloud Labs will get you into a real‑world environment and account, walking you through step‑by‑step how to best protect, secure, and recover Azure data.

Manually managing and deploying static websites can be a hassle. But what if there is a solution that lets you quickly update and deploy your static websites? Say hello to AWS CodePipeline!

As a fully-managed continuous delivery (CI/CD) service, AWS CodePipeline helps you automate deployments for quick and reliable application and infrastructure updates.

In this tutorial, you will learn about AWS CodePipeline and deploy a static website to an AWS S3 bucket.

Stay tuned and automate deployments to your production environment!

Prerequisites

Ensure you have the following in place to follow along, as this tutorial comprises hands-on demonstrations:

  • An AWS account – A free tier will suffice.
  • Static website files (HTML, CSS, JavaScript, and so on) to deploy – This tutorial uses a sample static website from AWS.
  • An IAM user with AWSCodeCommitPowerUser policy attached – This tutorial uses an IAM user called codecommit-user.
  • Git is installed on your local computer.

Setting up an AWS CodeCommit Repository

Before taking advantage of the AWS CodePipeline for deploying a static website, you need a place to store your static website files. In this case, you will create an AWS CodeCommit repository, a fully-managed source control service.

With AWS CodeCommit, you can securely store source code and binaries and host secure Git-based repositories. Moreover, AWS CodeCommit works seamlessly with your existing Git tools.

To create a CodeCommit repository, follow these steps:

1. Open your favorite web browser, and log in to your AWS Management Console.

2. Next, search for and select CodeCommit from the search results to access the CodeCommit dashboard (step three).

aws codepipeline - Accessing the CodeCommit dashboard
Accessing the CodeCommit dashboard

3. On the CodeCommit dashboard, click Create repository to initiate creating a new AWS CodeCommit repository.

Initiating creating a new AWS CodeCommit repository
Initiating creating a new AWS CodeCommit repository

4. Now, provide a Repository name (i.e., static-website), leave the rest as default, and click Create (bottom-right) to create your new AWS CodeCommit repository.

Creating the new CodeCommit repository
Creating the new CodeCommit repository

Once created, your browser redirects to the repository page, as shown below, with a success message at the top.

Verifying the successful repository creation
Verifying the successful repository creation

Generating HTTPS Git Credentials for AWS CodeCommit

With the repository created, you must ensure you can access it and add your project files. One way to do so is by creating Git credentials for your IAM user. You will use these credentials when interacting with CodeCommit repositories using HTTPS URLs.

To generate Git credentials for your IAM user:

1. Search for and choose IAM in your AWS Management Console to access the IAM dashboard.

Accessing the IAM dashboard
Accessing the IAM dashboard

2. On the IAM dashboard, navigate to Users to access the Users page, and click on your IAM user (i.e., codecommit-user) to access the user’s details page.

Accessing the IAM user’s details page
Accessing the IAM user’s details page

3. Next, click on the Security credentials tab on the user’s details page to view options for generating the Git credentials for the user.

Accessing the Security credentials tab
Accessing the Security credentials tab

4. Now, scroll down to the HTTPS Git credentials for AWS CodeCommit section, and click on Generate credentials to generate HTTPS Git credentials for your IAM user.

Generating HTTPs Git credentials
Generating HTTPs Git credentials

5. Lastly, copy the generated credentials or click Download credentials to download the credentials for later use.

Copying the generated Git credentials
Copying the generated Git credentials

Cloning the AWS CodeCommit Repository

Now you have HTTPS Git credentials, ensure you can add files and make commits. How? You must clone your repository on your local computer to provide you with the initialized repository.

To clone your AWS CodeCommit repository:

1. Navigate to your repository details page, click the Clone URL dropdown (top-right), and choose Clone HTTPS. This action lets you copy the HTTPS URL to clone your repository.

Copying the HTTPS URL for cloning your repository
Copying the HTTPS URL for cloning your repository

If successful, you will see a notification at the top of the page, as shown below.

Confirming successfully copied HTTPS URL
Confirming successfully copied HTTPS URL

2. Next, open a terminal, and run the git clone command below to clone your repository from the repository URL (repo_URL) you copied in step one.

git clone <repo_URL>

When prompted, input your IAM user’s credentials and click OK to authenticate cloning your repository.

Cloning the AWS CodeCommit repository
Cloning the AWS CodeCommit repository

Once authenticated, the empty repository will be cloned to your local computer.

Verifying successful repository cloning
Verifying successful repository cloning

3. Copy or move your static website files to the cloned repository’s directory on your local computer.

If you use the sample website files provided in this tutorial, your file structure should appear as in the image below.

Overviewing the repository’s file structure
Overviewing the repository’s file structure

4. Now, navigate to your repository’s directory in your terminal, and run the below git status command to check the current state of your repository.

git status

As shown below, you will see your static website files are listed as untracked files.

Checking the repository’s current state
Checking the repository’s current state

5. Execute each git command below to add, commit, and push your website files to your AWS CodeCommit repository

# Stages all the changes in the working directory
git add .

# Create a commit with the changes that were staged.
git commit -m "Added website files"

# Push the local commits to the remote repository
git push
Pushing the website files to the AWS CodeCommit repository
Pushing the website files to the AWS CodeCommit repository

If successful, you will see your website files added to your repository, as shown below on your AWS CodeCommit repository page.

Verifying the static website pushed to the CodeCommit repository
Verifying the static website pushed to the CodeCommit repository

Creating an AWS S3 Bucket to Use as a Static Website

With your AWS CodeCommit repository containing your website files, you need a place to deploy your website. In this case, you will create an AWS S3 bucket to use as a static website.

To create an AWS S3 bucket for your website deployment:

1. Search for and choose S3 in your AWS Management Console to access the S3 dashboard.

Accessing the S3 dashboard
Accessing the S3 dashboard

2. Next, click your newly-created S3 bucket (static-website-buckett) on the Buckets page.

Accessing the S3 bucket details page
Accessing the S3 bucket details page

3. Navigate to the Properties tab to view the bucket’s properties.

Accessing the bucket properties
Accessing the bucket properties

4. Now, scroll down to the Static website hosting section and click Edit.

Editing the static website hosting
Editing the static website hosting

5. Configure the static website hosting as follows:

  • Static website hosting – Choose the Enable option to enable static website hosting for the bucket since you will use it as a static website.
  • Index document – Specify your website’s default or home page (i.e., index.html).
Enabling static website hosting and specifying the website home page
Enabling static website hosting and specifying the website home page

6. Leave the rest as default and click Save changes.

Saving the bucket configuration changes
Saving the bucket configuration changes

7. Next, navigate to the Permissions tab since you must add a bucket policy to control access to your bucket and its objects (files).

Accessing the bucket’s permissions
Accessing the bucket’s permissions

8. Scroll down to the Bucket policy section and click Edit to edit the bucket policy.

Editing the bucket policy
Editing the bucket policy

9. Ultimately, populate the following policy in the policy editor, replacing <bucket_name> with your s3 bucket name.

This policy allows public read access to all objects (files) in your S3 bucket so that users can access your static website’s content online.

💡 Note that making objects publicly accessible may not be desired for sensitive data.

{
	"Version":"2012-10-17",
	"Statement":[
		 {
		   "Sid": "PublicReadGetObject",
		   "Effect": "Allow",
		   "Principal": "*",
		   "Action": ["s3:GetObject"],
		   "Resource": ["arn:aws:s3:::<bucket_name>>/*"]
		 }
	]
}
Adding a bucket policy
Adding a bucket policy

If there are no errors, you will see a success message, as shown below, which indicates the bucket policy has been updated successfully.

Verifying the bucket policy was updated successfully
Verifying the bucket policy was updated successfully

Setting up an AWS CodePipeline

Just because you now have a “static” website does not mean you will leave it as is. Websites are ever-changing to cater to trends and best user experience. So take advantage of a pipeline that lets you define the workflow of your release process.

AWS CodePipeline is highly configurable and lets you describe how a new code change progresses through your release process.

To set up your AWS CodePipeline, follow the steps below:

1. Search for codepipeline and choose CodePipeline ins the search results to access the AWS CodePipeline dashboard.

Accessing the CodePipeline dashboard
Accessing the CodePipeline dashboard

2. Next, click Create pipeline (upper-right) to initiate creating a new pipeline.

Initiating creating a new pipeline
Initiating creating a new pipeline

3. Configure the pipeline settings with the following:

  • Pipeline name – Provide a unique name for your pipeline (i.e., static-website-pipeline).
  • Service role – Choose the New service role option if you wish to create a new service role to use with the pipeline. Otherwise, choose Existing service role if you already have an existing service role.

Once configured, click Next to confirm the settings and continue.

Configuring the pipeline settings
Configuring the pipeline settings

4. Now, select the following for the source settings:

  • Source provider – Choose AWS CodeCommit as the source provider.
  • Repository name – Search and select your AWS CodeCommit repository (i.e., statice-website).
  • Branch name – Search and select your branch (i.e., master) containing the website files to deploy.

Leave the rest as default, and click Next.

Configuring the source stage
Configuring the source stage

5. Click on Skip build stage since the website for this demonstration does not require compilation or build steps.

Skipping the build stage
Skipping the build stage

When prompted, click Skip to confirm skipping the build stage.

Confirming skipping the build stage
Confirming skipping the build stage

6. Next, configure the deploy stage as follows:

  • Deploy provider – Choose Amazon S3 as the deploy provider since you use an S3 bucket for your static website.
  • Region – Select a region closest to your location.
  • Bucket – Choose your S3 bucket (static-website-buckett) for hosting your website as the destination.
  • Extract file before deploy – Tick this checkbox to ensure the deployment artifact unzips before deployment.

Once configured, leave the rest as default, and click Next to continue.

Configuring the deployment stage
Configuring the deployment stage

7. Lastly, review the pipeline information, and click Create pipeline to finalize creating your pipeline.

Creating the new pipeline
Creating the new pipeline

You will see a success notification of the pipeline creation in your pipeline’s details page, as shown below.

With all the stages set up, CodePipeline automatically starts the deployment process. CodePipeline takes the changes from the CodeCommit repository and deploys them to the S3 bucket configured for website hosting.

Confirming the successful pipeline creation
Confirming the successful pipeline creation

Testing the Static Website Deployment

With all the configuration completed, the last step is ensuring your deployment works. How? You must first retrieve your S3 bucket’s endpoint to view your static website deployment.

To test your static website deployment:

1. Scroll down to the Deploy step on your pipeline’s details page, and click Amazon S3.

Your browser redirects to your S3 bucket indicated in the deploy stage, which contains your website files.

Accessing the S3 bucket defined in the deploy stage
Accessing the S3 bucket defined in the deploy stage

2. On the bucket page, click on the Properties tab to view the bucket properties.

Accessing the bucket properties
Accessing the bucket properties

3. Finally, scroll down to the Static website hosting section and navigate to the URL below to test your deployment.

Accessing the S3 bucket website endpoint
Accessing the S3 bucket website endpoint

If everything is set up correctly, you will see your static website live and accessible online.

Viewing the website’s content on a web browser
Viewing the website’s content on a web browser

4. Modify the index.html file on your local computer not to include the “Hello World!” string.

5. Now, add, commit, and push the change to your AWS CodeCommit repository.

You should see your commit message on your pipeline’s page and that the pipelines ran after you pushed the changes.

Viewing successful deployment via pipeline execution
Viewing successful deployment via pipeline execution

6. Ultimately, refresh the page, and you will see the changes reflect automatically, as shown below.

Viewing the changes automatically reflect
Viewing the changes automatically reflect

Conclusion

Deploying a static website on AWS S3 with AWS CodePipeline provides a seamless and automated way to manage your website’s deployment process. And in this tutorial, you learned that with this setup, you can focus on developing your website and pushing new updates. Let AWS take care of the deployment and hosting aspects.

With this knowledge, why not use CodePipeline with CloudFormation? Start automating the creation and updating of your static website’s entire infrastructure!

Hate ads? Want to support the writer? Get many of our tutorials packaged as an ATA Guidebook.

Explore ATA Guidebooks

Looks like you're offline!