CI/CD Pipeline Project

Hosting with Azure Blob Storage + GitHub Actions

This project demonstrates how I deploy and update a static website using an automated GitHub Actions workflow and Azure Blob Storage static website hosting.

• Create and configure Azure Storage Account
• Enable static website hosting on Azure
• Upload HTML/CSS to the $web container
• Automate deployment using GitHub Actions

Step 1: Create Storage Account

First, create an Azure Storage Account where your static website files will be hosted. This account acts as the backend for your site’s content storage.

Step 2: Enable Static Website Hosting

Next, enable static website hosting on your Azure Storage Account. This activates the special $web container where your website files will be served publicly.

Step 3: Set Up CI/CD with GitHub Actions

To automate deployments, I use GitHub Actions — a continuous integration and delivery platform. This workflow automatically uploads website files to Azure every time I push changes to the main branch.

How the Workflow Works

name: Deploy to Azure Static Website

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Upload files to Azure Storage
        uses: azure/cli@v1
        with:
          inlineScript: |
            az storage blob upload-batch --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT }} \
              --account-key ${{ secrets.AZURE_STORAGE_KEY }} \
              --destination '$web' \
              --source '.' \
              --overwrite
    

Breaking it Down

Workflow Name: This names the workflow as it appears in GitHub Actions.

Trigger: Runs on every push to the main branch, ensuring your live site stays up to date.

Job Environment: Runs on a fresh Ubuntu virtual machine.

Steps:

• Checkout repository: Downloads your code so the workflow can access files.
• Upload files to Azure Storage: Uses the Azure CLI to batch upload all your site files to the $web container, replacing existing files to keep the site current.

Required GitHub Secrets

• AZURE_STORAGE_ACCOUNT: Your Azure Storage Account name
• AZURE_STORAGE_KEY: Access key for authentication with your storage account

This CI/CD pipeline provides a seamless, automated way to keep your Azure static website updated with every code change pushed to GitHub.