Stan's Static Site

A static website about Stan the Snakes's adventures created using Python's MkDocs

• Getting Started
  • Create virtual environment
  • Activate virtual environment
  • Install dependencies
  • Debug site
  • Build site
• Azure
  • Azure blob storage static website
    • Resources
  • Azure Static Web App
    • Resources
• AWS S3 Hosting
  • Troubleshooting
    • For more indepth Python + AWS see Python on AWS - Stan approved

Getting Started

Create virtual environment

python -m virtualenv .venv

Activate virtual environment

Bash

source .venv/bin/activate

PowerShell

.\.venv\Scripts\activate.ps1

Install dependencies

pip install -r requirements.txt

Debug site

cd website
mkdocs serve

Build site

cd website
mkdocs build

Azure

Azure blob storage static website

# create resource group
az group create --name spug --location westus2

# create storage account
az storage account create --name stansstaticstorage --resource-group spug --location westus2 --sku Standard_RAGRS --kind StorageV2

# list storage account keys
az storage account keys list --resource-group spug --account-name stansstaticstorage

# set "--auth-mode key" key
$Env:AZURE_STORAGE_KEY = "<account_storage_key>"

# configure storage account to use a static website
az storage blob service-properties update --account-name stansstaticstorage --static-website --404-document 404.html --index-document index.html

# upload static site files
az storage blob upload-batch -s .\website\site\ -d '$web' --account-name stansstaticstorage

# query website URL
az storage account show -n stansstaticstorage -g spug --query "primaryEndpoints.web" --output tsv

# add CNAME to domain provider -- https://domains.google.com/
# configure custom domain name
az storage account update -g spug --name stansstaticstorage --custom-domain "blob.stansadventures.com" --use-subdomain false

## other custom domain options include using Azure CDN

https://blob.stansadventures.com/

Resources

• Host a static website on Blob Storage
• Map a custom domain to an Azure Blob Storage endpoint
• Integrate a static website with Azure CDN

Azure Static Web App

# create static web app from git repo
az staticwebapp create --resource-group spug --source https://github.com/python-spokane/stans-static-site --branch main --location westus2 --name stans-static-site

# query hostname
az staticwebapp show --name stansstaticsite --query "@.defaultHostname"

# set custom domain
az staticwebapp hostname set --name stansstaticsite --hostname "hello.stansadventures.com" --no-wait

Resources

• VS Code extension
• Quickstart: Building your first static site with Azure Static Web Apps

AWS S3 Hosting

• Use the following user guide to setup a simple s3 bucket to host a static website
  • Hosting a static website using Amazon S3
• Setup AWS IAM User
  • As a best practice create an AWS IAM User and allow only it to write to the s3 bucket for deploying the site
  • Create a secret to store the AWS access keys for use in deploying the site via Actions
• Or even better configure OIDC in AWS and use GitHub's OIDC provider to assume a role for deploying the site
  • Create a role for federation
  • Create a trust policy
  • Create a Web Identity IAM role and associate the trust policy created in the previous step
• Grant the role or user created above permissions on the s3 bucket via a bucket policy (you really only want public read access)
  • Use the AWS Policy Generator to quickly create a secure policy

Troubleshooting

• Access denied error when using s3 static website

For more indepth Python + AWS see Python on AWS - Stan approved