Deployment and previews

• 1: Deployment with Amazon S3 and CloudFront
• 2: Deployment on GitHub Pages
• 3: Serving your site locally
• 4: Deployment on Netlify

hugo -e development

1 - Deployment with Amazon S3 and CloudFront

There are several options for publishing your web site using Amazon Web Services. This section describes the most basic option, deploying your site using an S3 bucket and activating the CloudFront CDN (content delivery network) to speed up the delivery of your deployed contents.

1. After your registration at AWS, create your S3 bucket, connect it with your domain, and add it to the CloudFront CDN. This blog post has all the details and provides easy to follow step-by-step instructions for the whole procedure.

2. Download and install the latest version 2 of the AWS Command Line Interface (CLI). Then configure your CLI instance by issuing the command aws configure (make sure you have your AWS Access Key ID and your AWS Secret Access Key at hand):

   $ aws configure
   AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
   AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
   Default region name [None]: eu-central-1
   Default output format [None]:
   

3. Check the proper configuration of your AWS CLI by issuing the command aws s3 ls, this should output a list of your S3 bucket(s).

1. Inside your hugo.toml/hugo.yaml/hugo.json, add a [deployment] section like this one:

   • Configuration file:
   • hugo.toml
   • hugo.yaml
   • hugo.json

   [deployment]
   [[deployment.targets]]
   name = "aws"
   URL = "s3://www.your-domain.tld"
   cloudFrontDistributionID = "E9RZ8T1EXAMPLEID"

   deployment:
     targets:
       - name: aws
         URL: 's3://www.your-domain.tld'
         cloudFrontDistributionID: E9RZ8T1EXAMPLEID

   {
     "deployment": {
       "targets": [
         {
           "name": "aws",
           "URL": "s3://www.your-domain.tld",
           "cloudFrontDistributionID": "E9RZ8T1EXAMPLEID"
         }
       ]
     }
   }

1. Run the command hugo --gc --minify to render the site’s assets into the public/ directory of your Hugo build environment.

2. Use Hugo’s built-in deploy command to deploy the site to S3:

   hugo deploy
   Deploying to target "aws" (www.your-domain.tld)
   Identified 77 file(s) to upload, totaling 5.3 MB, and 0 file(s) to delete.
   Success!
   Invalidating CloudFront CDN...
   Success!
   

   As you can see, issuing the hugo deploy command automatically invalidates your CloudFront CDN cache.

3. That’s all you need to do! From now on, you can easily deploy to your S3 bucket using Hugo’s built-in deploy command!

For more information about the Hugo deploy command, including command line options, see this synopsis. In particular, you may find the --maxDeletes int option or the --force option (which forces upload of all files) useful.

If S3 does not meet your needs, consider AWS Amplify Console. This is a more advanced continuous deployment (CD) platform with built-in support for the Hugo static site generator. A starter can be found in Hugo’s official docs.

2 - Deployment on GitHub Pages

If your repo is hosted on GitHub, a simple option is to serve your site with GitHub Pages. GitHub Pages lets you create project, user, and organization sites; for a project site, your site URL will be http(s)://<username>.github.io/<repository_name>, custom domains are also supported. GitHub Pages come with continuous deployment using GitHub actions, while the marketplace for actions has useful tools for spell and link checking, deploy previews, and more. Using your existing GitHub account, you can start by using the free plan for publicly available repositories, with premium tiers available for business use cases.

The Docsy example site repo provides a workflow file that you can use when deploying to GitHub Pages. If you used the example site as template for your new site you may already have this file in your repo, if not the instructions below show you how to create your own workflow file.

Before deploying on GitHub Pages, make sure that you’ve pushed your site source to your chosen GitHub repo, following any setup instructions in Using the theme.

1. With GitHub Pages, a site is published to the branch gh-pages and served from there by default. You must create this branch first, either in the GitHub web interface or via command line (at the root of your local repo clone):

   $ git checkout -b gh-pages
   Switched to a new branch 'gh-pages'
   

2. Push this local branch to your repo:

   $ git push --set-upstream origin gh-pages
    details omitted …
    * [new branch]      new -> new
   branch 'gh-pages' set up to track 'origin/gh-pages'.
   

3. Switch back to the main (or work) branch of your repo:

   $ git checkout main
   Switched to branch 'main'
   

4. Check if you already have the workflow file .github/workflows/deploy-github-pages.yml in your repo. If this file doesn’t exist, do the following:

   1. Create a new empty workflow file from the root of your repo, as follows:

      $ mkdir -p .github/workflows
      $ touch .github/workflows/deploy-github-pages.yml
      

   2. Open the file in an editor of your choice, paste in the code below, and save the file:

      name: Deployment to GitHub Pages
      
      on:
        workflow_dispatch:
        push:
          branches:
            - main # <-- specify the branch you want to deploy from
        pull_request:
      
      env:
        REPO_NAME: ${{ github.event.repository.name }}
        REPO_OWNER: ${{ github.repository_owner }}
      
      jobs:
        deploy:
          runs-on: ubuntu-22.04
          concurrency:
            group: ${{ github.workflow }}-${{ github.ref }}
          steps:
            - uses: actions/checkout@v4
              with:
                fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
      
            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v3
              with:
                hugo-version: '0.155.3'
                extended: true
      
            - name: Setup Node
              uses: actions/setup-node@v4
              with:
                node-version: '20'
                cache: 'npm'
                cache-dependency-path: '**/package-lock.json'
      
            - run: npm ci
            - run: >-
                hugo --baseURL https://${REPO_OWNER}.github.io/${REPO_NAME}
                --minify
      
            - name: Deploy
              uses: peaceiris/actions-gh-pages@v4
              if: ${{ github.ref == 'refs/heads/main' }} # <-- specify same branch as above here
              with:
                github_token: ${{ secrets.GITHUB_TOKEN }}
      

   3. Add the file to the staging area, commit your change and push the change to your remote GitHub repo:

      $ git add .github/workflows/deploy-github-pages.yml
      $ git commit -m "Adding workflow file for site deployment"
      $ git push origin
      

5. In your browser, make sure you are logged into your GitHub account. In your repo Settings, select Pages.

   1. Under Build and deployment, select Deploy from a branch in the source dropdown.

   2. From the branch dropdown, select gh-pages as branch where the site is built from.

   3. From the folder dropdown, select /(root) as root directory.

That’s it! Your deployment workflow for your site is configured.

Any future push to the branch specified in your workflow file will now trigger the action workflow defined in the workflow file. Additionally, you can trigger the deployment manually by using GitHub web UI.

Once you push to your repo, you can see the progress of the triggered workflow in the Actions tab of the GitHub web UI:

URL 'Repo actions': https://github.com/<username>/<repository_name>/actions

After the first successful deployment, a new environment github-pages is added to your repo. This is shown at the right of your repo main view (below Releases and Packages). When you click on this environment, a list of deployments is displayed:

URL 'Repo deployments': https://github.com/<username>/<repository_name>/deployments/

You can find out more in Hosting on GitHub in the Hugo documentation.

For advanced use cases, the hugo-action used inside the workflow file has more configuration options, which are well documented.

3 - Serving your site locally

Depending on your deployment choice you may want to serve your site locally during development to preview content changes. To serve your site locally:

1. Ensure you have an up to date local copy of your site files cloned from your repo.

2. Ensure you have the tools described in Prerequisites and installation installed on your local machine, including postcss-cli (you’ll need it to generate the site resources the first time you run the server).

3. Run the hugo server command in your site root. By default your site will be available at http://localhost:1313.

Now that you’re serving your site locally, Hugo will watch for changes to the content and automatically refresh your site. If you have more than one local git branch, when you switch between git branches the local website reflects the files in the current branch.

4 - Deployment on Netlify

We recommend using Netlify as a particularly simple way to serve your site from your Git provider (GitHub, GitLab, or BitBucket), with continuous deployment, previews of the generated site when you or your users create pull requests against the doc repo, and more. Netlify is free to use for Open Source projects, with premium tiers if you require greater support.

Before deploying with Netlify, make sure that you’ve pushed your site source to your chosen GitHub (or other provider) repo, following any setup instructions in Using the theme.

Then follow the instructions in Host on Netlify to set up a Netlify account (if you don’t have one already) and authorize access to your GitHub or other Git provider account. Once you’re logged in:

1. Click New site from Git.

2. Click your chosen Git provider, then choose your site repo from your list of repos.

3. In the Deploy settings page:

   1. Specify your Build command. The exact build command depends on how you have chosen to use Docsy:
      • If you are using Docsy as a Git submodule, specify cd themes/docsy && git submodule update -f --init && cd ../.. && hugo. You need to specify this rather than just hugo so that Netlify can use the theme’s submodules.
      • If you are using Docsy as a Hugo module or NPM package, you can just specify hugo.
   2. Click Show advanced.
   3. In the Advanced build settings section, click New variable.
   4. Specify NODE_VERSION as the Key for the new variable, and set its Value to the latest LTS version of Node.js.
   5. In the Advanced build settings section, click New variable.
   6. Specify HUGO_VERSION as the Key for the new variable, and set its Value to the latest version of Hugo.
   7. In the Advanced build settings section, click New variable again.
   8. Specify GO_VERSION as the Key for the new variable, and set its Value to the latest version of Go.

   If you don’t want your site to be indexed by search engines, you can add an environment flag to your build command to specify a non-production environment, as described in Build environments and indexing.

4. Click Deploy site.

  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss-cli": "^11.0.0",
    "postcss": "^8.4.38"
  }

Alternatively, you can follow the same instructions but specify your Deploy settings in a netlify.toml file in your repo rather than in the Deploy settings page. For an example, see the netlify.toml for the Docsy website (though note that the build command here is a little unusual because the Docsy user guide is inside the theme repo).

If you have an existing deployment you can view and update the relevant information by selecting the site from your list of sites in Netlify, then clicking Site settings - Build and deploy. Ensure that Ubuntu Focal 20.04 is selected in the Build image selection section - if you’re creating a new deployment this is used by default. You need to use this image to run the extended version of Hugo.