hugo/docs/content/en/hosting-and-deployment/hosting-on-azure.md

102 lines
5 KiB
Markdown
Raw Normal View History

Squashed 'docs/' changes from 392668f4f..32cb8785e 32cb8785e Fix page weights in content management section (#1896) 11977b96f Make relURL and related functions consistent (#1895) f12180207 Clarify github deployment (#1894) 958877789 Remove remaining references to Highlight.js (#1893) fc487d263 Minor edit to taxonomy page 3b6a224b2 Update theme b28553b62 Change "flavor" to "edition" when referring to builds (#1892) 660e7581c Replaced sudo in OpenBSD with doas (#1891) e3fcdea10 fix a few minor grammatical issues on Firebase docs (#1889) e4c8b30eb update Static Web Apps docs (#1890) da2197c9e Update hosting-on-firebase.md (#1347) 5f2a0c271 Adding deployment guide for Azure Static Web Apps (#1456) 5aaf570cd add Azure Static Web App config to 404 template 35fc54362 add Azure Static Web App config to 404 template d48f67ba1 Update 01-flavors.md 11debae8d Cleaned Use of ref and relref section, added refs of index.md and _in… (#1744) b77604078 docs: Add link to menu entry variables (#1827) 0fa8a6bf0 Misc copy edits (#1887) c27b545ac Improve explanation of safeHTMLAttr's function (#1503) b04a4b32e Make CLI command summaries meaningful (#1886) dbf00a81f Fix a typo in diagrams documentation (#1885) 11f884327 docs: Clarify how to remove draft/future/expired content (#1831) 6dc9e9860 Improve complement function (#1884) 56448a51a Remove erroneous sourcemap desc (#1883) a0d0d2829 Merge branch 'divinerites-patch-1' 10f20cb5e Add a plausible-hugo theme component 9f1413eb5 Minor edits to showcase example 7d78420db fix broken link to Isso Comments 925cb291f Make directory tree consistent with other examples 300fff092 Add link to security policy from getenv.md (#1746) 7b4c517a6 Fix docs menu weights ce35775e0 Update faq.md (#1763) f3fb791a4 Remove dated new-in flags (#1879) b6c634629 Remove deprecated templating langs (#1880) 1b25ca34f Update the findRE and replaceRE functions (#1881) 28757ec73 Add Alora Labs website to showcase (#1494) e3c4bc4e7 Remove unimplemented "ugly" property 86afd84ff Update editors.md (#1878) 44c093911 Add urlquery function docs (#1633) 16a8c3548 Update links to installation page (#1876) 9e357f078 Add missing sections to BSD installation page (#1875) 1b1291634 Promote "Installation" to a section 9dd51235b Add detail to description of .Plain page variable (#1870) d333d0287 Minor markdown linting fix and URL updates (#1873) d57c8aa50 Remove extraneous apostrophe (#1871) 8c25cfc5c Update index.md 09fea41e0 Add lang to fenced code block 35b904798 Add small documentation about .Site.Social.twitter variable (#1854) 672042f89 Consolidate site configuration dfd4dd873 Add help.ampio.com showcase. (#1863) e8d0e7bdf Include link to internal templates code (#1794) 7db6f0c01 Add example to split function (#1867) be87dba80 Clarify split function docs (#1792) a079193f1 Fix typo on data templates page b234c70ee Fix data templates page (#1855) 074232b45 Update front-matter.md (#1856) 711c8fa80 Added missing default value (#1862) 034762882 Fixed some grammar issues and typos (#1865) 764574a4d Fix spelling error 2698f2d44 update URLs to prevent redirects (#1864) 68f05fdc8 Fenced code blocks should have a language specified (#1861) 24393315b GitHub Workflows security hardening (#1859) 3eeee13bf Markdown formatting: Add Fenced code block languages (#1858) e152cdf1f netlify: Hugo 0.105.0 4c7fc9f7e Merge branch 'tempv0.105.0' d16710afc Change anchor reference to use relref function calls (#1853) f52af8e4a tpl/encoding: Add noHTMLEscape option to jsonify eca0046c4 Update hosting-on-keycdn docs (#1852) ffbe17a48 Add note for rsync deploy command (#1415) c482133f1 docs: Update quick start to clarify the need of extended version (#1828) 1e3b33804 use correct URL for Google Search console verification (#1851) dac034f63 Markdown and formatting fixes (#1850) 43f177e3c Fix LiveReload in quick-start (#1739) f78deaa5f Add link for ''Hugo Shortcode Syntax Highlighting' VS Code extension (#1765) 08087ecd7 Remove some hidden pages (#1848) b6cb5ae48 Markdown linting fixes (#1846) 527ec5941 Update hugo.md (#1742) 83e8f2168 Clarify that a shortcode with .Inner must be closed (#1785) 4193f4445 Add Super Linter GitHub Action (#1845) fd91bfe1a Formatting and grammar fixes (#1844) ab5a49c49 Create codeql-analysis GitHub Action (#1812) 63b3e082e Add tutorial on using fusejs to search examples (#1756) 54c253ab0 Note that Google Universal Analytics are deprecated (#1770) 385fa77c6 Update articles.toml (#1840) 5e336bd26 Replace awkward wording (ESL?) (#1842) 2446ad349 Added Introduction to Hugo tutorial/video series (#1736) 7b21b2e76 Don't use self-closing generator tag ef73712ff Image processing. available methods: add method 'Colors' (#1837) 018f83bbe [comment platform] - add new alternative (#1751) 5636c208b Grammar and spelling fixes (#1836) 3f2e26f77 Change link of repojacking vulnerable link - JekyllToHugo (#1834) 301379fc3 fix: use shorter image URL to make it easier to read (#1835) de5fa7b30 Update search.md to include Pagefind (#1826) e9d72bcda Breadcrumb example: add basic accessibility (#1832) 6cffff87a netlify: Hugo 0.104.3 892360f61 Update output-formats.md 09a7a46ae Remove my defunct and little used migrator (#1824) 347434cca netlify: Hugo 0.104.2 f8c721162 Update postcss.md c2baf7155 netlify: Hugo 0.104.1 05d1192cd Update diagrams.md (#1823) 3c43a8bbe netlify: Hugo 0.104.0 57973b334 Merge branch 'tempv0.104.0' da775a36d docs: Regen docs helper ae48b5901 docs: Regenerate CLI docs af4a823b1 resources/images: Add $image.Colors 8e3f9ca64 Remove outdated IE conditional comments example (#1821) d1a84701b fix typo in template introduction (#1820) c0c7339e0 Update internal.md 17aefc515 Remove the recommendation about where to put the GA tempalte 263297236 Adjust GA template instructions 1cc265d99 Update the GA template usage section e11968338 config/security: Allow proxy variables in subcommands 9218ab993 netlify: Hugo 0.103.1 0b0e890d1 Update markdownify and RenderString documentation (#1818) 50f5d4776 Fix internal link (#1817) 6beb443c5 netlify: Hugo 0.103.0 14b5af248 Merge branch 'tempv0.103.0' 548e7aa62 server: Add 404 support 3a20aa0ba Update theme git-subtree-dir: docs git-subtree-split: 32cb8785ea74d5b82f2e2bea79d059cab497902a
2022-11-17 10:14:29 -05:00
---
title: Host on Azure Static Web Apps
linktitle: Host on Azure Static Web Apps
description: Deploy Hugo to Azure Static Web Apps and automate the whole process with Github Action Workflow
date: 2021-03-12
publishdate: 2021-03-12
categories: [hosting and deployment]
keywords: [azure,git,deployment,hosting]
authors: [Aaron Powell]
menu:
docs:
parent: "hosting-and-deployment"
weight: 10
weight: 10
sections_weight: 10
toc: true
---
[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][installgit].
2. You have a GitHub account. [Signing up][ghsignup] for GitHub is free.
3. You have an Azure account. You can sign up for a [Free Trail][azuretrial].
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][azureportal]
2. Click **Create a Resource**
3. Search for **Static Web Apps**
4. Click **Static Web Apps**
5. Click **Create**
![Create in Azure Portal](/images/hosting-and-deployment/hosting-on-azure/create-in-portal.png)
6. For **Subscription**, accept the subscription that is listed or select a new one from the drop-down list.
7. In _Resource group_, select **New**. In _New resource group name_, enter **hugo-static-app** and select **OK**.
8. Next, a name for your app in the **Name** box. Valid characters include `a-z`, `A-Z`, `0-9` and `-`.
9. For _Region_, select an available region close to you.
10. For _SKU_, select **Free**.
![Basic app details](/images/hosting-and-deployment/hosting-on-azure/basic-app-details.png)
11. Click the **Sign in with GitHub** button.
12. Select the **Organization** under which your repo exists.
13. Select the Hugo app you wish to deploy as the _Repository_ .
14. For the _Branch_ select the branch you want to deploy (eg: **main**).
15. 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
16. 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][swaconfig] 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.
```yaml
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][domains] for more information.
[Azure Static Web Apps]: https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-26008-aapowell
[GitHub Actions]: https://docs.github.com/en/actions
[Azure DevOps]: https://docs.microsoft.com/azure/static-web-apps/publish-devops?WT.mc_id=javascript-26008-aapowell
[ghsignup]: https://github.com/join
[installgit]: https://git-scm.com/downloads
[azuretrial]: https://azure.microsoft.com/free/?WT.mc_id=javascript-26008-aapowell
[azureportal]: https://portal.azure.com/
[swaconfig]: https://docs.microsoft.com/azure/static-web-apps/github-actions-workflow?WT.mc_id=javascript-26008-aapowell
[domains]: https://docs.microsoft.com/azure/static-web-apps/custom-domain?WT.mc_id=javascript-26008-aapowell
[Quick Start]: /getting-started/quick-start/