mirror of
https://github.com/caddyserver/website.git
synced 2025-04-21 20:46:15 -04:00
Continue work on marketing pages
This commit is contained in:
Matthew Holt
Francis Lavoie
parent
8d5010d0a6
commit
7c33410871
8 changed files with 887 additions and 624 deletions
24
new/download.html
Normal file
24
new/download.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Download Caddy</title>
|
||||||
|
{{include "/includes/head.html"}}
|
||||||
|
<link rel="stylesheet" href="/resources/css/download.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="hero">
|
||||||
|
{{include "/includes/header.html" "light-header"}}
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
Hello, world!
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
{{include "/includes/footer.html"}}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -22,8 +22,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
<section class="diagonal up feature">
|
<section class="diagonal up feature">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
<div class="legend">
|
||||||
|
Features in <span class="nonstandard">this color</span> are provided by available plugins.
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
Overview
|
Overview
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -185,6 +191,13 @@
|
||||||
<li>TLS</li>
|
<li>TLS</li>
|
||||||
<li>PKI</li>
|
<li>PKI</li>
|
||||||
<li>Events</li>
|
<li>Events</li>
|
||||||
|
<li class="nonstandard">Raw TCP & UDP</li>
|
||||||
|
<li class="nonstandard">SSH</li>
|
||||||
|
<li class="nonstandard">PHP</li>
|
||||||
|
<li class="nonstandard">Dynamic DNS</li>
|
||||||
|
<li class="nonstandard">Security</li>
|
||||||
|
<li class="nonstandard">Process supervision</li>
|
||||||
|
<li class="nonstandard">Profiling</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-row">
|
<div class="feature-row">
|
||||||
|
|
@ -201,12 +214,16 @@
|
||||||
<div class="feature-row">
|
<div class="feature-row">
|
||||||
<h4>Storage</h4>
|
<h4>Storage</h4>
|
||||||
<div class="benefits">
|
<div class="benefits">
|
||||||
Assets and state are stored in configurable storage modules. Third-party plugins add databases like Postgres and Redis, or orchestrators like Consul and Vault.
|
Assets and state, including certificates and OCSP staples, are stored in configurable storage backends. In fact, multiple instances of Caddy configured with the same storage are considered part of a cluster and can coordinate automatically.
|
||||||
</div>
|
</div>
|
||||||
<div class="detail">
|
<ul class="detail">
|
||||||
<li>File system</li>
|
<li>File system</li>
|
||||||
<li>Embedded (in-memory)</li>
|
<li>Embedded (in-memory)</li>
|
||||||
</div>
|
<li class="nonstandard">Postgres</li>
|
||||||
|
<li class="nonstandard">Redis</li>
|
||||||
|
<li class="nonstandard">Vault</li>
|
||||||
|
<li class="nonstandard">Consul</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -223,18 +240,212 @@
|
||||||
Command line interface
|
Command line interface
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
Caddy's CLI is not only useful—it's <i>helpful</i>. While most server CLIs stop at running the process and reloading config, Caddy's CLI goes the extra lightyear to help make administering your web server a breeze.
|
Caddy's CLI is not only useful—it's <i>helpful</i>. While most server CLIs merely run the process and reload config, Caddy's CLI goes the extra lightyear to help make administering your modern web server a breeze.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Plugins can register their own subcommands to extend Caddy's CLI.
|
Plugins can register their own subcommands to extend Caddy's CLI.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="feature-list">
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Command help</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
If you misspell a command or flag, miss an argument, or don't know the subcommand, help text is automatically printed. You can also access overall command help or subcommand help with <code>caddy help</code> or <code>-h</code>.
|
||||||
|
</div>
|
||||||
|
<div class="detail">
|
||||||
|
Built-in, automatic (<code>man</code> pages can also be generated)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Admin API wrappers</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Several subcommands use administration API endpoints for use with the CLI to help you perform common tasks like loading config from files or stopping the server.
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>Adapt config to JSON</li>
|
||||||
|
<li>Start the server, optionally with config</li>
|
||||||
|
<li>Gracefully reload configuration</li>
|
||||||
|
<li>Stop the server</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Binary utilities</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Since custom builds of Caddy are so common, several commands exist to help you manage and get detailed information about your build.
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>Detailed build metadata</li>
|
||||||
|
<li>List installed config modules</li>
|
||||||
|
<li>List dependencies</li>
|
||||||
|
<li>Add and remove plugin packages</li>
|
||||||
|
<li>Print the version</li>
|
||||||
|
<li>Upgrade the Caddy binary</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Configuration utilities</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
If you choose to use configuration files, Caddy's CLI helps you manage them.
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>Format Caddyfile</li>
|
||||||
|
<li>Validate configuration</li>
|
||||||
|
<li>List dependencies</li>
|
||||||
|
<li>Add and remove plugin packages</li>
|
||||||
|
<li>Print the version</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Module utilities</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Modules may register their own subcommands to provide common functionality that can be utilized without a config document.
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>Static file server</li>
|
||||||
|
<li>HTTP reverse proxy</li>
|
||||||
|
<li>Static HTTP responses (templateable)</li>
|
||||||
|
<li>Storage import/export (backup/restore)</li>
|
||||||
|
<li>Hash password for use with HTTP basic auth</li>
|
||||||
|
<li>Export file browse template</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Integration utilities</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Several subcommands can help you integrate Caddy into your shell environment.
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>Generate shell completion script</li>
|
||||||
|
<li>Print the environment</li>
|
||||||
|
<li>Generate <code>man</code> pages</li>
|
||||||
|
<li>Install Caddy-managed root CA into trust stores</li>
|
||||||
|
<li>Remove Caddy-managed root CA from trust stores</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>System signals</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Caddy has support for common operating system signals/interrupts, with subtle differences in behavior for each one.
|
||||||
|
<p>
|
||||||
|
<a href="/docs/command-line#signals">Signal documentation</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>INT (graceful stop)</li>
|
||||||
|
<li>QUIT</li>
|
||||||
|
<li>TERM</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Exit codes</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Whether Caddy exits successfully or with an error, the <a href="/docs/command-line#exit-codes">exit code</a> can give a hint to your process supervisor or script how to handle that.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="feature">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h2>
|
||||||
|
Configuration
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
We've designed Caddy so that its configuration not only provides access to features, but <i>it IS a feature</i> in and of itself.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
No more quibbling over which config file format is the best: use whatever you want! Caddy's <a href="/docs/config-adapters">config adapters</a> allow you to use whatever config format you prefer.
|
||||||
|
</p>
|
||||||
|
<div class="feature-list">
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Native config format</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Caddy's native configuration format is ubiquitous: it has tooling in nearly every operating system, platform, programming language, and API ecosystem. Almost all other formats can be translated down into JSON, which balances human readability and programmability. You'll find it a powerful ally of your web server.
|
||||||
|
</div>
|
||||||
|
<div class="detail">
|
||||||
|
JSON
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Config adapters</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
You can always write your config in another format and with config adapters, Caddy will implicitly translate it into JSON for you so you can work with what you like.
|
||||||
|
</div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>Caddyfile</li>
|
||||||
|
<li class="nonstandard">JSON 5</li>
|
||||||
|
<li class="nonstandard">JSON-C</li>
|
||||||
|
<li class="nonstandard">NGINX Conf</li>
|
||||||
|
<li class="nonstandard">YAML</li>
|
||||||
|
<li class="nonstandard">CUE</li>
|
||||||
|
<li class="nonstandard">TOML</li>
|
||||||
|
<li class="nonstandard">HCL</li>
|
||||||
|
<li class="nonstandard">Dhall</li>
|
||||||
|
<li class="nonstandard">MySQL</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Human-friendly config</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
The Caddyfile is most users' favorite way to write their web server config by hand because its syntax is forgiving while also being designed with a structure that makes it easy to read and write. It is translated to JSON automatically.
|
||||||
|
</div>
|
||||||
|
<div class="detail">
|
||||||
|
Caddyfile
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Export</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Caddy's administration API allows you to have runtime access to the current configuration in JSON format with a simple GET request.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Config API</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
Caddy receives its configuration through an API endpoint, which can accept JSON or any other format it has a config adapter for.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>Config files</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
If you prefer normal commands to manage configuration, Caddy's CLI wraps the API endpoints for you.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="light gray diagonal up feature">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h2>
|
||||||
|
HTTP File Server
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Caddy's file server is best-in-class.
|
||||||
|
</p>
|
||||||
|
<div class="feature-list">
|
||||||
|
<div class="feature-row">
|
||||||
|
<h4>TODO...</h4>
|
||||||
|
<div class="benefits">
|
||||||
|
TODO...
|
||||||
|
</div>
|
||||||
|
<div class="detail">
|
||||||
|
TODO...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
{{include "/includes/footer.html"}}
|
{{include "/includes/footer.html"}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -123,6 +123,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
<div class="wavy-top">
|
<div class="wavy-top">
|
||||||
<div class="bgtext">
|
<div class="bgtext">
|
||||||
Every<br>
|
Every<br>
|
||||||
|
|
@ -409,6 +411,8 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
{{include "/includes/footer.html"}}
|
{{include "/includes/footer.html"}}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -103,15 +103,12 @@ body {
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
background-color: var(--body-bg);
|
background-color: var(--body-bg);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-image:
|
|
||||||
radial-gradient(at calc(50% - min(25vw, 800px)) -10%, hsl(137.64deg, 100%, 92.42%) 0px, transparent min(15%, 500px)),
|
|
||||||
radial-gradient(at calc(50% + min(25vw, 800px)) -10%, hsl(201.2deg, 68%, 90.2%) 0px, transparent min(15%, 500px));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark body {
|
section.dark,
|
||||||
background-image:
|
footer {
|
||||||
radial-gradient(at calc(50% - min(35vw, 700px)) -10%, hsl(129.5deg, 100%, 12.4%) 0px, transparent min(25%, 600px)),
|
background-color: #002020;
|
||||||
radial-gradient(at calc(50% + min(35vw, 700px)) -10%, hsl(201deg, 100%, 19.33%) 0px, transparent min(25%, 600px))
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
main a {
|
main a {
|
||||||
|
|
@ -272,6 +269,16 @@ button,
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
color: rgb(54 206 255);
|
||||||
|
border: 1px solid rgb(54 206 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
color: white;
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
button.primary,
|
button.primary,
|
||||||
.button.primary {
|
.button.primary {
|
||||||
background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%);
|
background: linear-gradient(135deg, white 25%, rgba(167, 183, 193) 80%);
|
||||||
|
|
|
||||||
|
|
@ -43,8 +43,10 @@ body {
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(at calc(50% - min(25vw, 800px)) -10%, hsl(137.64deg, 100%, 92.42%) 0px, transparent min(15%, 500px)),
|
radial-gradient(at calc(50% - min(25vw, 800px)) -10%, hsl(137.64deg, 100%, 92.42%) 0px, transparent min(15%, 500px)),
|
||||||
radial-gradient(at calc(50% + min(25vw, 800px)) -10%, hsl(201.2deg, 68%, 90.2%) 0px, transparent min(15%, 500px));
|
radial-gradient(at calc(50% + min(25vw, 800px)) -10%, hsl(201.2deg, 68%, 90.2%) 0px, transparent min(15%, 500px));
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dark body {
|
.dark body {
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(at calc(50% - min(35vw, 700px)) -10%, hsl(129.5deg, 100%, 12.4%) 0px, transparent min(25%, 600px)),
|
radial-gradient(at calc(50% - min(35vw, 700px)) -10%, hsl(129.5deg, 100%, 12.4%) 0px, transparent min(25%, 600px)),
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
padding-bottom: 50px;
|
padding-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.datagrid {
|
/* .datagrid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
|
|
@ -17,11 +17,30 @@
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
margin-bottom: -100px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--text-color-muted);
|
||||||
|
text-align: center;
|
||||||
|
max-width: 750px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend .nonstandard {
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-list {
|
.feature-list {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
margin: 50px 0 100px;
|
margin: 50px 0 125px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-row {
|
.feature-row {
|
||||||
|
|
@ -32,6 +51,10 @@
|
||||||
border-bottom: 2px dashed #a4c8ff25; /* #e6eaf0 */
|
border-bottom: 2px dashed #a4c8ff25; /* #e6eaf0 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.feature-row:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.feature-row .benefits {
|
.feature-row .benefits {
|
||||||
color: var(--text-color-muted);
|
color: var(--text-color-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -53,6 +76,14 @@
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nonstandard {
|
||||||
|
color: #e76100; /* #005c94 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .nonstandard {
|
||||||
|
color: #fb8a26;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* TODO: Figure this out */
|
/* TODO: Figure this out */
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
|
|
|
||||||
|
|
@ -78,15 +78,6 @@ h2 {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.button {
|
|
||||||
color: rgb(54 206 255);
|
|
||||||
border: 1px solid rgb(54 206 255);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
color: white;
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.cool {
|
.button.cool {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -196,12 +187,6 @@ section {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
section.dark,
|
|
||||||
footer {
|
|
||||||
background-color: #002020;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.gray {
|
section.gray {
|
||||||
background-color: #f5f8f9;
|
background-color: #f5f8f9;
|
||||||
}
|
}
|
||||||
|
|
@ -310,7 +295,7 @@ h3.green {
|
||||||
color: #23a460; border-color: #23a460;
|
color: #23a460; border-color: #23a460;
|
||||||
}
|
}
|
||||||
h3.purple {
|
h3.purple {
|
||||||
color: rgb(151, 39, 151); border-color: rgb(151, 39, 151);
|
color: rgb(179, 59, 179); border-color: rgb(179, 59, 179);
|
||||||
}
|
}
|
||||||
h3.blue {
|
h3.blue {
|
||||||
color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
|
color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
|
||||||
|
|
|
||||||
|
|
@ -462,8 +462,7 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
<section class="diagonal down dark feature">
|
<section class="diagonal down dark feature">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h2>
|
<h2>
|
||||||
|
|
@ -629,7 +628,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
{{include "/includes/footer.html"}}
|
{{include "/includes/footer.html"}}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue