--- name: azion-build-with-hugo description: >- Create a Hugo site from an Azion template or with the Azion CLI, and deploy it to an Azion domain. --- # Build with Hugo You can deploy a Hugo site on Azion from a template in Azion Console or with the [Azion CLI](/en/documentation/devtools/cli/). Both routes leave the site running on Azion and answering on an Azion domain. Azion serves a Hugo site as a static application. The build writes the site to `./public`, and the deploy uploads that folder to a storage bucket that an [application](/en/documentation/platform/applications/) serves. For the full list of frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- Choose your route here. The prerequisites and the deploy procedure below change with it. ## Prerequisites - An Azion account. To create one, refer to [Create an account](/en/documentation/fundamentals/creating-account/). **Console** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. The template form connects it when it asks for it. **CLI** - The Azion CLI, installed and logged in. To set it up, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, and npm. The Hugo Boilerplate installs Hugo as an npm dependency, so you do not install Hugo separately. - A terminal and a code editor. --- ## Hugo templates Azion deploys a Hugo template as a ready project. The Console route starts from one of these templates, and the CLI offers the same three: | Template | Use | | ------------------------------------------------------------------------------------------------- | -------------------- | | [Hugo Boilerplate](/en/documentation/guides/application-development/frameworks/hugo-boilerplate/) | Starter project | | Influencer Hugo | Product showcase | | Vex Hugo | Product landing page | The Hugo Boilerplate has a guide of its own, linked in the table. Influencer Hugo and Vex Hugo share one guide: [Deploy an E-commerce with Hugo Templates](/en/documentation/guides/application-development/frameworks/hugo-ecommerce-collection/). For more information on templates, refer to [Azion Marketplace](/en/documentation/platform/marketplace/). --- ## Deploy the site Both routes build the Hugo project and create the resources that serve it on Azion. Follow the panel of your route: **Console** To deploy a Hugo template from Azion Console: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Search for Hugo** In **Search by name, framework, or keyword**, enter `Hugo`. 3. **Select the Hugo template you want** 4. **Connect your GitHub account** When the form shows **GitHub Connection**, select **Connect with GitHub** and install the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/). 5. **Select a Git Scope** In **Git Scope**, select the scope for the template. 6. **Fill in the settings the template asks for** 7. **Select Deploy** The deploy page shows the **Deploy Log** while the project builds. On success, it shows **Successfully created!**, the domain URL, and a **Manage** button that opens the application. **CLI** Run `azion init` with a project name. In the first picker, select *Hugo*; in the second, select a template: ```bash azion init --name my-site --auto -y ``` With `-y`, the command installs the dependencies. With `--auto`, it does not ask about a local development server or a deploy. For the questions it asks without these options, refer to [Azion CLI init](/en/documentation/devtools/cli/init/). With the *Hugo Boilerplate* template, the output is: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Hugo ? Choose a template: [Use arrows to move, type to filter] > Hugo Boilerplate Influencer Hugo Vex Hugo ? Choose a template: Hugo Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies added 116 packages, and audited 117 packages in 11s 42 packages are looking for funding run `npm fund` for details 13 vulnerabilities (6 moderate, 3 high, 4 critical) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: hugo [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-site was initialized successfully ``` The project lands in a `my-site` folder. Its `azion.config.cjs` sets the `hugo` preset and uploads `./public` to a storage bucket that workloads can only read. For every setting in that file, refer to [azion.config.js](/en/documentation/devtools/cli/azion-config-js/). To build the site, run `azion build` from the project folder: ```bash cd my-site azion build ``` Azion Bundler runs the Hugo build with the `hugo` preset, using the Hugo copy the template installed, and the site lands in `public`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset hugo … [Azion] [Build] › ℹ info Using preset: hugo [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Hugo] › ℹ info Start building sites … [Hugo] › ℹ info hugo v0.122.0 [Hugo] › ℹ info [Hugo] › ℹ info | EN -------------------+----- Pages | 10 Paginator pages | 0 Non-page files | 0 Static files | 1 Processed images | 0 Aliases | 1 Sitemaps | 1 Cleaned | 0 Total in 32 ms [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "hugo" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` To deploy the site, run `azion deploy` from the project folder: ```bash azion deploy ``` The deploy uploads the project and opens the Console page that tracks it, and it prints that page's URL in case no browser opens. At the end, it prints the URL of the site's domain. For the full output and every flag, refer to [Azion CLI deploy](/en/documentation/devtools/cli/deploy/). To preview the site on your machine first, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). For a Hugo project you already have, run `azion link` in its folder and select the Hugo preset, as [Azion CLI link](/en/documentation/devtools/cli/link-command/) describes. --- ## Check the site The deploy gives you the URL of the site's Azion domain, in the form `https://xxxxxxxxxx.map.azionedge.net`. The Console deploy page shows it, and `azion deploy` prints it on completion. Open that URL in a browser to see the Hugo site. The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that has not received the site yet answers with a `404` page that reads `There's nothing here yet`. If you get that page, wait and request the URL again. --- ## Next steps - [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): See every framework and preset Azion builds. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Hugo Boilerplate](/en/documentation/guides/application-development/frameworks/hugo-boilerplate.md): Deploy the Hugo starter template and manage the application it creates. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules the Hugo preset generates.