DEV Community

Brian Meinert
Brian Meinert

Posted on

Azure Hosted CV Website

****Services Used

  • Static Web container in an Azure storage account
  • Azure Front Door/CDN
  • Azure DNS zone
  • Service Principal
  • GitHub

Azure Website Overview

My personal CV website hosted on Azure, was my first major Azure project I dove into after obtaining my Az900 and Az 104 certifications. I thought this was a great way to learn and get hands on experience to use different services, both inside and outside of Azure in a real working project. This project presented many fun challenges for me, and also a ton of fun and excitement along the way. This website will be my personal site, that will continuously be updated and maintained throughout my journey. You can view my website here, and also check out the repository for my project here.

Part 1: Creating the website

The first steps in creating my project, was building the website itself. To save myself time on a project, and to get the clean looking site that I desired, I used a free template from CeeVee. I have had experience with web development prior, as that was my original learning path when I decided I wanted to have a career in the IT world. Having that initial experience helped me a lot with this part of the project, because I understood the syntax and what every line of HTML, CSS, and JavaScript was doing, to help me manipulate and change the website around to the way I wanted. Now a deep understanding of web development is not required to do this project if you wanted to create your own personal site as well, but I do recommend at least having a base line undersanding of HTML and CSS.

Part 2: The Azure Side

Once I had my website looking the way I wanted, it was time to get started with the Azure side of the project. The first step on azure was to create a storage account with a static hosting web container to host my website from. Once that was created, I uploaded the project into the static web container. If you need help getting started with setting up a static web container, follow along with the Microsoft Documentation for help.

Now that the storage account had been created with the files uploaded, it was time to get the DNS, endpoint, and CDN set up. This was my first real challenge that I encountered in the project as I had never set up any of these services outside of a lab environment. After a lot of googling, reading through Microsoft docs, and trial and error, I had a working DNS and CDN service set up, and able to access my website through my own domain name. I wrote another blog post on how to go through the entire process on LinkedIn that you can view here.

Part 3: GitHub Actions workflow

With the website complete and the Azure side set up, it was time to implement GitHub Actions workflow to continuously update the website any time that I pushed an updated change in my code to my repository. This presented me with challenge number 2 of the project, as well as probably my most challenging part of the project. The first thing I had to do was create a service principal in Azure. With the service principal created with the proper permissions, the next step was to create a repository secret and begin to add the workflow in the actions. Once I had the workflow created, it was time to test. After the 7th failed attempt and modifying the workflow, I finally got the green checkmark. If you need help with setting up the workflow, the Microsoft docs was a major help for me.  

Summary

With the project complete and everything still working great to this day, I'm very happy with the project and how it came along. I learned a ton in this project and really had a lot of fun along the way with the challenges and process. I definitely recommend doing a project like this to anyone weather you're new to cloud or even ad veteran of the industry as it's a great way to learn and display your skills and yourself. Also, I just think it's cool to have your own personal website. Thanks for reading and for those of you who also go on to create something similar, good luck and have fun with the process!

Top comments (0)