Cloud Resume Challenge Tutorial — Part 5 of 6
Part 5: Automate Your Workflow using GitHub Action
Introduction
This tutorial is a hands-on, project-based review of web development fundamentals designed to prepare you to pass your Azure Fundamentals Certification (AZ900). You will apply the concepts from AZ900 to a real project in Azure using real processes and approaches that engineers use for real projects. You don’t need to know command line, HTML, or networking. But by the time you finish, you will have a basic understanding of these concepts. It is written for the non-technical person, starting from an absolute beginner point of view.
Based on Forrest Brazeal’s Cloud Resume Challenge, this tutorial shows you one of many possible ways to build and host a simple website in Azure. The tutorial also will show you which tools to use and how to build a software development workflow. I’ve consulted with software developers throughout so that you can have confidence that the workflow is based on real-life, best practices. With a solid workflow foundation in place, you can expand the Cloud Resume Challenge to some of the optional enhancements, or even start new your own new projects, learning, exploring and building with Azure.
Project Overview
In this six-part project, you’ll build a cloud-hosted resume by completing the following:
· Part 1 — Create Your Resume in a GitHub Workflow
· Part 2 — Activate Azure Storage Static Webpage
· Part 3 — Activate a URL and Configure DNS and Azure Front Door CDN
· Part 4 — Activate HTTPS
· Part 5 — Automate Your Workflow using GitHub Action (you are here)
· Part 6 — Add a Staging Webpage to Your Workflow
Tutorial Overview
Goals of part 5
With your static website configured and completed in Azure Storage, and your GitHub workflow in place, you can now automate updates into the live website from your local development workstation (GitHub Desktop + Visual Studio Code + your PC).
In this tutorial you will use the command line to connect GitHub with your Azure account. This project is based on Use GitHub Actions to deploy a static site to Azure Storage | Microsoft Learn, with a modification to the action that enables website overwrites so you can continue make continuous updates to your website automatically.
In this tutorial we will
· Connect Your GitHub Repo to Your Azure Storage Blob
· Create a GitHub Action to Update the Azure Static Website
· Update the Website (add a picture to the site)
AZ900 — Need to Know
Terminal, Shell and Command Line
We’ve been using the Azure portal to configure and manage the services to support the cloud resume. To configure Github actions, however, you need to use command line from a terminal application. Using a terminal application can be a challenge for beginners who are accustomed to using a Graphical User Interface (GUI), like the Azure Portal. This section includes a basic overview of the various terminal applications and command line interfaces available for use with Azure, which you will also need to know for the AZ900 certification.
· Terminal refers to the application you are using to connect and interact with a computer. Examples include Windows Terminal and Windows Powershell.
· Shell is a terminal application used to interface with an operating system through written commands. Examples include Azure Cloud Shell, which emulates a terminal window through a web browser, but also has integrations with terminal programs like Windows Powershell.
· Command Line refers to the program running in terminal that specifies the syntax for the commands. Examples include CLI and PowerShell.
Azure Cloud Shell, CLI, PowerShell
For AZ900, you will need to understand the differences between the following shells, recognize them by their terminal commands and their respective use cases.
· Azure Cloud Shell is an interactive, browser-accessible shell environment. When launching you select PowerShell to execute Azure PowerShell commands, or Bash to execute Azure CLI commands. When running PowerShell with CloudShell, Linux specific functionality is available, but Windows-Specific is not because Cloud Shell runs PowerShell 6 on a Linux container.
· PowerShell and Azure CLI
o Commands work the same on Mac, Linux and Windows
o Command execution supported in Azure Cloud Shell
o Executes commands in an interactive environment
- Azure CLI is a cross-platform command-line program that connects to Azure and executes administrative commands on Azure resources. Available in cmd, bash, Powershell and Windows Powershell. In the graphic above see CLI” in white.
- Azure PowerShell is a module that you add to Windows PowerShell or PowerShell Core that enables you to use Azure commands to connect to your Azure subscription and manage resources. In the graphic above see “PS” in blue.
· Windows Terminal / Windows Powershell. Although not on the AZ900 exam, it’s good to know and is a good option for running command line on Windows PCs. Typically installed on Windows, and found by searching for “Terminal”, but you may need to download it from the store. Azure Cloud Shell is one of the options in Terminal. Click the drop down and select it from the menu.
Automate Your Workflow using GitHub Action
Step 1 — Generate deployment credentials
· Open Azure Cloud Shell, which is accessible from the Azure Portal home screen
· If this is your first time accessing Azure Cloud Shell from your free trial, Azure will prompt you to create a storage account
· Once you are logged in, copy / paste your Azure subscription ID and The Azure Resource Group into the following script.
az ad sp create-for-rbac - name "myML" - role contributor - scopes /subscriptions/AZURE SUBSCRIPTION PLACEHOLDER /resourceGroups/AZURE RESOURCE GROUP PLACEHOLDER - json-auth· After you have entered your information, it should look something like this:
az ad sp create-for-rbac - name "myML" - role contributor - scopes /subscriptions/42878749–22b6–48ef-acb1–0011aabdh60e/resourceGroups/CloudResumeProd - json-auth· You can find your subscription ID and resource group in the Azure Portal:
· Then copy / paste the into Azure Cloud Shell prompt and press enter
· This script will generate a JSON Output like this, but with a unique values for your subscription. Copy / past this into a temp location like a Notepad file.
{
"clientId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"clientSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"subscriptionId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"tenantId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"activeDirectoryEndpointUrl": "https://login.microsoftonline.com",
"resourceManagerEndpointUrl": "https://management.azure.com/",
"activeDirectoryGraphResourceId": "https://graph.windows.net/",
"sqlManagementEndpointUrl": "https://management.core.windows.net:8443/",
"galleryEndpointUrl": "https://gallery.azure.com/",
"managementEndpointUrl": "https://management.core.windows.net/"
}Step 2 Configure GitHub secrets
· In GitHub, go to your repository
· Go to Settings in the navigation menu
· Select Security > Secrets and variables > Actions
· Select New repository secret
· Paste the entire JSON output from the Azure CLI command into the secret’s value field. Give the secret the name AZURE_CREDENTIALS
· Select Add secret
Step 3 Add an Action to Your Workflow
· Go to Actions for your GitHub repository
· Select Set up your workflow yourself.
· Copy / paste this script below into the action editor
· Enter your Azure storage account name as noted in the yellow highlight
· Click commit
name: Blob storage website CI
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: azure/login@v1
with:
creds: ${{ secrets.AZURE_CREDENTIALS }}
- name: Upload to blob storage
uses: azure/CLI@v1
with:
inlineScript: |
az storage blob upload-batch --account-name crcprod --auth-mode key -d '$web' -s . --overwrite
# Azure logout
- name: logout
run: |
az logout
if: always()· Monitor the progress of the action
· Get details on progress of the action and make edits as needed
Step 4 Push a change to your website
Once the build has successfully run in GitHub, you can now push changes to the GitHub Repository and the updates will automatically populate into your website. In this step you will use the GitHub action to make an update to the resume.
· Go to GitHub Desktop and synchronize the project by Fetching the Origin
· This will pull into your desktop project the YAML actions you just completed in the prior step
· Now open the repository in Visual Studio Code, via GitHub Desktop
· Go through the HTML code in the Index.html file and add your details
· Save the file
· Return to GitHub Desktop. Note the changes you just made are tracked in red (deletions) and green (additions). GitHub Desktop will maintain these in the History and you can revert if needed to a prior version
· Commit the changes. Note that once you click commit to main, and push to origin, GitHub will push these changes to your GitHub repository, which will trigger the action you just created in the prior step and the updates will automatically get pushed to your Azure website
· You can monitor the progress by navigating to your repository in GitHub and selecting Actions
· Test your changes by entering your URL
Step 5 Enhance the Resume with a Head Shot
In this step you’ll change the code to add a headshot. You’ll need a .jpg or .png headshot image to complete this step.
· Return to GitHub Desktop and open your index.html file by accessing the repository in Visual Studio Code
· Add the code highlighted below with a bracket {START} {END} to your index.html file. You are making changes to the HTML and CSS that add an image of your headshot to the resume.
{START}
.img-container img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
{END}
</style>
</head>
<body>
<div class="container">
{START}
<div class="img-container">
<header>
<img src="your-image-url-here" alt="Your Name">
</header>
</div>
{END}It is included below in the full original index.html file provided in the prior parts of the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Resume - Your Name</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3, h4 {
font-weight: normal;
margin: 0 0 10px;
color: #333;
}
h1 {
font-size: 36px;
line-height: 1.2;
}
h2 {
font-size: 24px;
line-height: 1.2;
}
h3 {
font-size: 18px;
line-height: 1.2;
}
p {
margin: 0 0 10px;
line-height: 1.5;
}
ul {
margin: 0 0 10px 20px;
padding: 0;
list-style: disc;
}
ul li {
margin: 0 0 5px;
padding: 0;
}
.section {
margin: 0 0 20px;
}
.section:last-of-type {
margin: 0;
}
.section-header {
display: flex;
align-items: center;
margin: 0 0 10px;
}
.section-header h2 {
flex: 1;
}
.section-content {
margin: 0;
}
@media only screen and (max-width: 768px) {
h1 {
font-size: 28px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
.container {
padding: 10px;
}
}
.img-container {
float: left;
margin-right: 20px;
}
{START}
.img-container img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
{END}
</style>
</head>
<body>
<div class="container">
{START}
<div class="img-container">
<header>
<img src="your-image-url-here" alt="Your Name">
</header>
</div>
{END}
<header>
<h1>Your Name</h1>
<p>Email: youremail@example.com</p>
<p>Phone: (123) 456-7890</p>
<p>Website: yourwebsite.com</p>
<hr>
</header>
<section class="section">
<div class="section-header">
<h2>Summary</h2>
</div>
<div class="section-content">
<p>A highly motivated individual with experience in various fields, seeking an opportunity to utilize and further develop my skills in a challenging and dynamic environment.</p>
</div>
</section>
<section class="section">
<div class="section-header">
<h2>Education</h2>
</div>
<div class="section-content">
<ul>
<li>Bachelor of Science in Computer Science, University of XYZ, Graduated May 2021</li>
<li>
<body>· Save the file in Visual Studio Code
· Return to GitHub Desktop and view the files of your repository in Explorer
· Copy your .jpg or .png headshot photo into this folder
· Return to GitHub Desktop
· Review the changes
· Commit to main and push to origin
This push added the mug shot to your $web container in Azure, but you still need to modify the resume code with the location of this file so it can display from the Internet.
· Navigate to Azure Portal and your storage account
· Select Containers, and $web
· Select the headshot you just uploaded into the repository
· Copy the URL
· Note that if you try to view this resource, you should get an error message. This is because the permissions on your $web container haven’t been set for public viewing.
· Go back to the $web container
· Select ‘Change access level’ and set to ‘Blob (anonymous read access for blobs only)
· Return to GitHub Desktop and access the repository from Visual Studio Code.
Navigate to the line with URL placeholder and paste the image file URL you copied from the prior step as show in the highlighted example below.
<header>
<img src=https://crcprod.blob.core.windows.net/$web/stockmug.jpg alt="Jonathan Stock">
</header>
</div>Commit to main, push to origin and test your webpage to see if the image is displaying correctly.
At this point, you can now leverage this automated workflow to edit and push changes to your website. But be careful as any changes you make will be pushed into your production website. That’s why, in the next part, we’ll build a staging website where you can view and evaluate changes before committing them to your production website.
Reference
Choose the right Azure command-line tool — Azure CLI | Microsoft Learn
Using the Azure Cloud Shell window | Microsoft Learn
Use GitHub Actions to deploy a static site to Azure Storage | Microsoft Learn
How-to learn Bash with Azure CLI | Microsoft Learn
Disclaimer
This tutorial is not an official Microsoft publication. Sources are indicated in the References section. No warranties or guarantees are implied. Links and instructions may be outdated. Use at your own risk.
