Deploy and host Hugo static site on Azure

👋 Hi! I wanted to host this site on azure blob storage and I found this solution. It's created with Hugo. I'm using Gitlab CI to deploy it to the server.

🌊 Configure static site hosting on azure

1. So First thing you need is to create an Azure account. When you are done then go to Azure Portal, and create the storage account
2. Locate your storage account
3. On the menu pane (left) find "Static website" and select Enabled to enable it.
4. Configure paths for Index document for. example index.html and for Error document 404.html. Click Save, that's it, you have configured your Azure storage to server static websites.

🕸 Custom Website address

The next thing you will need is to configure CNAME records in case you want to use your domain. 💡 Azure will serve your page under HTTP, but I wanted to use HTTPS so I using Cloudflare DNS which proxying data to azure blob storage. In this case, you need to verify the domain indirectly (not proxied). So Let,s create 2 new CNAME records.

1. Again go to Azure Portal and locate your storage account.
2. In the menu pane under the Settings section find properties.
3. Scroll down and find Static Website section. Copy one of the Primary or Secondary endpoints.
4. Configure CNAME records as following

After you are done go back to Azure portal

1. Locate Custom domain in the menu pane
2. In domain name write www.yourdomain.tld and check indirect verification.
3. Click Save

🛳 Deploying your site

As I wrote above I'm using Hugo to build this site so the following is an example of how to deploy the site to azure. After some changes can be used for any site.

Ok. If you have your site create .gitlab-ci.yml

Add there build section. This is example for hugo. Exact script I'm using on this site

image: maymeow/hugo-builder # or any other hugo image you trust

stages:
  - build
  - deploy

# Build site with hugo and upload cache and artifacts
build: # change name to pages if you wat to use gitlab pages
  stage: build
  cache:
    key: themaymeow-com-build
    paths:
      - public
    policy: push
  script:
    - hugo --config ./production.config.toml --enableGitInfo
  artifacts:
    expire_in: 1 week
    paths:
      - public
  only:
    - master
  # Uncomment if your GitLab runner need tags and change them how you need
  # tags:
  #   - docker
  #   - digitalocean

Repo for the Hugo builder image is on my Github Account.

Next, add at the bottom to your .gitlab-ci.yml stage for deploy to Azure. Script is based on this one. 🙏

# deploying site to azure storage
deploy to azure:
  stage: deploy
  image: microsoft/azure-cli
  cache:
    key: themaymeow-com-build
    paths:
      - public
    policy: pull
  dependencies:
    - pages
  script:
    - az storage blob delete-batch -s "\$web" --connection-string $AZ_STORAGE_CONNECTION_STRING
    # Change public to required folder name
    - az storage blob upload-batch -d "\$web" -s public --connection-string $AZ_STORAGE_CONNECTION_STRING
  only:
    - master
  # tags:
  #   - docker
  #   - digitalocean

This stage will be the same for any other static site. One thing you have to change there is the folder where your site is.

Next, you need to obtain Azure connection string for your storage account and set it to AZ_STORAGE_CONNECTION_STRING for CI/CD on your GitLab.

⚙ Setting up CI/CD

1. One more time go to Azure Portal and locate your storage account.
2. Find Access keys on menu pane
3. Copy one of your connection strings
4. Go to your Gitlab instance and locate your project
5. On menu pane open Settings then click to CI/CD
6. Find Variables and click Expand
7. Click Add Variable
8. In key field write AZ_STORAGE_CONNECTION_STRING and to value field paste your connection string
9. (Optional) Check Protect Variable if you want that variable can be used only with protected branches (master is protected by default)
10. Click Add Variable

Ok this is the configuration for Ci / CD so go back to your editor.

1. 🌠 Commit
2. ⬆ Push changes to your server
3. ⏱ Wait some time until GitLab will do its job
4. 🎉 Enjoy

So that's it. This is how you can deploy your page to Azure. If you have some questions you can send me an email (address is on the home page).

See you later 👋.

Photo by Todd Diemer on Unsplash

Originally posted on TheMayMeow Blog