BeingDevOps Website Setup

Overview

The BeingDevOps website is a knowledge platform built for DevOps engineers, SREs, and platform teams. It combines a static site generator (Hugo), a modern theme (Hextra), container orchestration (Docker), and a reverse proxy (Traefik) into a reproducible, documentation-first architecture.

Architecture Diagram

    flowchart TB
    subgraph Internet
        Client[Client Browser]
    end

    subgraph Docker Host
        subgraph Traefik["Traefik (Reverse Proxy)"]
            EP80[Port 80]
            EP443[Port 443]
            EP80 --> EP443
        end

        subgraph Hugo["Hugo Container"]
            HugoServer[hugo server :1313]
            Content[Content/Markdown]
            Theme[Hextra Theme]
            Content --> HugoServer
            Theme --> HugoServer
        end

        subgraph Volumes
            HugoSite[(hugo-site/)]
            Certs[(certs/)]
        end

        HugoSite --> Hugo
        Certs --> Traefik
        Client --> EP443
        EP443 --> HugoServer
    end

    subgraph Discovery
        DockerSocket["Docker Socket"]
        Labels["Traefik Labels"]
        DockerSocket --> Traefik
        Labels --> Traefik
    end
  

Tech Stack & Communication

    flowchart LR
    subgraph Tools
        Hugo[Hugo + Hextra]
        Docker[Docker Compose]
        Traefik[Traefik]
        OpenSSL[OpenSSL]
    end

    subgraph Roles
        Hugo -->|"Builds HTML"| Static[Static Output]
        Hugo -->|"Serves on 1313"| Traefik
        Docker -->|"Orchestrates"| Hugo
        Docker -->|"Runs"| Traefik
        Traefik -->|"TLS termination"| Hugo
        Traefik -->|"HTTP→HTTPS"| Redirect[Redirect]
        OpenSSL -->|"Dev certs"| Certs[certs/]
    end
  

What’s Included

1. Content Structure

2. Custom Layouts & Partials

• Section cards — Grid/list view with sort and filter on Projects, Blog, Tutorials
• Category pages — Rich landing pages for Linux, Kubernetes, Docker, etc., showing all child tutorials
• Related content — Sidebar and footer links (Related Projects, Related Blogs, Related Tutorials)
• Navbar — Logo (light/dark variants), favicon, menu order
• Footer — Custom copyright, no theme toggle at bottom

3. Dev Stack

• Hugo — Extended, with modules (Hextra)
• Hextra — Documentation theme with search, dark mode, sidebar
• Docker Compose — Hugo + Traefik; volumes for live reload
• Traefik — Reverse proxy, TLS, automatic service discovery via Docker labels
• Self-signed certs — For local HTTPS (generate-certs.sh)

4. Production Considerations

• Dockerfile.prod — Nginx serving hugo --minify output
• Kubernetes manifests — Optional k8s deployment (namespace, deployment, service, IngressRoute)
• Git workflow — dev for development, master for production
• CI/CD — GitHub Actions for build and deploy (when configured)

Project Structure

hugoBeingDevOps/
├── docker/
│   ├── docker-compose.yml     # Hugo + Traefik
│   ├── Dockerfile             # Hugo dev image
│   ├── Dockerfile.prod        # Nginx production
│   ├── traefik-dynamic.yml     # TLS config
│   ├── generate-certs.sh      # Self-signed certs
│   └── certs/
├── hugo-site/
│   ├── config/_default/hugo.yaml
│   ├── content/
│   │   ├── blog/
│   │   ├── projects/
│   │   ├── tutorials/         # linux/, kubernetes/, docker/, etc.
│   │   └── about/
│   ├── layouts/               # Overrides and custom partials
│   ├── assets/css/custom.scss
│   ├── static/                # favicon, logos, images
│   └── go.mod                 # Hextra module
├── k8s/                       # Optional production deploy
└── README.md

Key Design Decisions

Related Content

• Why DevOps Needs a Website — Rationale, problems, approaches
• BeingDevOps Website Setup Tutorial — Multistage step-by-step guide