rlabadmin
adb0c055c8
- public/index.html: semantic HTML5 with header/nav, hero, features grid, stack description list, contact, footer - public/styles.css: responsive layout, custom properties, dark-mode support - public/favicon.svg Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
136 lines
4.5 KiB
HTML
136 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>testsite — a deployment demo</title>
|
|
<meta name="description" content="A small static site deployed with Gitea Actions, Docker Swarm and Traefik.">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="container nav">
|
|
<a class="logo" href="/">
|
|
<span class="logo-mark" aria-hidden="true"></span>
|
|
<span>testsite</span>
|
|
</a>
|
|
<nav aria-label="Primary">
|
|
<a href="#features">Features</a>
|
|
<a href="#stack">Stack</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="container">
|
|
<p class="eyebrow">Deployment demo</p>
|
|
<h1>A static site, shipped on every <code>git push</code>.</h1>
|
|
<p class="lede">
|
|
Gitea Actions builds the container, pushes to the internal registry,
|
|
then Swarm does a zero-downtime rolling update behind Traefik.
|
|
No manual steps after the first deploy.
|
|
</p>
|
|
<div class="actions">
|
|
<a class="btn btn-primary" href="#stack">See the stack</a>
|
|
<a class="btn" href="https://git.dev.serso.org/test/testsite">Source on Gitea</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="section">
|
|
<div class="container">
|
|
<h2>What this site demonstrates</h2>
|
|
<div class="grid-3">
|
|
<article class="card">
|
|
<h3>Push to deploy</h3>
|
|
<p>
|
|
Commit to <code>main</code> and a Gitea Actions workflow builds
|
|
a fresh image tagged with the commit SHA, pushes it, and tells
|
|
Swarm to roll the new version in.
|
|
</p>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Zero downtime</h3>
|
|
<p>
|
|
Two replicas spread across worker nodes. The
|
|
<code>start-first</code> update order brings the new container
|
|
up before draining the old one — no dropped requests.
|
|
</p>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Automatic TLS</h3>
|
|
<p>
|
|
Traefik watches Swarm labels, discovers the service on the
|
|
<code>traefik-public</code> overlay, and fetches a Let’s
|
|
Encrypt certificate without any extra config.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="stack" class="section section-alt">
|
|
<div class="container">
|
|
<h2>The stack</h2>
|
|
<dl class="stack-list">
|
|
<div>
|
|
<dt>Source & CI</dt>
|
|
<dd>Gitea at <code>git.dev.serso.org</code> with Gitea Actions.</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Build</dt>
|
|
<dd><code>nginx:1.27-alpine</code> serving <code>/public</code> on port 8080.</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Registry</dt>
|
|
<dd>Gitea’s built-in OCI registry — one login per runner, per node.</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Runtime</dt>
|
|
<dd>Docker Swarm, constrained to worker nodes.</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Ingress</dt>
|
|
<dd>Traefik on the <code>traefik-public</code> overlay, Let’s Encrypt resolver.</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Deploy trigger</dt>
|
|
<dd><code>docker service update --image <sha> testwebsite_web</code> over SSH.</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="section">
|
|
<div class="container narrow">
|
|
<h2>Contact</h2>
|
|
<p>
|
|
Questions or want to reuse this template for another app?
|
|
Drop a line at
|
|
<a href="mailto:robin@serso.be">robin@serso.be</a>.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container footer-inner">
|
|
<p>© <span id="year">2026</span> serso · built with a CI pipeline that is probably overengineered for a static page.</p>
|
|
<p class="meta">
|
|
Build
|
|
<code id="build-sha">dev</code>
|
|
·
|
|
<a href="/healthz">/healthz</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
</script>
|
|
</body>
|
|
</html>
|