Deploying to the Cloud: Static Web App on Azure with GitHub & CLI – A DevOps Beginner’s Guide

Introduction.

In today’s world, getting a simple website online shouldn’t feel so difficult. Whether you're a beginner or a just someone exploring cloud deployment, this project walks you through how to host a static website on Azure App Service using nothing but GitHub and Azure CLI .

With the help of my AI Dev partner (yes, that’s ChatGPT), I was able to generated a basic but stylish HTML page, a CSS file for layout polish, and a READ-ME for GitHub documentation. The goal was to keep it light and beginner friendly while still following the same kind of workflow you'd see in real-world teams using GitHub and Azure pipelines.

Project Prerequisites.

Before we Proceed into the deployment steps, make sure we have the following tools ready:

i. An active Azure account with a valid subscription.

ii. Azure CLI installed on host computer

iii. A GitHub account (we’ll be pushing our code there).

iv. Git installed on our machine

v. Git Bash or VS Code Terminal (We’ll use Git Bash for this project)

vi. A basic understanding of how Git works (clone, init, add, commit, push)

vii. The zipped folder " cloudlaunch-static-web.zip" generated by ChatGPT which holds our index.html codes already downloaded and unzipped.

What We will Learn in this Project.

1. How to prepare and organize your web code (HTML, CSS, READ-ME).

2. How to initialize and push code to GitHub using Git Bash

3. How to use Azure CLI to create a resource group, app service plan, and deploy a web app.

4. How to access your deployed app live on the internet with a public URL.

Lets get it Rolling.

Step 1.

Phase 1: Version Control with GitHub

Creating the GitHub Repository and Pushing Code via Git Bash.

We’ll begin by heading over to GitHub.com to create a new repository. For this project, I named mine cloudlaunch-static-web to match the folder that contains the zipped project files.

Tip: Add a short description, make the repository Public, and leave the README box unchecked because we already have a README.md inside our code.

Once the repo is created, open Git Bash on your Windows machine and navigate into your project folder. Since my project folder is in the Downloads directory, I used the command: cd /c/Users/fred4/Downloads/cloudlaunch-static-web

Now initialize Git inside the folder: " git init " we ’ll get a response confirming that Git has initialized a new local repository.

Next, link our local folder to the GitHub repo using:" git remote add origin https://github.com/stillfreddie/cloudlaunch-static-web.git "

Next we ll Stage all files for commit: " git add . "

Then Commit with a message: git commit -m "Initial commit: Static web app for Azure deployment"

Next thing is to Rename the branch to main (GitHub’s default branch): " git branch -M main "

Then We Now push our code to GitHub: " git push -u origin main "

Finally, we head back to our GitHub repository and refresh the page. we should now see all our project files perfectly pushed.

This shows Phase 1 is complete. We’re now ready to move into Phase 2.

Phase 2. Azure App Service Setup Using Azure CLI

Step 1.

WE will now login to our azure via CLI, first things first, open our Git Bash ad run the command " az login " This will launch a browser window prompting us to sign in to our Microsoft Azure account. Once authenticated, the terminal will display a list of active subscriptions.

Step 2.

We will create a resource group from the CLI, we will Choose a name and region for our resource group for the course of this project we will create Resource Group Name: cloudlaunch-rg Region: westeurope so we run the command to create our resource group in westeurope region " az group create --name cloudlaunch-rg --location westeurope , we will see a JSON output confirming the resource group was created successfully.

Step 3 .

In this step we are going to create an App Service Plan on azure, An App Service Plan, which defines the type of computing power (CPU, RAM, pricing tier) our web app will run on. command to run is : " az appservice plan create --name cloudlaunch-plan --resource-group cloudlaunch-rg --sku FREE --location westeurope “ What this command means is that we are telling azure to create an app service plan with the name cloudlunch-plan inside the resource group we created earlier called cloudlunch-rg and --sku FREE This sets the pricing tier to free in region westeurope.

Upon running the command we will get a JSON output that shows if was successful.

Note: If you received a message like : This region has quota of 0 instances for your subscription. Try selecting different region or SKU. all you have to do is select a new region for your appservice plan.

Step 4.

Here in this step we will be creating an Azure Web App, we ll run this command to create an azure web app " az webapp create --resource-group cloudlaunch-rg --plan cloudlaunch-plan --name cloudlaunch-static-web-app "

What this command is saying is that Azure Create a web app in our earlier resource group named cloudlaunch-rg also saying “host this Web App under the plan called cloudlaunch-plan which we also created earlier on , then we gave the Web App a name called cloudlaunch-static-web-app . Once we run this command , we will get a Json output that shows our Azure Web App was created successfully and also we will be able to copy our hostname which is : "cloudlaunch-static-web-app.azurewebsites.net " with this we can view our newly create index.html web app on our Browser after we are done.

Step 5:

Deploy from GitHub Using Azure CLI

Here, we’ll connect our GitHub repo to the Azure Web App and configure it to Manually deploy

We’ll run the following command: " az webapp deployment source config --name cloudlaunch-static-web-app --resource-group cloudlaunch-rg --repo-url https://github.com/stillfreddie/cloudlaunch-static-web.git --branch main --manual-integration "

What Does This Command Do?

az webapp deployment source config: This is the main Azure CLI command that sets up deployment settings for a web app. It tells Azure where to pull the application code from.

--name cloudlaunch-static-web-app: This specifies the exact name of the web app we created in Azure.

--resource-group cloudlaunch-rg: This tells Azure which resource group to look into to find the web app.

--repo-url https://github.com/stillfreddie/cloudlaunch-static-web.git: This is our GitHub repository URL. Azure will pull the source code from here.

--branch main: This defines the branch Azure should monitor for changes — in this case, the main branch.

--manual-integration: This lets Azure know we’ll trigger deployments manually (helpful when you want more control or when automatic integration fails).

Final Check, Go Live Once the command runs successfully, head over to your browser and visit: https://cloudlaunch-static-web-app.azurewebsites.net

If everything went well, your static web application should be live and accessible on the internet!

Bonus Tip:

You can also visit the Azure Portal to visually confirm:

The Resource Group

The App Service Plan

The Web App itself

They should all be intact and functioning smoothly.

Conclusion

In this project, we successfully built and deployed a static web application to Azure using GitHub and Azure CLI — the cloud native way.

1. Started with version control by initializing Git locally and pushing to GitHub

2. Set up an Azure App Service Plan and Web App via CLI meaning no portal clicks needed\

3. Connected our GitHub repository to Azure for seamless manual integration and deployment

4. Finally, tested our live web app on the internet with our custom Azure URL

This hands-on workflow not only strengthened our command-line, but also showed how easily we can connect source control and cloud infrastructure in real-world DevOps scenarios.

Thank you and see you on the next one.

Tech-Man.