这是本节的多页打印视图。 点击此处打印.

返回本页常规视图.

Hosting & 部署

Hosting & Deployment

https://gohugo.io/hosting-and-deployment/

Because Hugo renders static websites, you can host your new Hugo website virtually anywhere. The following represent only a few of the more popular hosting and automated deployment solutions used by the Hugo community.

1 - Deployment with Rclone

Deployment with Rclone

https://gohugo.io/hosting-and-deployment/deployment-with-rclone/

If you have access to your web host with SFTP/FTP/SSH/HTTP(DAV), you can use rclone to incrementally deploy your entire Hugo website.

Assumptions

  • A web host running a web server. This could be a shared hosting environment or a VPS.
  • Access to your web host with any of the protocols supported by rclone, such as SFTP.
  • A functional static website built with Hugo
  • Deploying from an Rclone compatible operating system
  • You have installed Rclone.

NB: You can remove --interactive in the commands below once you are comfortable with rclone, if you wish. Also, --gc and --minify are optional in the hugo commands below.

Getting Started

The spoiler is that you can even deploy your entire website from any compatible OS with no configuration. Using SFTP for example:

1
2

hugo --gc --minify
rclone sync --interactive --sftp-host sftp.example.com --sftp-user www-data --sftp-ask-password public/ :sftp:www/

Configure Rclone for Even Easier Usage

The easiest way is simply to run rclone config.

The Rclone docs provide an example of configuring Rclone to use SFTP.

For the next commands, we will assume you configured a remote you named hugo-www

The above ‘spoiler’ commands could become:

1
2

hugo --gc --minify
rclone sync --interactive public/ hugo-www:www/

After you issue the above commands (and respond to any prompts), check your website and you will see that it is deployed.

另请参阅

2 - Deployment with Rsync

Deployment with Rsync

https://gohugo.io/hosting-and-deployment/deployment-with-rsync/

If you have access to your web host with SSH, you can use a simple rsync one-liner to incrementally deploy your entire Hugo website.

Assumptions

  • A web host running a web server. This could be a shared hosting environment or a VPS.
  • Access to your web host with SSH
  • A functional static website built with Hugo

The spoiler is that you can deploy your entire website with a command that looks like the following:

1

hugo && rsync -avz --delete public/ www-data@ftp.topologix.fr:~/www/

As you will see, we’ll put this command in a shell script file, which makes building and deployment as easy as executing ./deploy.

Copy Your SSH Key to your Host

To make logging in to your server more secure and less interactive, you can upload your SSH key. If you have already installed your SSH key to your server, you can move on to the next section.

First, install the ssh client. On Debian distributions, use the following command:

install-openssh.sh

1

sudo apt-get install openssh-client

Then generate your ssh key. First, create the .ssh directory in your home directory if it doesn’t exist:

1

~$ cd && mkdir .ssh & cd .ssh

Next, execute this command to generate a new keypair called rsa_id:

1

~/.ssh/$ ssh-keygen -t rsa -q -C "For SSH" -f rsa_id

You’ll be prompted for a passphrase, which is an extra layer of protection. Enter the passphrase you’d like to use, and then enter it again when prompted, or leave it blank if you don’t want to have a passphrase. Not using a passphrase will let you transfer files non-interactively, as you won’t be prompted for a password when you log in, but it is slightly less secure.

To make logging in easier, add a definition for your web host to the file ~/.ssh/config with the following command, replacing HOST with the IP address or hostname of your web host, and USER with the username you use to log in to your web host when transferring files:

1
2
3
4
5
6
7

~/.ssh/$ cat >> config <<EOF
Host HOST
     Hostname HOST
     Port 22
     User USER
     IdentityFile ~/.ssh/rsa_id
EOF

Then copy your ssh public key to the remote server with the ssh-copy-id command:

1

~/.ssh/$ ssh-copy-id -i rsa_id.pub USER@HOST.com

Now you can easily connect to the remote server:

1
2

~$ ssh user@host
Enter passphrase for key '/home/mylogin/.ssh/rsa_id':

Now that you can log in with your SSH key, let’s create a script to automate deployment of your Hugo site.

Shell Script

Create a new script called deploy the root of your Hugo tree:

1

~/websites/topologix.fr$ editor deploy

Add the following content. Replace the USER, HOST, and DIR values with your own values:

1
2
3
4
5
6
7
8

#!/bin/sh
USER=my-user
HOST=my-server.com
DIR=my/directory/to/topologix.fr/   # the directory where your web site files should go

hugo && rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR} # this will delete everything on the server that's not in the local public folder 

exit 0

Note that DIR is the relative path from the remote user’s home. If you have to specify a full path (for instance /var/www/mysite/) you must change ~/${DIR} to ${DIR} inside the command-line. For most cases you should not have to.

Save and close, and make the deploy file executable:

1

~/websites/topologix.fr$ chmod +x deploy

Now you only have to enter the following command to deploy and update your website:

1

~/websites/topologix.fr$ ./deploy

Your site builds and deploys:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
5 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 56 ms
sending incremental file list
404.html
index.html
index.xml
sitemap.xml
posts/
posts/index.html

sent 9,550 bytes  received 1,708 bytes  7,505.33 bytes/sec
total size is 966,557  speedup is 85.86

You can incorporate other proprocessing tasks into this deployment script as well.

另请参阅

3 - Host on 21YunBox

Host on 21YunBox

https://gohugo.io/hosting-and-deployment/hosting-on-21yunbox/

Host your Hugo site with 21YunBox’s blazing fast Chinese CDN, fully-managed SSL and auto deploys from Gitee.

21YunBox is a fully-managed cloud platform dedicated to make web deployment easy within the Chinese Great Firewall where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place. It provides blazing fast Chinese CDN, continuous deployment, one-click HTTPS and other services like managed databases and backend web services, providing an avenue to launch web projects in China.

21YunBox includes the following features:

  • Continuous, automatic builds & deploys from GitHub and Gitee
  • Automatic SSL certificates through Let’s Encrypt
  • Instant cache invalidation with a blazing fast, Chinese CDN
  • Unlimited custom domains
  • Automatic Brotli compression for faster sites
  • Native HTTP/2 support
  • Automatic HTTP → HTTPS redirects
  • Custom URL redirects and rewrites

Prerequisites

This guide assumes you already have a Hugo project to deploy. If you need a project, use the Quick Start to get started or fork 21YunBox’s Hugo Example before continuing.

Setup

You can set up a Hugo site on 21YunBox in two quick steps:

  1. Create a new web service on 21YunBox, and give 21YunBox permission to access your GitHub or Gitee repo.

  2. Use the following values during creation:

    FieldValue
    EnvironmentStatic Site
    Build Commandhugo --gc --minify (or your own build command)
    Publish Directory./public (or your own output directory)

That’s it! Your site will be live on your 21YunBox URL (which looks like yoursite.21yunbox.com) as soon as the build is done.

Continuous deploys

Now that 21YunBox is connected to your repo, it will automatically build and publish your site any time you push to GitHub.

Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site.

Custom domains

Add your own domains to your site easily using 21YunBox’s custom domains guide.

Support

Click here to contact with 21YunBox’ experts if you need help.

另请参阅

4 - Host on AWS Amplify

Host on AWS Amplify

https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/

Develop and deploy a cloud-powered web app with AWS Amplify.

In this guide we’ll walk through how to deploy and host your Hugo site using the AWS Amplify Console.

AWS Amplify is a combination of client library, CLI toolchain, and a Console for continuous deployment and hosting. The Amplify CLI and library allow developers to get up & running with full-stack cloud-powered applications with features like authentication, storage, serverless GraphQL or REST APIs, analytics, Lambda functions, & more. The Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators). Continuous deployment allows developers to deploy updates to their web app on every code commit to their Git repository. Hosting includes features such as globally available CDNs, easy custom domain setup + HTTPS, feature branch deployments, and password protection.

Pre-requisites

  • Sign up for an AWS Account. There are no upfront charges or any term commitments to create an AWS account and signing up gives you immediate access to the AWS Free Tier.
  • You have an account with GitHub, GitLab, or Bitbucket.
  • You have completed the Quick Start or have a Hugo website you are ready to deploy and share with the world.

Hosting

  1. Log in to the AWS Amplify Console and choose Get Started under Deploy. Hugo Amplify
  2. Connect a branch from your GitHub, Bitbucket, GitLab, or AWS CodeCommit repository. Connecting your repository allows Amplify to deploy updates on every code commit to a branch. Hugo Amplify
  3. Accept the default build settings. The Amplify Console automatically detects your Hugo build settings and output directory. Hugo Amplify
  4. Review your changes and then choose Save and deploy. The Amplify Console will pull code from your repository, build changes to the backend and frontend, and deploy your build artifacts at https://master.unique-id.amplifyapp.com. Bonus: Screenshots of your app on different devices to find layout issues.

Using a newer version of Hugo

If you need to use a different, perhaps newer, version of Hugo than the version currently supported by AWS Amplify:

  1. Visit the AWS Amplify Console, and click the app you would like to modify
  2. In the side navigation bar, Under App Settings, click Build settings
  3. On the Build settings page, near the bottom, there is a section called Build image settings. Click Edit
  4. Under Live package updates, click Add package version override
  5. From the selection, click Hugo and ensure the version field says latest
  6. Click Save to save the changes.

另请参阅

5 - Host on Azure Static Web Apps

Host on Azure Static Web Apps

https://gohugo.io/hosting-and-deployment/hosting-on-azure/

Deploy Hugo to Azure Static Web Apps and automate the whole process with Github Action Workflow

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a Git repository, using GitHub Actions or Azure DevOps.

The following documentation covers how to use GitHub Actions for the deployment. If you are using Azure DevOps, follow the Microsoft documentation.

Assumptions

  1. You have Git 2.8 or greater installed on your machine.
  2. You have a GitHub account. Signing up for GitHub is free.
  3. You have an Azure account. You can sign up for a Free Trail.
  4. You have a ready-to-publish Hugo website or have at least completed the Quick Start.

Deploy Hugo to Azure Static Web Apps

  1. Navigate to the Azure Portal
  2. Click Create a Resource
  3. Search for Static Web Apps
  4. Click Static Web Apps
  5. Click Create

Create in Azure Portal

  1. For Subscription, accept the subscription that is listed or select a new one from the drop-down list.
  2. In Resource group, select New. In New resource group name, enter hugo-static-app and select OK.
  3. Next, a name for your app in the Name box. Valid characters include a-z, A-Z, 0-9 and -.
  4. For Region, select an available region close to you.
  5. For SKU, select Free.

Basic app details

  1. Click the Sign in with GitHub button.
  2. Select the Organization under which your repo exists.
  3. Select the Hugo app you wish to deploy as the Repository .
  4. For the Branch select the branch you want to deploy (eg: main).
  5. Select Hugo under the Build Presets, which will populate the configuration files with the standard Hugo build options
  • App Location is the path in the Git repo where Hugo’s config file is
  • Api Location is the path where the Serverless API is (or left blank if there is no API)
  • Artifact Location is the path where Hugo publishes to
  1. Click Review + Create to review the details and then Create to start the creation of the Azure Static Web Apps and create the GitHub Action workflow for deployment.

A GitHub Action workflow will immediately start a build using Hugo and deployment to Azure. The website can be accessed via the URL shown on the Overview page of the Azure Static Web Apps resource in Azure.

Using A Custom Hugo Version

When you create a Static Web App, a workflow file is generated which contains the deployment settings for the site. You can configure a specific Hugo version in the workflow file by providing a value for HUGO_VERSION in the env section of the Azure/static-web-apps-deploy GitHub Action.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
        env:
          HUGO_VERSION: 0.100.2

Use a Custom Domain

Azure Static Web Apps supports custom domains as a CNAME or APEX domain mapping. You can configure the custom domains via the Azure Portal. Refer to the official documentation for custom domains for more information.

另请参阅

6 - Host on Cloudflare Pages

Host on Cloudflare Pages

https://gohugo.io/hosting-and-deployment/hosting-on-cloudflare-pages/

Cloudflare Pages can host your Hugo site with CDN, continuous deployment, 1-click HTTPS, an admin GUI, and its own environment variables.

Cloudflare Pages are super fast, always up-to-date, and deployed directly from your Git provider (currently supports only GitHub and GitLab).

Cloudflare Pages docs have a detailed tutorial on how to deploy a Hugo site.

7 - Host on Firebase

Host on Firebase

https://gohugo.io/hosting-and-deployment/hosting-on-firebase/

You can use Firebase’s free tier to host your static website; this also gives you access to Firebase’s NOSQL API.

Assumptions

  1. You have an account with Firebase. (If you don’t, you can sign up for free using your Google account.)
  2. You have completed the Quick Start or have a completed Hugo website ready for deployment.

Initial setup

Go to the Firebase console and create a new project (unless you already have a project). You will need to globally install firebase-tools (node.js):

1

npm install -g firebase-tools

Log in to Firebase (setup on your local machine) using firebase login, which opens a browser where you can select your account. Use firebase logout in case you are already logged in but to the wrong account.

1

firebase login

In the root of your Hugo project, initialize the Firebase project with the firebase init command:

1

firebase init

From here:

  1. Choose Hosting in the feature question
  2. Choose the project you just set up
  3. Accept the default for your database rules file
  4. Accept the default for the publish directory, which is public
  5. Choose “No” in the question if you are deploying a single-page app

Using Firebase & Github CI/CD

In new versions of Firebase, some other questions apply:

  1. Set up automatic builds and deploys with GitHub?

Here you will be redirected to login in your GitHub account to get permissions. Confirm.

  1. For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)

Include the repository you will use in the format above (Account/Repo) Firebase script with retrive credentials, create a service account you can later manage in your github settings.

  1. Set up the workflow to run a build script before every deploy?

Here is your opportunity to include some commands before you run the deploy.

  1. Set up automatic deployment to your site’s live channel when a PR is merged?

You can let in the default option (main)

After that Firebase has been set in your project with CI/CD. After that run:

hugo && firebase deploy

With this you will have the app initialized manually. After that you can manage and fix your github workflow from: https://github.com/your-account/your-repo/actions

Don’t forget to update your static pages before push!

Manual Deploy

To deploy your Hugo site, execute the firebase deploy command, and your site will be up in no time:

1

hugo && firebase deploy

CI Setup (Other tools)

You can generate a deploy token using

1

firebase login:ci

You can also set up your CI and add the token to a private variable like $FIREBASE_DEPLOY_TOKEN.

This is a private secret and it should not appear in a public repository. Make sure you understand your chosen CI and that it’s not visible to others.

You can then add a step in your build to do the deployment using the token:

1

firebase deploy --token $FIREBASE_DEPLOY_TOKEN

另请参阅

8 - Host on GitHub

Host on GitHub

https://gohugo.io/hosting-and-deployment/hosting-on-github/

Deploy Hugo as a GitHub Pages project or personal/organizational site and automate the whole process with Github Actions

GitHub provides free and fast static hosting over SSL for personal, organization, or project pages directly from a GitHub repository via its GitHub Pages service and automating development workflows and build with GitHub Actions.

Prerequisites

  1. Create a GitHub account
  2. Install Git
  3. Create a Hugo site and test it locally with hugo server.

Types of sites

There are three types of GitHub Pages sites: project, user, and organization. Project sites are connected to a specific project hosted on GitHub. User and organization sites are connected to a specific account on GitHub.com.

See the GitHub Pages documentation to understand the requirements for repository ownership and naming.

Procedure

  • Step 1

    Create a GitHub repository.

  • Step 2

    Push your local repository to GitHub.

  • Step 3

    Visit your GitHub repository. From the main menu choose Settings > Pages. In then center of your screen you will see this:

screen capture

  • Step 4

    Change the Source to GitHub Actions. The change is immediate; you do not have to press a Save button.

screen capture

  • Step 5

    Create an empty file in your local repository.

1

.github/workflows/hugo.yaml

  • Step 6

    Copy and paste the YAML below into the file you created. Change the branch name and Hugo version as needed.

.github/workflows/hugo.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb                    
      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"                    
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

  • Step 7

    Commit the change to your local repository with a commit message of something like “Add workflow”, and push to GitHub.

  • Step 8

    From GitHub’s main menu, choose Actions. You will see something like this:

screen capture

  • Step 9

    When GitHub has finished building and deploying your site, the color of the status indicator will change to green.

screen capture

  • Step 10

    Click on the commit message as shown above. You will see this:

screen capture

Under the deploy step, you will see a link to your live site.

In the future, whenever you push a change from your local repository, GitHub will rebuild your site and deploy the changes.

Additional resources

另请参阅

9 - Host on GitLab

Host on GitLab

https://gohugo.io/hosting-and-deployment/hosting-on-gitlab/

GitLab makes it easy to build, deploy, and host your Hugo website via their free GitLab Pages service, which provides native support for Hugo.

Assumptions

  • Working familiarity with Git for version control
  • Completion of the Hugo Quick Start
  • A GitLab account
  • A Hugo website on your local machine that you are ready to publish

BaseURL

The baseURL in your site configuration must reflect the full URL of your GitLab pages repository if you are using the default GitLab Pages URL (e.g., https://<YourUsername>.gitlab.io/<your-hugo-site>/) and not a custom domain.

Configure GitLab CI/CD

Define your CI/CD jobs by creating a .gitlab-ci.yml file in the root of your project.

.gitlab-ci.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  rules:
  - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

See this list if you wish to use a particular Hugo version to build your site.

Push your Hugo website to GitLab

Next, create a new repository on GitLab. It is not necessary to make the repository public. In addition, you might want to add /public to your .gitignore file, as there is no need to push compiled assets to GitLab or keep your output website in version control.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# initialize new git repository
git init

# add /public directory to our .gitignore file
echo "/public" >> .gitignore

# commit and push code to master branch
git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/YourUsername/your-hugo-site.git
git push -u origin master

Wait for your page to build

That’s it! You can now follow the CI agent building your page at https://gitlab.com/<YourUsername>/<your-hugo-site>/pipelines.

After the build has passed, your new website is available at https://<YourUsername>.gitlab.io/<your-hugo-site>/.

Next steps

GitLab supports using custom CNAME’s and TLS certificates. For more details on GitLab Pages, see the GitLab Pages setup documentation.

另请参阅

10 - Host on KeyCDN

Host on KeyCDN

https://gohugo.io/hosting-and-deployment/hosting-on-keycdn/

Accelerate your Hugo site globally with a KeyCDN integration. This tutorial shows you how to set up your static site as a GitLab page behind a KeyCDN pull zone.

KeyCDN provides a multitude of features to help accelerate and secure your Hugo site globally including Brotli compression, Let’s Encrypt support, Origin Shield, and more.

Assumptions

  • You already have a Hugo page configured
  • You have a GitLab account
  • You have a KeyCDN account

Create a KeyCDN Pull Zone

The first step will be to log in to your KeyCDN account and create a new zone. Name this whatever you like and select the Pull Zone option. As for the origin URL, your site will be running on GitLab Pages with a URL of https://youruser.gitlab.io/reponame/. Use this as the Origin URL.

Screenshot of KeyCDN’s pull zone creation page

While the origin location doesn’t exist yet, you will need to use your new Zone URL address (or Zone Alias) in the .gitlab-ci.yml file that will be uploaded to your GitLab project.

Ensure that you use your Zone URL or Zone alias as the BASEURL variable in the example below. This will be the user-visible website address.

Configure Your .gitlab-ci.yml File

Your .gitlab-ci.yml file should look similar to the example below. Be sure to modify any variables that are specific to your setup.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

image: alpine:latest

variables:
    BASEURL: "https://cipull-7bb7.kxcdn.com/"
    HUGO_VERSION: "0.26"
    HUGO_CHECKSUM: "67e4ba5ec2a02c8164b6846e30a17cc765b0165a5b183d5e480149baf54e1a50"
    KEYCDN_ZONE_ID: "75544"

before_script:
    - apk update
    - apk add curl

pages:
    stage: deploy
    script:
    - apk add git
    - git submodule update --init
    - curl -sSL https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz -o /tmp/hugo.tar.gz
    - echo "${HUGO_CHECKSUM}  /tmp/hugo.tar.gz" | sha256sum -c
    - tar xf /tmp/hugo.tar.gz hugo -C /tmp/ && cp /tmp/hugo /usr/bin
    - hugo --baseURL ${BASEURL}
    - curl "https://api.keycdn.com/zones/purge/${KEYCDN_ZONE_ID}.json" -u "${KEYCDN_API_KEY}:"
    artifacts:
    paths:
    - public
    only:
    - master

Using this integration method, you will have to specify the Zone ID and your KeyCDN API key as secret variables. To do this, navigate to the top-left menu bar in GitLab and select Projects. Then, select your project and click on the Settings page. Finally, select Pipelines from the sub-menu and scroll down to the Secret Variable section.

The Secret Variable for your Zone ID should look similar to:

Screenshot of setting the Zone ID secret variable

While the Secret Variable for your API Key will look similar to:

Screenshot of setting the API Key secret variable

The Zone ID and API key are used to purge your zone – it’s not strictly needed but otherwise, the CDN might deliver older versions of your assets for quite a while.

Push Your Changes to GitLab

Now it’s time to push the newly created repository to GitLab:

1
2

git remote add origin git@gitlab.com:youruser/ci-example.git
git push -u origin master

You can watch the progress and CI job output in your Gitlab project under “Pipelines”.

After verifying your CI job ran without issues, first check that your GitLab page shows up under https://youruser.gitlab.io/reponame/ (it might look broken depending on your browser settings as all links point to your KeyCDN zone – don’t worry about that) and then by heading to whatever Zone alias / Zone URL you defined.

To learn more about Hugo hosting options with KeyCDN, check out the complete Hugo hosting with KeyCDN integration guide.

另请参阅

11 - Host on Netlify

Host on Netlify

https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

Netlify can host your Hugo site with CDN, continuous deployment, 1-click HTTPS, an admin GUI, and its own CLI.

Netlify provides continuous deployment services, global CDN, ultra-fast DNS, atomic deploys, instant cache invalidation, one-click SSL, a browser-based interface, a CLI, and many other features for managing your Hugo website.

Assumptions

  • You have an account with GitHub, GitLab, or Bitbucket.
  • You have completed the Quick Start or have a Hugo website you are ready to deploy and share with the world.
  • You do not already have a Netlify account.

Create a Netlify account

Go to app.netlify.com and select your preferred signup method. This will likely be a hosted Git provider, although you also have the option to sign up with an email address.

The following examples use GitHub, but other git providers will follow a similar process.

Screenshot of the homepage for app.netlify.com, containing links to the most popular hosted git solutions.

Selecting GitHub will bring up an authorization modal for authentication. Select “Authorize application.”

Screenshot of the authorization popup for Netlify and GitHub.

Create a new site with continuous deployment

You’re now already a Netlify member and should be brought to your new dashboard. Select “New site from git.”

Screenshot of the blank Netlify admin panel with no sites and highlighted ‘add new site’ button’

Netlify will then start walking you through the steps necessary for continuous deployment. First, you’ll need to select your git provider again, but this time you are giving Netlify added permissions to your repositories.

Screenshot of step 1 of create a new site for Netlify: selecting the git provider

And then again with the GitHub authorization modal:

Screenshot of step 1 of create a new site for Netlify: selecting the git provider

Select the repo you want to use for continuous deployment. If you have a large number of repositories, you can filter through them in real time using repo search:

Screenshot of step 1 of create a new site for Netlify: selecting the git provider

Once selected, you’ll be brought to a screen for basic setup. Here you can select the branch you want to publish, your build command, and your publish (i.e. deploy) directory. The publish directory should mirror that of what you’ve set in your site configuration, the default of which is public. The following steps assume you are publishing from the master branch.

Configure Hugo version in Netlify

You can set Hugo version for your environments in netlify.toml file or set HUGO_VERSION as a build environment variable in the Netlify console.

For production:

netlify.toml

1
2

[context.production.environment]
  HUGO_VERSION = "0.99.1"

For testing:

netlify.toml

1
2

[context.deploy-preview.environment]
  HUGO_VERSION = "0.99.1"

The Netlify configuration file can be a little hard to understand and get right for the different environment, and you may get some inspiration and tips from this site’s netlify.toml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.111.3"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.111.3"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.111.3"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.111.3"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

[[redirects]]
from = "/npmjs/*"
to = "/npmjs/"
status = 200

Build and Deploy Site

In the Netlify console, selecting “Deploy site” will immediately take you to a terminal for your build:.

Animated gif of deploying a site to Netlify, including the terminal read out for the build.

Once the build is finished—this should only take a few seconds–you should now see a “Hero Card” at the top of your screen letting you know the deployment is successful. The Hero Card is the first element that you see in most pages. It allows you to see a quick summary of the page and gives access to the most common/pertinent actions and information. You’ll see that the URL is automatically generated by Netlify. You can update the URL in “Settings.”

Screenshot of successful deploy badge at the top of a deployments screen from within the Netlify admin.

Screenshot of homepage to https://hugo-netlify-example.netlify.com, which is mostly dummy text

Visit the live site.

Now every time you push changes to your hosted git repository, Netlify will rebuild and redeploy your site.

See this blog post for more details about how Netlify handles Hugo versions.

Use Hugo Themes with Netlify

The git clone method for installing themes is not supported by Netlify. If you were to use git clone, it would require you to recursively remove the .git subdirectory from the theme folder and would therefore prevent compatibility with future versions of the theme.

A better approach is to install a theme as a proper git submodule. You can read the GitHub documentation for submodules or those found on Git’s website for more information, but the command is similar to that of git clone:

1
2

cd themes
git submodule add https://github.com/<THEMECREATOR>/<THEMENAME>

It is recommended to only use stable versions of a theme (if it’s versioned) and always check the changelog. This can be done by checking out a specific release within the theme’s directory.

Switch to the theme’s directory and list all available versions:

1
2
3

cd themes/<theme>
git tag
# exit with q

You can checkout a specific version as follows:

1

git checkout tags/<version-name>

You can update a theme to the latest version by executing the following command in the root directory of your project:

1

git submodule update --rebase --remote

Next Steps

You now have a live website served over HTTPS, distributed through CDN, and configured for continuous deployment. Dig deeper into the Netlify documentation:

  1. Using a Custom Domain
  2. Setting up HTTPS on Custom Domains
  3. Redirects and Rewrite Rules

另请参阅

12 - Host on Render

Host on Render

https://gohugo.io/hosting-and-deployment/hosting-on-render/

Host your Hugo site for free with Render’s global CDN, fully-managed SSL and auto deploys from GitHub.

Introduction

Render is a fully-managed cloud platform where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.

Static sites are completely free on Render and include the following:

Assumptions

  • You have an account with GitHub or GitLab.
  • You have completed the Quick Start or have a Hugo website you are ready to deploy and share with the world.
  • You have a Render account. You can sign up at https://render.com/register.

Deployment

You can set up a Hugo site on Render in two quick steps:

  1. Create a new Static Site on Render, and give Render permission to access your GitHub/Gitlab repo.
  2. Use the following values during creation:
FieldValue
Build Commandhugo --gc --minify (or your own build command)
Publish Directorypublic (or your own output directory)

That’s it! Your site will be live on your Render URL (which looks like yoursite.onrender.com) as soon as the build is done.

Continuous Deploys

Now that Render is connected to your repo, it will automatically build and publish your site any time you push to your GitHub/Gitlab.

You can choose to disable auto deploys under the Settings section for your site and deploy it manually from the Render dashboard.

CDN and Cache Invalidation

Render hosts your site on a global, lightning fast CDN which ensures the fastest possible download times for all your users across the globe.

Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site.

Custom Domains

Add your own domains to your site easily using Render’s custom domains guide.

Pull Request Previews

With Pull Request (PR) previews, you can visualize changes introduced in a pull request instead of simply relying on code reviews.

Once enabled, every PR for your site will automatically generate a new static site based on the code in the PR. It will have its own URL, and it will be deleted automatically when the PR is closed.

Read more about Pull Request Previews on Render.

Hugo Themes

Render automatically downloads all Git submodules defined in your Git repo on every build. This way Hugo themes added as submodules work as expected.

Support

Chat with Render developers at https://render.com/chat or email support@render.com if you need help.

另请参阅

13 - Hosting on Azure Static Web Apps

Hosting on Azure Static Web Apps

https://gohugo.io/hosting-and-deployment/hosting-on-azure-static-web-apps/

Learn how to deploy a Hugo application to Azure Static Web Apps.

You can create and deploy a Hugo web application to Azure Static Web Apps. The final result is a new Azure Static Web App with associated GitHub Actions that give you control over how the app is built and published. You’ll learn how to create a Hugo app, set up an Azure Static Web App and deploy the Hugo app to Azure.

Here’s the tutorial on how to Publish a Hugo site to Azure Static Web Apps.

另请参阅

14 - Hugo Deploy

Hugo Deploy

https://gohugo.io/hosting-and-deployment/hugo-deploy/

You can upload your site to GCS, S3, or Azure using the Hugo CLI.

You can use the “hugo deploy” command to upload your site directly to a Google Cloud Storage (GCS) bucket, an AWS S3 bucket, and/or an Azure Storage container.

Assumptions

Create a bucket to deploy to

Create a storage bucket to deploy your site to. If you want your site to be public, be sure to configure the bucket to be publicly readable.

Google Cloud Storage (GCS)

Follow the GCS instructions for how to create a bucket.

AWS S3

Follow the AWS instructions for how to create a bucket.

Azure Storage

Follow the Azure instructions for how to create a storage container.

Configure the deployment

In the configuration file for your site, add a [deployment] section with one or more [[deployment.targets]] section, one for each deployment target. Here’s a detailed example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

[deployment]
# By default, files are uploaded in an arbitrary order.
# Files that match the regular expressions in the "Order" list
# will be uploaded first, in the listed order.
order = [".jpg$", ".gif$"]


[[deployment.targets]]
# An arbitrary name for this target.
name = "mydeployment"
# The Go Cloud Development Kit URL to deploy to. Examples:
# GCS; see https://gocloud.dev/howto/blob/#gcs
# URL = "gs://<Bucket Name>"

# S3; see https://gocloud.dev/howto/blob/#s3
# For S3-compatible endpoints, see https://gocloud.dev/howto/blob/#s3-compatible
# URL = "s3://<Bucket Name>?region=<AWS region>"

# Azure Blob Storage; see https://gocloud.dev/howto/blob/#azure
# URL = "azblob://$web"

# You can use a "prefix=" query parameter to target a subfolder of the bucket:
# URL = "gs://<Bucket Name>?prefix=a/subfolder/"

# If you are using a CloudFront CDN, deploy will invalidate the cache as needed.
cloudFrontDistributionID = <ID>

# Optionally, you can include or exclude specific files.
# See https://godoc.org/github.com/gobwas/glob#Glob for the glob pattern syntax.
# If non-empty, the pattern is matched against the local path.
# All paths are matched against in their filepath.ToSlash form.
# If exclude is non-empty, and a local or remote file's path matches it, that file is not synced.
# If include is non-empty, and a local or remote file's path does not match it, that file is not synced.
# As a result, local files that don't pass the include/exclude filters are not uploaded to remote,
# and remote files that don't pass the include/exclude filters are not deleted.
# include = "**.html" # would only include files with ".html" suffix
# exclude = "**.{jpg, png}" # would exclude files with ".jpg" or ".png" suffix


# [[deployment.matchers]] configure behavior for files that match the Pattern.
# See https://golang.org/pkg/regexp/syntax/ for pattern syntax.
# Pattern searching is stopped on first match.

# Samples:

[[deployment.matchers]]
# Cache static assets for 1 year.
pattern = "^.+\\.(js|css|svg|ttf)$"
cacheControl = "max-age=31536000, no-transform, public"
gzip = true

[[deployment.matchers]]
pattern = "^.+\\.(png|jpg)$"
cacheControl = "max-age=31536000, no-transform, public"
gzip = false

[[deployment.matchers]]
# Set custom content type for /sitemap.xml
pattern = "^sitemap\\.xml$"
contentType = "application/xml"
gzip = true

[[deployment.matchers]]
pattern = "^.+\\.(html|xml|json)$"
gzip = true

Deploy

To deploy to a target:

1

hugo deploy [--target=<target name>, defaults to first target]

Hugo will identify and apply any local changes that need to be reflected to the remote target. You can use --dryRun to see the changes without applying them, or --confirm to be prompted before making changes.

See hugo help deploy for more command-line options.

另请参阅