☁️ Hosting

Sites built with Hugo Blox can be deployed to almost any provider due to the static nature of the generated website.

Have you considered making a professional, memorable impression on your visitors with your very own personalized domain name? Get a personalized domain name and learn how to set it up.

If you create your site using the tutorial, it will be automatically deployed to the recommended provider for small sites, GitHub Pages.

Let’s take a look at GitHub Pages and some of the alternatives below.

Netlify

Users recommend deploying a site with Netlify for the most convenient and scalable experience.

Why should I consider Netlify over GitHub Pages? GitHub Pages is convenient as it is built-in to GitHub. However, GitHub Pages is not a dedicated hosting provider, so it has very limited functionality, whereas Netlify empowers you with more options and enables you to scale your site to perform well under high-traffic.

Netlify is free and provides ultra-fast global access, automated deployment when you add content, and automatic HTTPS security. What’s more, Netlify facilitates account management for the CMS, contact forms, private pages, and deploy previews out-of-the-box.

To deploy with Netlify, either:

Click the link on the templates page to edit the site (with Netlify)
Or, login to Netlify and import your site from GitHub (or drag-and-drop the contents of Hugo’s public folder from your computer)

GitHub Pages

Go to Github and register for an account if you have not done so already. Github encourage using your real name as your username, and this can help your Github URL (which you will be assigned later) to have a professional appearance.

GitHub can execute a workflow to automatically build your site and deploy it to GitHub Pages everytime you update content in your GitHub repository.

Create a file in your GitHub repository named .github/workflows/publish.yml and containing the following content:

name: Deploy website to GitHub Pages

env:
  WC_HUGO_VERSION: '0.119.0'

on:
  # Trigger the workflow every time you push to the `main` branch
  push:
    branches: ["main"]
  # Allows you to run this workflow manually from the Actions tab on GitHub.
  workflow_dispatch:

# Provide permission to clone the repo and deploy it to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build website
  build:
    if: github.repository_owner != 'HugoBlox'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          # Fetch history for Hugo's .GitInfo and .Lastmod
          fetch-depth: 0
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: ${{ env.WC_HUGO_VERSION }}
          extended: true
      - uses: actions/cache@v3
        with:
          path: /tmp/hugo_cache_runner/
          key: ${{ runner.os }}-hugomod-${{ hashFiles('**/go.mod') }}
          restore-keys: |
            ${{ runner.os }}-hugomod-
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Build with Hugo
        env:
          HUGO_ENVIRONMENT: production
        run: |
          echo "Hugo Cache Dir: $(hugo config | grep cachedir)"
          hugo --minify --baseURL "${{ steps.pages.outputs.base_url }}/"
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  # Deploy website to GitHub Pages hosting
  deploy:
    if: github.repository_owner != 'HugoBlox'
    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

Don’t forget to rename your baseURL in config/_defaults/hugo.yaml with the value https://<USERNAME>.github.io for your user repository or https://<USERNAME>.github.io/<REPOSITORY_NAME> for a project repository.

Once Git has finished uploading your site to GitHub, you can open your new https://<USERNAME>.github.io website in your browser, substituting with your GitHub username.

Questions? Learn more about this GitHub Action for Hugo.

Cloudflare Pages

Login to the Cloudflare dashboard and select your account
In Account Home, select Workers & Pages > Create application > Pages > Connect to Git
Select your site’s GitHub repository, and in the Setup builds and deployments section, provide the following configuration:

Configuration	Value
Production branch	`main`
Build command	`hugo --gc --minify`
Build directory	`public`

Learn more in Cloudflare’s tutorial.

Vercel

Go to the Vercel Dashboard and import your site’s GitHub repository
Configure the project by selecting Hugo as the Framework Preset
Toggle the Override buttons for the Build Command and Install Command to override them with the following:
1. Set the Build Command to hugo --gc --minify
2. Set the Install Command to yum install golang

S3, GCS, and Azure

By uploading the contents of your public folder to Amazon S3, Google GCS, or Microsoft Azure, your site can be served with dynamic scaling to almost unlimited traffic.

This approach has the benefit of being one of the cheapest, and most reliable hosting options available as you only pay for what you use.

Hugo comes with built-in commands to help automate deployment to these providers.

FTP

Use an FTP client to upload the contents of your public folder to a web host. This may be especially convenient for academic students and staff who are provided with university hosting.

Schedule publication of upcoming content

Learn how to schedule daily builds to publish upcoming content, such as blog posts and courses, according to their dates.