Skip to main content
  1. Posts/

Deploy Your Site to Azure with GitLab

·714 words·4 mins·
tutorials azure gitlab hugo
May Meow
Author
May Meow
MayMeow is a developer and cybersecurity enthusiast with a passion for cryptography, DevSecOps, and open-source contributions. They enjoy creating tools that strengthen digital security, blending creativity and technology to innovate in fields like PHP and .NET. Always exploring new frontiers in tech, MayMeow is dedicated to safeguarding the digital landscape through their work.
Table of Contents
selfhosted - This article is part of a series.
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
#

  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
NameTargetTTLProxy
www{storage_name}-secondary.z1.web.core.windows.netAutoYes
asverify.www{storage_name}-secondary.z1.web.core.windows.netAutoNo

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

Reply by Email
selfhosted - This article is part of a series.
Part 6: This Article

Related

Settig Up SSH Keys for Ubuntu
·681 words·4 mins
linux ubuntu security tutorials
Initial Server Setup on Cloud Services
·398 words·2 mins
Administration Fundamentals linux ubunutu tutorial
ハローワールド
·64 words·1 min
blog japanese article