Building a Static website on Azure with CI-CD pipeline
Tags: azure, html, cloudresumechallenge, githubactions
Published: 2022-11-24 06:44:51

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)] (https://cloudresumechallenge.dev/docs/the-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.

#### <u>HTML & CSS website</u>

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](https://www.themezy.com/free-website-templates/151-ceevee-free-responsive-website-template) and customised the text to put some information about myself, certifications, and previous experience.

#### <u>Static Website</u>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdhta24venobzl2hu5nc.png)

```
PS D:\Learning\CloudResumeChallenge\my_resume> az storage blob upload-batch -s "D:\Learning\CloudResumeChallenge\my_resume\StaticWebsite" -d '$web' --account-name resumechallengeaz1234
```
Deploying the static website using PowerShell also ensured that the website uses HTTPS for security by configuring a CDN.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fakyvk13y5f24o989ld6.png)

#### <u>Azure Function & Cosmos DB</u>

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 :).

#### <u>Source Control & CI-CD pipeline</u>

I have created a [GitHub repository](https://github.com/MicrosoftAZLabs/Cloud-Resume-Challenge) 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.


####  <u>Infrastructure as Code</u>

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](https://mohitjohri-resume.azureedge.net/) to my resume.