DEV Community

Cover image for Building a Static website on Azure with CI-CD pipeline
Mohit
Mohit

Posted on

Building a Static website on Azure with CI-CD pipeline

Lately, I have cleared some of the Azure certifications, but I feel my knowledge of Azure is more theoretical. Being in a project management role, I get less time to be around the coding and scripting aspect of technology, so I wanted to get my hands dirty. After seeing this challenge on LinkedIn, I felt there was no better way to sharpen my skills in DevOps while working on a real project.

It is recommended that participants have at least the AZ-900 Microsoft certification before taking the challenge. Azure Fundamentals Certification (or another,more advanced Azure cert—your choice—to set a knowledge baseline. Additional rules can be seen in the Cloud Resume Challenge (Azure).

So I create the static site, which is hosted on Microsoft Azure, and leverage the following services:

  • Azure Blob Storage
  • Content Delivery Network
  • Azure Cosmos DB
  • Azure Functions
  • GitHub Actions for CI/CD
  • Terraform for IaC

I have mainly used this challenge as a guide for myself and made some modifications along the way. E.g., instead of using Python for the Azure Function, I have used C#. I also used styleshout's HTML template. 

Below is a brief description of my journey in order to complete this cloud resume challenge.

HTML & CSS website

In order to build a website, I brushed up on my skills in HTML and CSS by going through a course from Brad Hussey on Udemy and also built a basic website on my own; it didn’t look very impressive, but it worked just fine. So instead of using that plain, simple design, I got the resume HTML template from this website and customised the text to put some information about myself, certifications, and previous experience.

Static Website

The HTML resume was then deployed online as an Azure Storage static website on Azure Blob Storage, which I created using the Azure Portal (later using Terraform to automate).

Image description

PS D:\Learning\CloudResumeChallenge\my_resume> az storage blob upload-batch -s "D:\Learning\CloudResumeChallenge\my_resume\StaticWebsite" -d '$web' --account-name resumechallengeaz1234
Enter fullscreen mode Exit fullscreen mode

Deploying the static website using PowerShell also ensured that the website uses HTTPS for security by configuring a CDN.

Image description

Azure Function & Cosmos DB

The resume webpage also includes a visitor counter that displays how many people have accessed the site. I wrote an Azure function with an HTTP trigger to make this happen.
I created the CosmosDB database using Core (SQL) as the API. I created the container to store my one record of the visitor count. The record has an id equal to "1" and a visitorCount property, which will be read and updated by an Azure function. Setting up CosmosDB was the most difficult part of this challenge because I was unfamiliar with this service, and it took a long time just to get CosmosDB to talk to the Azure function, but it finally worked after much struggle and googling :).

Source Control & CI-CD pipeline

I have created a GitHub repository for my code and created GitHub Actions such that when I push new website code, the Azure Storage blob, the Azure Function, etc. automatically get updated.

Infrastructure as Code

Lastly, as I created all the Azure resources—the static website (Blog Storage, CDN), the Azure Function, and the CosmosDB—manually, by clicking around in the Azure console, I automated the infrastructure creation using Terraform.

In the end

That completes the Azure Resume Challenge! I found this to be a fun challenge that forced me to try a few different things that I had not worked with before, and I was surprised by how many services were necessary. It was good to use some PowerShell and Terraform, which I feel I will continue to use in the future.

Here is the link to my resume.

Top comments (1)