Add Custom Domain to Azure Static Web App

Overview

If you have an Azure Static Web App created and want to use a custom domain on a domain registered hosted outside of Azure, follow these steps. For example, here is how I created https://bullseyeconsulting.com using some of the screen shots from Add Custom Subdomain to Azure Static Web App. These have the light background. Azure grants up to two custom domains per static web app including an SSL certificate which means the site works using the encrypted HTTPS protocol. It is very easy and very free, an amazing value. Prerequisites

1. Azure Static Web Site hosted in your Azure account
2. The ability to update DNS records via your domain’s DNS server including TXT records.

Process

1. Navigate to your SWA in Azure > Custom domains > Add – Custom domain on other DNS

   

2. Enter the domain name without any punctuation except the period, e.g., bullseyeconsulting.com > Next

   

3. You must use TXT for an apex domain. Click Generate code

   

4. Click the Copy button to copy the TXT value to your clipboard.

   

5. Paste this into a TXT record in your DNS host.

   

6. After the status changes to Validated, click Close.

7. In the Action column, click Add a CNAME, ALIAS or A record.

8. As noted, a static IP address via an A record does not allow global distribution of static assets. Using CNAME is recommended.

9. Click the button to copy the url value.

   

10. Return to your DNS Server editor and create a CNAME record with this value for the @ entry for your domain. Your UX may be different from ZoneEdit’s Streamlined Editor:

    

11. You may want to take this opportunity to redirect www to your domain. I do occasionlly use ctrl-enter to surround the get to www.textInTheBrowserAddressBar.com to show up and feel that the redirect is worth it. There may be some old links pointing to www as well. Here is how it looks in Enom for a different site.

    

12. Optional: from the Custom domains page, set the domain as the default by selecting the row your custom domain and clicking “Set default”

    

To test, click the Overview blade of your SWA and then the Browse button.

Update BaseURL in hugo toml File

If this site’s content is generated by Hugo, update the baseurl in the hugo.toml or for older Hugo sites, update the config.toml file.

Reference: Set up a custom domain in Azure Static Web Apps