Detour Website

Marketing site for the Detour WordPress plugin at detourwp.com. Static site built with Hugo. No theme, no framework, no runtime dependencies. Hand-rolled HTML, CSS, and SVG with a road-construction visual identity.

Pages

URL	What it is
/	Detour plugin landing page (problem, solution, features, install)
/faq/	31 questions across 7 categories, plugin comparisons, project meta
/centreville-tech/	Centreville Tech services page (paid WordPress and marketing work)
/privacy/	Privacy policy (Google Analytics 4, Search Console, Google Fonts)
/terms/	Terms and conditions (AS IS, GPL, governing law: Alabama)

Local development

hugo server

Then open http://127.0.0.1:1313/.

Or run the same development server through Docker:

docker compose up

Then open http://127.0.0.1:1313/.

Production build

hugo --minify

Output is written to public/. Sitemap and robots.txt are generated automatically.

To test the production container locally:

docker compose -f docker-compose.prod.yml up --build

Then open http://127.0.0.1:8080/.

Docker deployment

GitHub Actions builds the site into a lightweight Nginx image and pushes it to GitHub Container Registry:

ghcr.io/centrevilletech/detour-website

The deployment workflow runs only on main and uses Tailscale to reach Portainer on the private tailnet. No public SSH access is required, and no deployment credentials should be committed to this repository.

Required GitHub Secrets:

TS_OAUTH_CLIENT_ID
TS_OAUTH_SECRET
TS_OAUTH_TAGS
TAILSCALE_DEPLOY_TARGET
PORTAINER_URL
PORTAINER_API_KEY
PORTAINER_STACK_ID
PORTAINER_ENDPOINT_ID

Optional GitHub Secret:

PORTAINER_CA_CERT

Optional GitHub Variables:

APP_HTTP_PORT
PORTAINER_SKIP_TLS_VERIFY

Recommended values:

TS_OAUTH_TAGS=tag:ci
TAILSCALE_DEPLOY_TARGET=100.126.83.101
PORTAINER_SKIP_TLS_VERIFY=false

Use PORTAINER_CA_CERT for a private or self-signed Portainer certificate. Use PORTAINER_SKIP_TLS_VERIFY=true only as a temporary staging fallback.

Before build and deploy, CI runs TruffleHog and fails if runtime .env files are committed. Keep deployment knobs in GitHub Variables and credentials in GitHub Secrets.

The Portainer stack expects the target Docker environment to already have the external proxy network:

networks:
  proxy-web:
    external: true

Attach the web service to proxy-web in the Portainer compose file when routing through the shared proxy. Create that network on aldine before the first deploy if it does not already exist.

Project layout

.
├── README.md
├── Dockerfile              # Hugo build stage + Nginx runtime image
├── docker-compose.yml      # Dockerized local Hugo dev server
├── docker-compose.prod.yml # Local production-style container test
├── docker-compose.portainer.yml # Stack file sent to Portainer
├── hugo.toml                # Site config, params, SEO defaults, GA4 ID
├── content/                 # Page front matter + markdown bodies
│   ├── _index.md            # Home (uses layouts/index.html)
│   ├── centreville-tech.md  # Services
│   ├── faq.md               # FAQ (data lives in data/faq.yaml)
│   ├── privacy.md           # Privacy policy (markdown body)
│   └── terms.md             # Terms (markdown body)
├── data/
│   └── faq.yaml             # Single source of truth for FAQ Q&A
│                            # (consumed by both page partial and FAQPage schema)
├── layouts/
│   ├── _default/
│   │   ├── baseof.html      # Site shell
│   │   └── single.html      # Dispatch by .File.BaseFileName
│   ├── index.html           # Home page layout
│   └── partials/
│       ├── head.html        # Meta, OG, fonts, schema includes, GA4
│       ├── header.html      # Sticky nav
│       ├── footer.html      # 3-col grid, W-beam guardrail, legal links
│       ├── google-analytics.html
│       ├── page-centreville-tech.html
│       ├── page-faq.html
│       ├── page-legal.html  # Renders privacy.md and terms.md
│       └── schema-*.html    # JSON-LD partials (8 files)
└── static/
    ├── css/main.css         # Single stylesheet, design system in :root
    ├── img/
    │   ├── icons/           # Simple Icons SVGs (WordPress, PHP, MariaDB)
    │   └── og-detour.svg    # Open Graph share image
    ├── favicon.svg
    └── robots.txt

Design system

static/css/main.css is organized around CSS custom properties declared in :root. Components reference tokens; tokens are the single source of truth.

Token group	Purpose
--color-*	Palette (orange, asphalt, yellow, concrete, highway-green)
--font-*	Four families (display, condensed, body, code)
--fs-*	T-shirt font scale + named display sizes
--space-*	9-step spacing scale (3xs through 3xl)
--rule-*	Border treatments (solid, thin, dashed)
--shadow-*	Hard offset shadows (default, hover, active)
--radius-*	Corner radii
--card-*	Card system (padding, gap, list-gap, divider)
--section-*	Section vertical rhythm
--btn-*	Button padding, font size, border

To change the look site-wide: edit :root. To add a component: build it from the same tokens. Mobile cascade lives at the end of the file with token overrides at 800px / 600px / 420px breakpoints.

SEO and structured data

Per-page <title>, meta description, canonical, OG, Twitter card. Auto-generated sitemap and robots.txt. JSON-LD per page (every block validates as parseable JSON):

Page	JSON-LD types
/	SoftwareApplication, HowTo, WebSite, Organization
/faq/	FAQPage (31 Q&A), WebSite, Organization, BreadcrumbList
/centreville-tech/	ProfessionalService + OfferCatalog, WebSite, Organization, BreadcrumbList
/privacy/	WebPage, WebSite, Organization, BreadcrumbList
/terms/	WebPage, WebSite, Organization, BreadcrumbList

The SoftwareApplication block on the home page declares isBasedOn referencing the upstream wp-buy plugin so search engines understand the fork relationship.

Analytics

Google Analytics 4 is wired through layouts/partials/google-analytics.html. The measurement ID is params.googleAnalyticsID in hugo.toml. To rotate the property: change one line. To disable entirely: blank the param and the script stops being emitted.

Theme

Construction zone: DOT orange, asphalt black, reflective yellow, concrete page background. Stardos Stencil for headlines, Oswald for labels and tags, IBM Plex Sans for body, system mono for code. Real MUTCD highway-green-on-white reference markers for section labels. Inline SVG signs, roads, barricades, and a W-beam guardrail in the footer. No bitmap images. No em dashes anywhere in the rendered output.

Credits

Detour is a fork of All 404 Redirect to Homepage by wp-buy, GPL-2.0-or-later. The clearance grid icons are Simple Icons (MIT). Inline UI icons are Lucide-style line icons. The epigraph in the Origin section quotes Dr. Gary North's The Calling (1981).

Made with care in Alabama by Centreville Tech.