All Articles

Deploy Hugo Static Website Using Azure Pipelines

Goodbye wordpress and hello Hugo, finaly switched over to static Website and ligthspeed! Why use static website?

Improved performance, security and ease of use are just a few of the reasons static site generators are so appealing. The purpose of website generators is to render content into HTML files.

Today this conten is on Azure blobs and Static website, so I will show you how I managed to get this site up and running.

Setup Static Website on Azure
  1. Crete an Storage account where your contes is gona live on.
  2. Open your Storage account and Static Website

Provide your domain where your blog is using.

  1. Enable Static Website, type index.html and 404.html and click save.

Now our blobs will create an special folder named $web, here will our contens live.

Setup Azure Pipelines
  1. Go to Azure DevOps login or create an free account.
  2. Create new project
  3. Choose a name and what visibility your project should be. Congratulations, you have an empty project!
  4. You should decide where you want to store your raw data, you could have them on GitHub or Azure Repos. I did choose Azure Repos for my project. Do not uploade your public folder, this is bacause our pipeline will create one for us later on.
  5. Go to Pipelines and releases.
  6. There is no Pipelines created yet, so go ahead and create an new. Click New Pipeline.
  7. Next you choose Empty job
  8. Next you could change name on the stage name to something different.
  9. Click on Add an artifact
  10. Choose where your repo is, here we are using Azure repos
  11. Next we will add the task it self, click view stage tasks.
  12. At this stage we can see our stage is pretty boring, so press the + Add
  13. Go to the Markedplace and search after Hugo and install the job, after its installed add it to your stage.
  14. Add your sorce and destination, an important note here is in your source you need to add $(System.DefaultWorkingDirectory)/_My blog and in the destination you add $(System.DefaultWorkingDirectory)/_My blog\publish
  15. Next we will add an job for uploade our contents to Azure blob storage. Press the + Add sign and search after Azure File Copy
  16. Now open our newly created job for Azure File Copy and choose the source and add \public at the end. And then add your blob storage where you want the site to be on. And the last step is to add $web under conteinar name and click save.
  17. You should have two jobs like this:
  18. You should have something like this now in your pipeline:
  19. You could try to run your pipeline by deploying it and after it have run all the mark should be green
  20. But I would have this pipeline to run automatic when new files is added to my repo, so lets add an Continuous deployment trigger to our pipeline. Go back to your pipeline and press the lighting icone.
  21. Enable Continuous deployment trigger: Next time you update your repo our pipeline will generete contents for our blog!