Azure Static Website Deployment¶

This document describes how to deploy the Nutri-E website to Azure Storage with automatic GitHub Actions deployment.

Architecture¶

Azure Storage Account with Static Website hosting enabled
GitHub Actions for automatic deployment on push to main branch
Azure CDN (optional) for global content delivery and custom domain

Initial Setup¶

Prerequisites¶

Azure Account: https://azure.microsoft.com/free/
Azure CLI: https://docs.microsoft.com/en-us/cli/azure/install-azure-cli
GitHub Repository: Admin access to configure secrets

az login

Step 2: Run the Setup Script¶

# Make the script executable
chmod +x azure-setup.sh

# Run with default settings
./azure-setup.sh

# Or customize with environment variables
AZURE_RESOURCE_GROUP="my-rg" \
AZURE_STORAGE_ACCOUNT="mywebsite" \
AZURE_LOCATION="northeurope" \
./azure-setup.sh

The script will: - ✅ Create Azure Resource Group - ✅ Create Storage Account with static website hosting - ✅ Upload website files - ✅ Create Service Principal for GitHub Actions - ✅ Display the website URL and GitHub secrets

Step 3: Configure GitHub Secrets¶

Go to your GitHub repository: 1. Navigate to Settings → Secrets and variables → Actions 2. Click New repository secret 3. Add the following secrets:

Secret Name	Description	Example Value
`AZURE_CREDENTIALS`	Service principal JSON	`{"clientId": "...", "clientSecret": "...", ...}`
`AZURE_STORAGE_ACCOUNT`	Storage account name	`nutriewebsite`
`AZURE_RESOURCE_GROUP`	Resource group name	`nutri-e-rg`

Important: The AZURE_CREDENTIALS JSON is output by the setup script. Copy it exactly as shown.

Step 4: Test the Deployment¶

Push a change to the website/ directory:

# Make a small change
echo "<!-- Test -->" >> website/index.html

# Commit and push
git add website/
git commit -m "Test Azure deployment"
git push origin main

Watch the GitHub Actions tab to see the deployment in progress!

Deployment Workflow¶

Automatic Deployment¶

Every push to main branch that modifies files in website/ triggers automatic deployment:

GitHub Actions checks out the code
Logs in to Azure using service principal
Uploads all files from website/ to Azure Storage $web container
Your website is updated within seconds!

Manual Deployment¶

You can also trigger deployment manually:

Go to Actions tab in GitHub
Select Deploy Website to Azure Storage
Click Run workflow → Run workflow

Local Deployment¶

# Login to Azure
az login

# Deploy manually
az storage blob upload-batch \
  --account-name nutriewebsite \
  --auth-mode key \
  --source ./website \
  --destination '$web' \
  --overwrite true

Website Structure¶

website/
├── index.html          # Homepage
├── privacy.html        # Privacy policy
├── terms.html          # Terms of service
├── styles.css          # Stylesheet
├── script.js           # JavaScript
└── images/             # Images directory

URLs¶

After deployment, your website will be available at:

Default Azure URL:

https://[STORAGE_ACCOUNT].z16.web.core.windows.net

Example: https://nutriewebsite.z16.web.core.windows.net

Custom Domain (Optional)¶

Using Azure CDN¶

Create CDN Profile:

az cdn profile create \
  --name nutri-e-cdn \
  --resource-group nutri-e-rg \
  --sku Standard_Microsoft

az cdn endpoint create \
  --name nutri-e \
  --profile-name nutri-e-cdn \
  --resource-group nutri-e-rg \
  --origin nutriewebsite.z16.web.core.windows.net

Configure Custom Domain:

# Add CNAME record in your DNS provider:
# www.nutri-e.com → nutri-e.azureedge.net

az cdn custom-domain create \
  --endpoint-name nutri-e \
  --name www-nutri-e-com \
  --profile-name nutri-e-cdn \
  --resource-group nutri-e-rg \
  --hostname www.nutri-e.com

Enable HTTPS:

az cdn custom-domain enable-https \
  --endpoint-name nutri-e \
  --name www-nutri-e-com \
  --profile-name nutri-e-cdn \
  --resource-group nutri-e-rg

Update GitHub Secrets (for CDN purging):
AZURE_CDN_PROFILE: nutri-e-cdn
AZURE_CDN_ENDPOINT: nutri-e

Monitoring & Logs¶

View GitHub Actions Logs¶

Go to Actions tab
Click on latest workflow run
Expand Upload to Azure Storage step

View Azure Storage Metrics¶

# Check storage account details
az storage account show \
  --name nutriewebsite \
  --resource-group nutri-e-rg

# View storage metrics
az monitor metrics list \
  --resource /subscriptions/.../resourceGroups/nutri-e-rg/providers/Microsoft.Storage/storageAccounts/nutriewebsite \
  --metric Transactions

Cost Estimation¶

Azure Storage Static Website hosting is very cost-effective:

Storage: ~$0.02 per GB/month
Bandwidth: First 5GB free, then ~$0.08/GB
Transactions: ~$0.005 per 10,000 transactions

Estimated monthly cost for small website: $0.50 - $5.00

Troubleshooting¶

Deployment Fails with Authentication Error¶

Problem: GitHub Action can't authenticate to Azure

Solution: 1. Verify AZURE_CREDENTIALS secret is correct JSON 2. Check service principal has Contributor role 3. Re-run setup script to regenerate credentials

Website Not Updating¶

Problem: Changes pushed but website shows old content

Solution: 1. Check GitHub Actions completed successfully 2. Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R) 3. If using CDN, purge CDN cache:

az cdn endpoint purge \
  --resource-group nutri-e-rg \
  --profile-name nutri-e-cdn \
  --name nutri-e \
  --content-paths '/*'

404 Errors¶

Problem: All pages except index.html return 404

Solution: Azure Static Websites don't support automatic routing. Options: 1. Use client-side routing (SPA) 2. Set up Azure CDN with URL rewrite rules 3. Use Azure Static Web Apps instead

Security Best Practices¶

Service Principal Scope: Limited to specific resource group
Least Privilege: Only Contributor role on resource group
Rotate Credentials: Regenerate service principal credentials periodically
Enable HTTPS: Always use HTTPS for production websites
Monitor Access: Review Azure Activity Logs regularly

Alternative: Azure Static Web Apps¶

For more advanced features (API routes, authentication, etc.), consider Azure Static Web Apps:

az staticwebapp create \
  --name nutri-e \
  --resource-group nutri-e-rg \
  --source https://github.com/Stig-Johnny/nutri-e \
  --branch main \
  --app-location "website" \
  --api-location "" \
  --output-location ""

Cleanup¶

To remove all Azure resources:

# Delete resource group (removes everything)
az group delete --name nutri-e-rg --yes --no-wait

# Delete service principal
az ad sp delete --id $(az ad sp list --display-name nutri-e-github-deploy --query "[0].appId" -o tsv)

Support¶

Azure Documentation: https://docs.microsoft.com/azure/storage/blobs/storage-blob-static-website
GitHub Actions: https://docs.github.com/actions
Azure CLI: https://docs.microsoft.com/cli/azure/

.github/workflows/deploy-website.yml - GitHub Actions workflow
azure-setup.sh - Setup automation script
website/ - Website source files