Deploy and host Hugo static site on Azure
Tags: azure, git, devops, webdev
Published: 2020-08-13 11:05:03

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwyh8iebx23pw1a9kagv.jpg)

👋 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](https://portal.azure.com/), 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](https://portal.azure.com/) 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

|Name|Target|TTL|Proxy|
|---|---|---|---|
|www|{storage_name}-secondary.z1.web.core.windows.net|Auto|Yes|
|asverify.www|{storage_name}-secondary.z1.web.core.windows.net|Auto|No|

After you are done go back to Azure portal

5. Locate **Custom domain** in the menu pane
6. In domain name write `www.yourdomain.tld` and check indirect verification.
7. 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

```yaml
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](https://github.com/MayMeow/hugo-builder).

Next, add at the bottom to your `.gitlab-ci.yml` stage for deploy to Azure. Script is based on [this one](https://dev.to/alandecastros/gitlab-ci-script-to-deploy-a-azure-static-website-43na). 🙏

```yaml
# 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](https://portal.azure.com/) 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](https://unsplash.com/@todd_diemer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/azure?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)

Originally posted on [TheMayMeow Blog](https://www.themaymeow.com/posts/2020/08/deploy-your-site-to-azure-with-gitlab/)