--- title: "Deploying a Static Website on AWS S3 with AWS CodePipeline" description: "Learn to leverage the power of AWS CodePipeline to deploy static websites with AWS S3 in this in-depth ATA Learning tutorial!" canonical: "https://adamtheautomator.com/aws-codepipeline/" --- # Deploying a Static Website on AWS S3 with AWS CodePipeline > Learn to leverage the power of AWS CodePipeline to deploy static websites with AWS S3 in this in-depth ATA Learning tutorial! Source: https://adamtheautomator.com/aws-codepipeline/ --- ATA Learning Tap to hide [ ATA Learning ](/) * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Search for: * [](https://twitter.com/adbertram) * [](https://github.com/Adam-the-Automator) * [](https://www.linkedin.com/company/adam-the-automator-llc) * [](/feed/) ![Deploying a Static Website on AWS S3 with AWS CodePipeline](https://adamtheautomator.com/wp-content/uploads/2023/08/aws-codepipeline.jpg) # Deploying a Static Website on AWS S3 with AWS CodePipeline [![](https://secure.gravatar.com/avatar/d05ab46ae71ee2393867f96cfec69e3a779ade5f81d9a519fc4d4fab1b177298?s=192&d=mm&r=g)Goodness Chris-Ugari](https://adamtheautomator.com/author/goodness-chris-ugari/)7 August 20238 min. read Categories: [IT Ops](/category/it-ops/) Tags:[AWS](/tag/aws/) Table of Contents * [Prerequisites](#prerequisites) * [Setting up an AWS CodeCommit Repository](#setting-up-an-aws-codecommit-repository) * [Generating HTTPS Git Credentials for AWS CodeCommit](#generating-https-git-credentials-for-aws-codecommit) * [Cloning the AWS CodeCommit Repository](#cloning-the-aws-codecommit-repository) * [Creating an AWS S3 Bucket to Use as a Static Website](#creating-an-aws-s3-bucket-to-use-as-a-static-website) * [Setting up an AWS CodePipeline](#setting-up-an-aws-codepipeline) * [Testing the Static Website Deployment](#testing-the-static-website-deployment) * [Conclusion](#conclusion) 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](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsf.Free%20Tier%20Categories=*all) will suffice. * Static website files (HTML, CSS, JavaScript, and so on) to deploy – This tutorial uses a [sample static website](https://docs.aws.amazon.com/codepipeline/latest/userguide/samples/sample-website.zip) from AWS. Related:[Static vs Dynamic Websites: What’s the Difference?](https://adamtheautomator.com/static-vs-dynamic-website/) * An IAM user with AWSCodeCommitPowerUser policy attached – This tutorial uses an [IAM](https://adamtheautomator.com/iam-aws/) user called _codecommit-user_. Related:[Helpful Guide to IAM in AWS Through Examples](https://adamtheautomator.com/iam-aws/) * [G](https://git-scm.com/downloads)[i](https://git-scm.com/downloads)[t](https://git-scm.com/downloads) 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](https://aws.amazon.com/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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-3.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-2.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-1.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-8.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-7.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-6.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-5.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-4.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-16.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-15.png) Confirming successfully copied HTTPS URL 2\. Next, open a terminal, and run the [`git clone`](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-clone) command below to clone your repository from the repository URL (`repo_URL`) you copied in step one. ```bash git clone ``` When prompted, input your IAM user’s credentials and click **OK** to authenticate cloning your repository. ![Cloning the AWS CodeCommit repository](https://adamtheautomator.com/wp-content/uploads/2023/08/image-14.png) Cloning the AWS CodeCommit repository Once authenticated, the empty repository will be cloned to your local computer. ![Verifying successful repository cloning](https://adamtheautomator.com/wp-content/uploads/2023/08/image-13.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-12.png) Overviewing the repository’s file structure 4\. Now, navigate to your repository’s directory in your terminal, and run the below [`git status`](https://www.atlassian.com/git/tutorials/inspecting-a-repository) command to check the current state of your repository. ```bash git status ``` As shown below, you will see your static website files are listed as untracked files. ![Checking the repository’s current state](https://adamtheautomator.com/wp-content/uploads/2023/08/image-11.png) 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 ```bash # 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 ](https://adamtheautomator.com/wp-content/uploads/2023/08/image-10.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-9.png) 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. Related:[How to Set Up An AWS S3 Static SSL Website](https://adamtheautomator.com/aws-s3-static-ssl-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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-26.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-25.png) Accessing the S3 bucket details page 3\. Navigate to the **Properties** tab to view the bucket’s properties. ![Accessing the bucket properties](https://adamtheautomator.com/wp-content/uploads/2023/08/image-24.png) Accessing the bucket properties 4\. Now, scroll down to the **Static website hosting** section and click **Edit**. ![Editing the static website hosting](https://adamtheautomator.com/wp-content/uploads/2023/08/image-23.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-22.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-21.png) Saving the bucket configuration changes 7\. Next, navigate to the **Permissions** tab since you must add a [bucket policy](https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html) to control access to your bucket and its objects (files). ![Accessing the bucket’s permissions](https://adamtheautomator.com/wp-content/uploads/2023/08/image-20.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-19.png) Editing the bucket policy 9\. Ultimately, populate the following policy in the policy editor, replacing `` 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._ ```json { "Version":"2012-10-17", "Statement":[ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": ["s3:GetObject"], "Resource": ["arn:aws:s3:::>/*"] } ] } ``` ![Adding a bucket policy ](https://adamtheautomator.com/wp-content/uploads/2023/08/image-18.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-17.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-35.png) Accessing the CodePipeline dashboard 2\. Next, click **Create pipeline** (upper-right) to initiate creating a new pipeline. ![Initiating creating a new pipeline](https://adamtheautomator.com/wp-content/uploads/2023/08/image-34.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-33.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-32.png) 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 ](https://adamtheautomator.com/wp-content/uploads/2023/08/image-31.png) Skipping the build stage When prompted, click Skip to confirm skipping the build stage. ![Confirming skipping the build stage](https://adamtheautomator.com/wp-content/uploads/2023/08/image-30.png) 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](https://docs.aws.amazon.com/codepipeline/latest/userguide/welcome-introducing-artifacts.html) unzips before deployment. Once configured, leave the rest as default, and click **Next** to continue. ![Configuring the deployment stage](https://adamtheautomator.com/wp-content/uploads/2023/08/image-29.png) Configuring the deployment stage 7\. Lastly, review the pipeline information, and click **Create pipeline** to finalize creating your pipeline. ![Creating the new pipeline ](https://adamtheautomator.com/wp-content/uploads/2023/08/image-28.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-27.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-40.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-39.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-38.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-37.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image-36.png) 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](https://adamtheautomator.com/wp-content/uploads/2023/08/image.gif) 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](https://docs.aws.amazon.com/cloudformation/index.html)? Start automating the creation and updating of your static website’s entire infrastructure! Share this article [Share on X](https://twitter.com/intent/tweet?url=https%3A%2F%2Fadamtheautomator.com%2Faws-codepipeline%2F&text=Deploying%20a%20Static%20Website%20on%20AWS%20S3%20with%20AWS%20CodePipeline)[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fadamtheautomator.com%2Faws-codepipeline%2F)[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fadamtheautomator.com%2Faws-codepipeline%2F) ## Related Posts ![](https://adamtheautomator.com/wp-content/uploads/2022/05/HMaster-Your-Data-with-AWS-Quicksight.jpg) ### [Make Data-Driven Decisions with AWS QuickSight Analytics](/aws-quicksight/) Struggling to make sense of your data? Discover how AWS QuickSight transforms data into actionable insights for smarter decision-making. ![](https://adamtheautomator.com/wp-content/uploads/2023/11/aws-network-access-analyzer-2.jpg) ### [Getting Started with AWS Network Access Analyzer](/aws-network-access-analyzer/) Unlock the power of AWS Network Access Analyzer. Master network security with step-by-step guidance in this tutorial today! ![](https://adamtheautomator.com/wp-content/uploads/2023/11/ngrok-remote.jpg) ### [Hosting an Ngrok Remote Web App on AWS](/ngrok-remote/) Learn how to run the Ngrok remote web application on AWS with the FastAPI Python endpoint in Linux through this ATA Learning tutorial! ## Categories * [IT Ops](/category/it-ops/) * [Cloud](/category/cloud/) * [DevOps](/category/devops/) * [Home Ops](/category/home-ops/) * [Information Security](/category/infosec/) * [Software Development](/category/software-development/) ## Site * [Home](/) * [Tutorials](/tutorials/) * [Instructors](/author/) * [Advertising](/advertising/) * [Recommended Resources](/resources/) * [About Adam](/about-adam/) Copyright 2026© ATA Learning | [Privacy Policy](/privacy/)