Deploying Hugo static websites to AWS S3 using Azure DevOps


amazon azure ci/cd web

Getting started with Hugo

Hugo is an open-source static website generator. https://gohugo.io

Installing Hugo on macOS is as simple as:

brew install hugo

For other installation options see: https://gohugo.io/getting-started/quick-start/

Then create your site with:

hugo new site sitename

Enter the directory that was created for you and start up your Hugo server locally with:

hugo server -w

And then you can access your site on http://localhost:1313

Azure DevOps

Using Azure DevOps I will automatically build my static website and deploy it to an AWS S3 Bucket for hosting.

But first it needs to be deployed to a beta site for testing, so I can approve it before it goes to production.

Pipelines as Code

The following is my pipeline, defined in YAML, saved in azure-pipelines.yml in my GitHub repository.

trigger:
- master

pool:
  name: Hosted
steps:
- task: giuliovdev.hugo-extension.hugo-build-task.HugoTask@1
  displayName: 'Hugo generate .'
  inputs:
    source: .
    destination: public/

- task: PublishPipelineArtifact@0
  displayName: 'Publish Pipeline Artifact'
  inputs:
    artifactName: 'comtraya.org_public'
    targetPath: ./public

Create your new Builds Pipeline and point it to your repository. It will automatically find your azure-pipeline.yml and create the pipeline for you.

But what about Release as Code?

Well Azure DevOps currently does not support creating release pipelines with YAML. But it is somewhere on the roadmap. Although it has unfortunately been postponed several times. https://stackoverflow.com/questions/52323065/azure-devops-yaml-release-pipelines

I will surely to a new post about that, when it is finally released!

For now we need to do this with the visual editor.

But first we need to add permissions to AWS S3 for Azure DevOps to deploy. This is done in AWS IAM.

First I create a new user, and then the following policy attached to the user:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::beta.comtraya.org/*"
            ]
        }
    ]
}

I then proceed to create the release pipeline

with the following tasks for the Beta stage.

Clone the Beta stage to a production stage, and change the name of the destination S3 Bucket.

Click here to set the manual approval to deploy to production:

Then enable the “Pre-deployment approvals”. Now you will get an email when it has been deployed to beta bucket, as well as a url to approve the deployment to production.