Introduction

This is part 2 of the series on publishing a Hugo Website on Azure.

Part 1 - Building your Hugo Website Locally

Part 2 - Publishing to Github and Azure SWA

Version Control to Github

  • Now that the first post is ready, I want to version control my website. For the sake of this example I am using github, but you can use any.
  • I am going to use VSCode with some extentions.
  • The next steps assume, that you’ve logged onto Github and Azure from VScode or atleast on the browser as the sync process will initiate the authentications.
  • The following screenshots show how to publish this to github. alt text
  • Depending on your use case, you could choose to use Private or Public Repository. alt text alt text alt text
  • Once the first commit has been made to Github, we want this site now published to Azure Static Websites.

Publishing to Azure

  • The following screenshots show how to publish this to Azure. alt text alt text
  • Depending on your use case, choose between Free and Standard. If you wish to put this website behind an auth provider like Entra ID or Github ( Internal Consumption) then choose Standard alt text
  • Choose Hugo alt text alt text
  • In a matter of minutes, your website should now be completely published to Azure alt text
  • There should be a new folder within your repository called .github/workflows. This stores the workflow that publishes your repository (upon any change) to Azure SWA. alt text
  • The actions tab will always display all the latest runs of the workflow alt text
  • Open Azure Static Webpages and browse to your new website and click on the URL displayed. alt text
  • Welcome to your new and shiny Hugo Website running on Azure alt text
  • Let’s confirm the workflow is working properly. Let’s create a new post as shown below alt text
  • Let’s edit the post alt text
  • I am going to commit the changes via the terminal or via VSCode using Push & Sync alt text
  • Workflow on Github kicked off and ran properly alt text
  • And our second post is live now on our website alt text
  • You can always tweak if your posts should be in draft state and not be visible from both hugo.yaml and your blog post config itself.

What’s next?

  • Start tweaking your Hugo.yaml to get
    • Search
    • Navigation - add an about me page or projects
    • Fix Base URL
    • Or try a new theme all together :)
  • Well if you would like to customize a little bit, go and get yourself a domain name.
  • Within your domain registrar, set up a DNS CName pointed to your new SWA.
  • Free version of SWA allows for custom domain name - so its completely free to host and publish your website. You only pay for your Annual Domain Registration.