If you already have experience hosting hugo static sites on the internet, you can skip this documentation. If you don’t, I’d advise following these steps correctly. Deployments often leads to stupid errors that one feels shouldn’t occur but often do.
Sugo theme uses pagefind which a node package to index the files and make the search function work. If you don’t want the search feature, the deployment process is a bit easier.
Go to Actions→ New Workflow and search for hugo. Github automatically generates a hugo.yml at your-hugo-site/.github/workflows/hugo.yml
If you have disabled the search option for your hugo blog. Leave the hugo yml as it is. However, keep in mind that there is a HUGO_VERSION env in hugo.yml. Update its value to the same value as in your hugo.toml which is probably 0.146.0.
If you have enabled the search option for your hugo blog. Replace the hugo.yml with the following:
# Sample workflow for building and deploying a Hugo site to GitHub Pagesname: Deploy Hugo site to Pageson:
push:
branches: ["master"]
workflow_dispatch:
permissions:
contents: readpages: writeid-token: writeconcurrency:
group: "pages"cancel-in-progress: falsedefaults:
run:
shell: bashjobs:
build:
runs-on: ubuntu-latestenv:
HUGO_VERSION: 0.146.0steps:
- name: Install Hugo CLIrun: | 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 Sassrun: sudo snap install dart-sass - name: Checkoutuses: actions/checkout@v4with:
submodules: recursive - name: Setup Pagesid: pagesuses: actions/configure-pages@v5 - name: Setup Node.jsuses: actions/setup-node@v4with:
node-version: "20"cache: "npm" - name: Install Node.js dependenciesrun: npm ci - name: Build with Hugoenv:
HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cacheHUGO_ENVIRONMENT: productionrun: | hugo --gc --minify \
--baseURL "${{ steps.pages.outputs.base_url }}/" - name: Build search index with Pagefindrun: npx -y pagefind --site public --output-path public/pagefind - name: Upload artifactuses: actions/upload-pages-artifact@v3with:
path: ./publicdeploy:
environment:
name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}runs-on: ubuntu-latestneeds: buildsteps:
- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4
6. Now when you go to the Actions section of your github repo, your hugo site is probably building. If it is not, you can build manually.
Note: You may sometimes encounter errors in deployment if there is no package-lock.json file in your repo. If there is no such file, just enter npm install and it will appear automatically.
Vercel
Vercel does have a hugo preset but it is recommended that you add a little vercel.json at the root of your site.
As you can see, the vercel.json refers to the package.json file. You have already encountered it if you followed this guide or set up the search feature. If you haven’t, it is as the root of the Sugo theme. Move it thence to the root of your hugo site. It should look something like this:
Build settings are auto-detected from netlify.toml
Click Deploy site
Via CLI:
BASH
1
2
3
npm i -g netlify-cli
netlify deploy --prod
Cloudflare Pages
Cloudeflare pages noawadays require a wrangler command. Just using the build command will lead to errors. If you want to host your site on cloudeflare pages, add a wrangler.jsonc at the root of your site.