Deploy Your Site to Azure with GitLab

Table of Contents

selfhosted - This article is part of a series.

Part 3: How to Host Static Websites With Amazon S3 and Cloudflare

Part 4: 🐋 How to Run Wordpress in Docker

Part 5: Static Sites With Minio and S3www

Part 6: This Article

👋 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
#

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
Locate your storage account
On the menu pane (left) find “Static website” and select Enabled to enable it.
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.

Again go to Azure Portal and locate your storage account.
In the menu pane under the Settings section find properties.
Scroll down and find Static Website section. Copy one of the Primary or Secondary endpoints.
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

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

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