docs: Modernize landing page with hero, pillars, and framework cards

This commit is contained in:
Benoit Chesneau 2026-01-22 22:26:18 +01:00
parent 819d2a2490
commit e9bc51cce4
2 changed files with 262 additions and 62 deletions

View File

@ -4,65 +4,114 @@
<div class="hero__inner">
<div class="hero__copy">
<img class="hero__logo" src="assets/gunicorn.svg" alt="Gunicorn mascot" />
<h1>Production-ready Python web services</h1>
<p>Gunicorn is a dependable WSGI HTTP server for UNIX that keeps Python applications running fast and resilient in production. Built on a pre-fork worker model and trusted in countless deployments, it pairs clean configuration with flexible worker strategies so you can meet any traffic pattern.</p>
<h1>The Python WSGI Server<br>for Production</h1>
<p class="hero__tagline">Fast, reliable, and battle-tested. Gunicorn runs your Python web applications with the stability and performance you need in production.</p>
<div class="hero__cta">
<a class="md-button md-button--primary" href="install/">Install Gunicorn</a>
<a class="md-button" href="https://github.com/benoitc/gunicorn">View on GitHub</a>
<a class="md-button md-button--primary" href="quickstart/">Get Started</a>
<a class="md-button" href="https://github.com/benoitc/gunicorn">GitHub</a>
</div>
</div>
<div class="hero__code">
<pre><code class="language-console">$ pip install gunicorn
$ gunicorn example:app --workers 3</code></pre>
<div class="hero__version">Latest release: <span>{{ release }}</span></div>
<pre><code class="language-bash">pip install gunicorn
gunicorn myapp:app --workers 4</code></pre>
<div class="hero__version">v{{ release }}</div>
</div>
</div>
</div>
## Quickstart
<section class="pillars">
<div class="pillar">
<div class="pillar__icon">🚀</div>
<h3>Production-Proven</h3>
<p>Trusted by thousands of companies worldwide. The pre-fork worker model handles traffic spikes gracefully.</p>
</div>
<div class="pillar">
<div class="pillar__icon"></div>
<h3>Lightweight</h3>
<p>Minimal dependencies, simple configuration. Runs efficiently from containers to bare metal servers.</p>
</div>
<div class="pillar">
<div class="pillar__icon">🔌</div>
<h3>Compatible</h3>
<p>Works with any WSGI framework. Django, Flask, Pyramid—your app just runs. Now with ASGI support.</p>
</div>
</section>
1. Install Gunicorn into your application environment.
2. Point Gunicorn at your WSGI app: `gunicorn myproject.wsgi`.
3. Tune worker type, concurrency, and hooks using the rich [settings](reference/settings.md).
## Works With Your Stack
Need a longer walkthrough? Jump into the [install guide](install.md).
<div class="frameworks">
<div class="framework" title="Django">
<span class="framework__name">Django</span>
</div>
<div class="framework" title="Flask">
<span class="framework__name">Flask</span>
</div>
<div class="framework" title="FastAPI">
<span class="framework__name">FastAPI</span>
</div>
<div class="framework" title="Pyramid">
<span class="framework__name">Pyramid</span>
</div>
<div class="framework" title="Starlette">
<span class="framework__name">Starlette</span>
</div>
<div class="framework" title="Falcon">
<span class="framework__name">Falcon</span>
</div>
</div>
## Why teams choose Gunicorn
## Choose Your Worker
<section class="feature-grid">
<article class="feature-card">
<h3>Works with your framework</h3>
<p>Django, Flask, FastAPI, Pyramid, you name it&mdash;Gunicorn speaks WSGI so your stack just runs.</p>
<a href="run/">Running Gunicorn &rarr;</a>
<h3>Sync Workers</h3>
<p>The default. One request per worker. Simple, predictable, and perfect for most applications.</p>
<a href="design/#sync-workers">Learn more</a>
</article>
<article class="feature-card">
<h3>Flexible workers</h3>
<p>Sync, async, gevent, eventlet&mdash;choose the concurrency model that fits.</p>
<a href="reference/settings/#worker_class">Worker classes &rarr;</a>
<h3>Async Workers</h3>
<p>Gevent or Eventlet for thousands of concurrent connections. Ideal for I/O-bound workloads.</p>
<a href="design/#async-workers">Learn more</a>
</article>
<article class="feature-card">
<h3>Battle-tested hooks</h3>
<p>Lifecycle hooks let you instrument, reload, and extend Gunicorn to match your deployment requirements.</p>
<a href="custom/">Server hooks &rarr;</a>
<h3>Thread Workers</h3>
<p>Multiple threads per worker. Balance between concurrency and simplicity.</p>
<a href="reference/settings/#threads">Learn more</a>
</article>
<article class="feature-card">
<h3>Containers to bare metal</h3>
<p>Deploy with systemd, Kubernetes, Heroku, or Docker&mdash;the configuration stays predictable everywhere.</p>
<a href="deploy/">Deployment patterns &rarr;</a>
<h3>ASGI Workers <span class="badge badge--new">Beta</span></h3>
<p>Native asyncio support for FastAPI, Starlette, and other async frameworks.</p>
<a href="asgi/">Learn more</a>
</article>
</section>
## Documentation map
## Quick Links
- [Install](install.md): Set up Gunicorn in a clean environment.
- [Run](run.md): CLI usage and integration with frameworks.
- [Configure](configure.md): Combine CLI flags and config files effectively.
- [Settings reference](reference/settings.md): Generated from the Gunicorn source of truth.
- [Signals](signals.md): Manage worker lifecycle in production.
- [Instrumentation](instrumentation.md): Monitor metrics and logs.
<div class="quick-links">
<a href="quickstart/" class="quick-link">
<strong>Quickstart</strong>
<span>Get running in 5 minutes</span>
</a>
<a href="deploy/" class="quick-link">
<strong>Deployment</strong>
<span>Nginx, systemd, Docker</span>
</a>
<a href="reference/settings/" class="quick-link">
<strong>Settings</strong>
<span>100+ configuration options</span>
</a>
<a href="faq/" class="quick-link">
<strong>FAQ</strong>
<span>Common questions answered</span>
</a>
</div>
## Community & support
## Community
- Report bugs or request features on [GitHub Issues](https://github.com/benoitc/gunicorn/issues).
- Discuss strategies with maintainers in `#gunicorn` on [Libera Chat](https://libera.chat/).
- Contributions are welcome&mdash;see the [contributing guide](community.md#contributing) and say hi to the maintainers.
<div class="community-links">
- **[GitHub Issues](https://github.com/benoitc/gunicorn/issues)** — Report bugs and request features
- **[#gunicorn on Libera Chat](https://web.libera.chat/#gunicorn)** — Chat with the community
- **[Contributing](community/#contributing)** — Help improve Gunicorn
</div>

View File

@ -21,6 +21,7 @@
height: 1.8rem;
}
/* Hero Section */
.md-typeset .hero {
margin: 2rem 0 3rem;
padding: 3.5rem;
@ -52,11 +53,17 @@
.md-typeset .hero__copy h1 {
margin: 0 0 1rem;
font-size: 2.6rem;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.2;
}
.md-typeset .hero__tagline {
font-size: 1.1rem;
opacity: 0.95;
margin-bottom: 0;
}
.md-typeset .hero__cta {
margin-top: 1.75rem;
display: flex;
@ -66,7 +73,7 @@
.md-typeset .hero__code {
flex: 1 1 260px;
max-width: 420px;
max-width: 380px;
background: rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 1.5rem;
@ -92,8 +99,85 @@
.md-typeset .hero__version {
font-weight: 600;
letter-spacing: 0.01em;
font-size: 0.9rem;
opacity: 0.9;
}
.md-typeset .hero__logo {
height: 64px;
margin-bottom: 1.25rem;
}
[data-md-color-scheme="slate"] .md-typeset .hero__logo {
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
}
/* Pillars Section */
.md-typeset .pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin: 3rem 0;
}
.md-typeset .pillar {
text-align: center;
padding: 1.5rem;
}
.md-typeset .pillar__icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.md-typeset .pillar h3 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
color: var(--gunicorn-green-dark);
}
[data-md-color-scheme="slate"] .md-typeset .pillar h3 {
color: var(--gunicorn-green-light);
}
.md-typeset .pillar p {
margin: 0;
font-size: 0.95rem;
opacity: 0.85;
}
/* Frameworks Section */
.md-typeset .frameworks {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 2rem 0 3rem;
}
.md-typeset .framework {
background: var(--gunicorn-cream);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--gunicorn-green-dark);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-md-color-scheme="slate"] .md-typeset .framework {
background: rgba(45, 48, 45, 0.9);
border-color: rgba(255, 255, 255, 0.08);
color: #e8f5ea;
}
.md-typeset .framework:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
/* Feature Grid */
.md-typeset .feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@ -118,12 +202,20 @@
.md-typeset .feature-card h3 {
margin-top: 0;
font-size: 1.3rem;
font-size: 1.2rem;
color: var(--gunicorn-green-dark);
display: flex;
align-items: center;
gap: 0.5rem;
}
[data-md-color-scheme="slate"] .md-typeset .feature-card h3 {
color: var(--gunicorn-cream);
color: #e8f5ea;
}
.md-typeset .feature-card p {
font-size: 0.95rem;
opacity: 0.85;
}
.md-typeset .feature-card a {
@ -139,26 +231,94 @@
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}
.md-typeset .feature-card:hover a::after {
content: '\\2192';
opacity: 1;
transform: translateX(4px);
/* Badge */
.md-typeset .badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 4px;
vertical-align: middle;
}
.md-typeset .feature-card a::after {
content: '\\2192';
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateX(0);
.md-typeset .badge--new {
background: var(--gunicorn-green);
color: #fff;
}
/* Quick Links */
.md-typeset .quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.md-typeset .quick-link {
display: block;
padding: 1.25rem;
background: var(--gunicorn-cream);
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-md-color-scheme="slate"] .md-typeset .quick-link {
background: rgba(45, 48, 45, 0.9);
border-color: rgba(255, 255, 255, 0.05);
}
.md-typeset .quick-link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.md-typeset .quick-link strong {
display: block;
font-size: 1.1rem;
color: var(--gunicorn-green-dark);
margin-bottom: 0.25rem;
}
[data-md-color-scheme="slate"] .md-typeset .quick-link strong {
color: var(--gunicorn-green-light);
}
.md-typeset .quick-link span {
font-size: 0.9rem;
opacity: 0.75;
}
/* Community Links */
.md-typeset .community-links {
margin: 1.5rem 0;
}
.md-typeset .community-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.md-typeset .community-links li {
margin-bottom: 0.75rem;
}
/* Footer */
.md-footer-meta__inner {
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 960px) {
.md-typeset .hero {
padding: 2.25rem;
}
.md-typeset .hero__copy h1 {
font-size: 2.2rem;
font-size: 2rem;
}
}
@ -176,17 +336,8 @@
.md-typeset .hero__code {
width: 100%;
}
}
.md-footer-meta__inner {
flex-wrap: wrap;
}
.md-typeset .hero__logo {
height: 64px;
margin-bottom: 1.25rem;
}
[data-md-color-scheme="slate"] .md-typeset .hero__logo {
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
.md-typeset .pillars {
grid-template-columns: 1fr;
}
}