Thumbnail image

DevOps for the Site

The way I solved a problem for hosting a blog

GitHub has the ability to host self contained websites, via Jekyll and Hugo. So I started using this feature which is documented here: GitHub Pages documentation, and Hugo and host on GitHub Pages.

So what I did later is extend the way my site is hosted to deploy via GitHub Actions as Azure website.

GitHub Workflow Architecture

The following diagram illustrates the complete CI/CD pipeline for this Hugo blog deployment:

flowchart TD A[Developer] -->|git push| B[GitHub Repository] B --> C{GitHub Actions Triggered} C -->|main branch| D[Setup Hugo Environment] C -->|feature branch| E[Build & Test Only] D --> F[Install Hugo Extended] F --> G[Build Hugo Site] G --> H[Generate Static Files] H --> I{Deployment Target} I -->|GitHub Pages| J[Deploy to GitHub Pages] I -->|Azure Static Web Apps| K[Deploy to Azure] I -->|Both| L[Parallel Deployment] J --> M[GitHub Pages Live] K --> N[Azure Static Web App Live] L --> O[Both Platforms Live] E --> P[PR Preview Build] P --> Q[Post Build Results] M --> R[CDN Cache Update] N --> S[Azure CDN Update] O --> T[Multi-Platform Live] R --> U[Site Available Globally] S --> V[Azure Edge Locations] T --> W[Redundant Hosting] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style J fill:#e8f5e8 style K fill:#e3f2fd style M fill:#e8f5e8 style N fill:#e3f2fd

Workflow Steps Explained

  1. Source Control: Developer pushes code changes to the GitHub repository
  2. CI/CD Trigger: GitHub Actions workflow is automatically triggered based on branch and event type
  3. Environment Setup: The workflow sets up the Hugo extended environment with necessary dependencies
  4. Build Process: Hugo generates the static site files from markdown content and themes
  5. Deployment Decision: Based on configuration, the site deploys to one or multiple platforms:
    • GitHub Pages: Free hosting with username.github.io domain
    • Azure Static Web Apps: Enterprise hosting with custom domains and advanced features
    • Parallel Deployment: Simultaneous deployment to both platforms for redundancy
  6. Global Distribution: Content is distributed via CDN for optimal performance worldwide

I still want to deprecate the GitHub Pages part of the workflow but I will circle back later when I do some maintenance on the site.

Hope this is useful, later I will write some integration between the Hugo site and a simple ASP API backend.