How to keep your static website up to date

In my previous post, we talked about how to host a secure static website. This article is going to focus on how to make changes and then make those changes live automatically. For this, we will retrieve the source code of your static website from GitHub and deploy it onto S3 using AWS CodePipeline. AWS CodePipeline is a service that builds, tests and deploys your code every time there is a new commit to your master branch.

We will go through the steps in order to create a code pipeline with a source linked to your GitHub repository. Whenever a new commit is pushed to the master, the pipeline automatically checks out the latest code which then will install dependencies, run tests and package your site for deployment on the basis of the triggered build step. Finally, we will deploy the static website to your S3 bucket.

The prerequisites for the procedure are as follows:

1. An already setup AWS account.
2. A GitHub account.
3. Static website already hosted out of AWS S3. If not, you can get started by referring to my previous article, Hosting a secure static website on AWS

Now let’s get started!

Step 1: Creating a CodePipeline By Using Explicit code for Deploy

We need to provision CodePipeline first. The pipeline will consist of two stages, a Source stage connected to GitHub, and a Build stage that deploys the static website.

• Sign in to the “AWS Management Console” and open the CodePipeline console at http://console.aws.amazon.com/codesuite/codepipeline/home.

• Choose “Create pipeline”.
• Give a Pipeline name. For eg: NageshDeployPipeline.
• Select “New service role”. Give it a name: web-s3-nagesh-pipeline-role.
• In the “Artifact store” choose the “Default location” option.

• In “Bucket” select the s3 bucket in which the static website is hosted. Click “Next”.
• Select GitHub as the “source provider”.
• Click “Connect to Github”. Authenticate and authorize AWS CodePipeline to access your Github repositories.
• Select the Repository with the static website files.
• Enter master in the “Branch” input. Click Next.

• For the Build provider choose “AWS CodeBuild”.
• Select “Create a new build project”. Enter a name for the project.
• For the “Environment image” we will use an image provided by AWS CodeBuild.
• Select “Ubuntu” as the operating system.
• Select “Node.js” as the Runtime and latest version.
• Leave “Build specification” as the “buildspec.yml” option.
• In the “CodeBuild service role” section, choose “create a new service role”.
• Enter a name for the service role CodeBuild will use.
• Keep the rest of the values at their default settings.
• Click “Save build project” and then click “Next”.
• In “Deployment provider” choose “No deployment”. Click “Next”.

Step 2: Setting up the buildspec file

We are going to add a buildspec.yml file to the root of our static website. This file will be the template that AWS CodeBuild uses to build, and in our case, deploy our static website. It consists of pre-install, install, build, and post-build stages.

version: 0.2

phases:
  install:
    commands:
      - echo "install step"
  pre_build:
    commands:
      - echo "pre_build step"
  build:
    commands:
      - aws s3 sync --delete . "s3://<nagesh-static-website-bucket>"
 post_build:
   commands:
     - echo "post_build step"

Here, we take the contents of our static website and copy it to the S3 bucket that hosts our site via the AWS command-line interface. For the other steps, we echo out which step ran in our build process. Make sure it is at the root of the repository, as this is where CodeBuild will look for it. Check it in to the repository so we can trigger our CodePipeline.

Step 3: Triggering our CodePipeline

In Step 1 we linked the Source stage of our CodePipeline to the GitHub repository of our static website. It is configured to watch for changes in our master branch. So, any new changes pushed to that branch trigger a new CodePipeline run.

We see here that the Source stage has been invoked due to the new changes in the master branch of our repository. This completed and sent its artifacts to the Build stage. The build stage took those artifacts and ran the buildspec.yml file to deploy them to our S3 bucket.

Now we have continuous deployment for our static website. With any new commit to our master branch, a new CodePipeline run is triggered. This checks out the latest code from GitHub and passes it to CodeBuild. Our build project then executes what is in our buildspec file.

However, there is an alternative solution to all this. It is using the automatic deployment feature in AWS. The steps for it are as follows:

Creating a CodePipeline using Deploy Provider

• Follow the steps similar to Step 1, till Deployment Provider.
• In “Deployment Provider” select “Amazon S3”.

• In “Bucket” select the bucket configured for the static website.
• Select “Extract file before deploy”. The deployment fails if you do not select this. Choose “Next”.
• In “Review”, review the information, and then choose “Create pipeline”.

• After your pipeline runs successfully, open the Amazon S3 console and verify that your files appear in your public bucket as shown:

index.html
main.css
graphic.jpg

• Access your endpoint to test the website.
• Make a change to your source file and then push the change to your repository. This triggers your pipeline to run.
• Verify that your website is updated.

Cheers! Changes to your static website now automatically deploy to the live URL instantly.

P.S: The only extra cost involved for this solution is, this pipeline will cost $1 per month and charges only if a deployment happens.