mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-24 22:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

More work on marketing pages

Browse source
This commit is contained in:
Matthew Holt 2023-11-21 10:11:05 -07:00 • committed by Francis Lavoie
parent 48645cedc1
commit 14e9b01bf4
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
8 changed files with 426 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

28
new/index.html
View file

@ -35,7 +35,7 @@
<div class="action-buttons">
<a href="/download" class="button primary">Download</a>
<a href="/docs/" class="button cool">Docs<sh></sh></a>
<iframe src="https://ghbtns.com/github-btn.html?user=caddyserver&amp;repo=caddy&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="160px" height="30px" class="github-stars" style="margin: 0 auto; align-self: center;"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=caddyserver&amp;repo=caddy&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="160px" height="30px" class="github-stars"></iframe>
</div>
</div>
<div>
@ -74,7 +74,7 @@
<img src="/resources/images/sponsors/tailscale.svg" alt="Tailscale" title="Tailscale" height="22">
</a>
<a href="https://les-tilleuls.coop/" target="_blank">
<img src="/resources/images/sponsors/les-tilleuls.svg" alt="Les-Tilleuls" title="Les-Tilleuls" height="25">
<img src="/resources/images/sponsors/les-tilleuls-white.svg" alt="Les-Tilleuls" title="Les-Tilleuls" height="25">
</a>
<a href="https://framer.com" target="_blank">
<img src="/resources/images/sponsors/framer.svg" alt="Framer" title="Framer" height="32">
@ -222,7 +222,7 @@
<div class="demobox">
<h2 id="on-demand-demo">Experience it</h2>
<p>
<b>Discover Caddy's automagic HTTPS features.</b>
<b>Discover Caddy's automagic HTTPS features with our hosted demo.</b>
</p>
<p>
Point any subdomain named <b><code>caddydemo</code></b> to:
@ -230,11 +230,11 @@
<p class="demo-ips">
<code>
<span class="record-type">A</span>
<span class="demo-ip">1.2.3.4</span>
<span class="demo-ip">138.68.4.62</span>
</code>
<code>
<span class="record-type">AAAA</span>
<span class="demo-ip">::f00</span>
<span class="demo-ip">2604:a880:2:d0::9dd:9001</span>
</code>
</p>
<p>
@ -245,9 +245,10 @@
</p>
<div class="demo-help">
<p>
<b>Not working?</b> Make sure to use a subdomain of a registered domain, not a "sub-subdomain."
Verify you have created the public DNS records shown above with the correct values.
You may have to allow time for propagation. Consult your DNS provider's documentation or support for more information.
<b>Not working?</b> Make sure to use a direct subdomain of a registered domain, not a "sub-subdomain."
Verify you have created the public DNS records shown above with the correct addresses.
You may have to allow time for propagation. Consult your DNS provider's documentation or support for assistance.
Your client must set the TLS ServerName indication (most do).
</p>
<p>
<b>Example subdomains that could work:</b> <code>caddydemo.example.net</code>, <code>caddydemo.example.co.uk</code>
@ -336,6 +337,11 @@
</div>
</div>
<div class="action-buttons">
<a href="/download" class="button primary">Download</a>
<a href="/docs/" class="button secondary">Docs<sh></sh></a>
</div>
</div>
</section>
@ -394,13 +400,13 @@
<div class="experience-quote">
"With its extensible architecture and on-line config API, Caddy powers many of Stripe's internal systems."
</div>
<div class="experience-credit">
<!-- <div class="experience-credit">
<img src="https://preview.tabler.io/static/avatars/002m.jpg" class="experience-picture">
<cite>
<b>Sean Lin</b>
Example product manager
</cite>
</div>
</div> -->
</div>
</div>
</div>
@ -588,7 +594,7 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
<div class="col">
<h3 class="green">Unlimited power</h3>
<p>
Nearly every part of the config that "does something" is pluggable. Caddy offers so much in such a lean package.
Nearly every part of the config that "does something" is pluggable. Caddy offers unlimited capabilities in such a lean package.
</p>
</div>
<div class="col">

149
new/on-demand-tls.html Normal file
View file

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html>
<head>
<title>Caddy is the best web server for HTTPS</title>
{{include "/includes/head.html"}}
<link rel="stylesheet" href="/resources/css/marketing.css">
<link rel="stylesheet" href="/resources/css/on-demand.css">
<link rel="canonical" href="https://caddyserver.com/on-demand-tls">
</head>
<body>
<div class="hero">
{{include "/includes/header.html" "dark-header"}}
<div class="wrapper">
<div class="hero-content">
<h1>
You just got served
<div class="subheading">
... a dynamically-provisioned TLS certificate by Caddy!
</div>
</h1>
</div>
</div>
</div>
<main>
<section class="diagonal up feature">
<div class="wrapper">
<h2>
What happened?
</h2>
<p>
Caddy automatically obtained a certificate for your domain, <code>{{.Req.Host}}</code>, without any change to the server's configuration. We call this technology On-Demand TLS, and it's an exclusive feature of Caddy.
</p>
<p>
With On-Demand TLS, no config changes are required to serve more domains over HTTPS. This is perfect for servers hosting content or APIs for customer-owned domains because your HTTPS deployment scales as tall and wide as your business does.
</p>
<p>
Caddy's technology is the secret sauce of many SaaS products that offer custom domains. It generates hundreds of thousands of dollars in revenue every year while saving businesses tens of thousands of dollars in development and maintenance costs.
</p>
<p>
Fun fact: this feature earned standing ovations at more than one tech demo back in 2015 and 2016 when it was first introduced.
</p>
</div>
</section>
<section class="diagonal down gray feature">
<div class="wrapper">
<h2>
Easy, self-hosted HTTPS for customer domains
</h2>
<p>
Use On-Demand TLS to grow your custom-domain SaaS business in a matter of minutes. A minimal config looks like this:
</p>
<div class="asides">
<div class="spacing">
<div class="rollover" data-rollover="rollover-abuse">
<h3 class="purple">1. Prevent abuse</h3>
<p>
First, you'll configure an internal endpoint that Caddy can "ask" if a certificate should be allowed for a domain. This endpoint usually looks up the domain in a list or database and returns HTTP 200 if it's allowed.
</p>
</div>
<div class="rollover" data-rollover="rollover-ondemand">
<h3 class="green">2. Enable On-Demand TLS</h3>
<p>
To finish, enable On-Demand TLS for a catch-all site.
</p>
</div>
</div>
<div>
<div class="display right">
<code class="light">{
<span class="rollover-abuse rollover-purple"> on_demand_tls {
ask http://localhost:9123/check
}</span>
}
https:// {
<span class="rollover-ondemand rollover-green"> tls {
on_demand
}</span>
<span class="comment"># reverse_proxy, etc...</span>
}
<span class="comment"># other sites...</span></code>
</div>
</div>
</div>
<p>
Actual production configs typically have more, but this is the minimal configuration needed to serve domain names that aren't in your control. All that's left is for the domain owner to set their DNS records (described below).
</p>
</div>
</section>
<section class="diagonal up feature">
<div class="wrapper">
<h2>
Brilliant customer experience
</h2>
<p>
For domain owners, the flow is even simpler: set DNS records. The first visit to their site will provision a TLS certificate. Works like magic!
</p>
<div class="asides">
<div class="spacing">
<div>
<h3 class="purple">1. Point DNS records</h3>
<p>
The owner of the domain sets A and/or AAAA records to point to your Caddy instance.
</p>
</div>
<!-- <div class="rollover" data-rollover="rollover-ondemand">
<h3 class="green">2. Visit site</h3>
<p>
Once the DNS propagates, the first request with their domain to your server will provision a TLS certificate.
</p>
</div> -->
</div>
<div>
<div class="display right">
<code class="light"><span class="comment"># Examples shown. In real life, users
# point domains to your IP address.</span>
A -> 203.0.113.42
AAAA -> 2001:db8:900d:1337</code>
</div>
</div>
</div>
<p>
There is no step 2. Caddy will obtain and serve a certificate for their domain as soon as a connection is made to it. Caddy keeps the certificates renewed as long as connections keep coming in. Once they stop, Caddy will let the certificate expire and then delete it automatically.
</p>
</div>
</section>
</main>
{{include "/includes/footer.html"}}
</body>
</html>

5
new/resources/css/common.css
View file

@ -286,6 +286,7 @@ button.primary,
color: #222;
font-weight: bold;
border: none;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
}
button.primary:hover,
@ -420,8 +421,8 @@ button.primary .hover-splash,
font-family: Poppins, ui-rounded;
font-weight: 600;
color: var(--dropdown-link-title-color);
font-size: 18px;
margin-bottom: 5px;
font-size: 20px;
margin-bottom: 14px;
}
.dropdown .col {

43
new/resources/css/home.css
View file

@ -30,7 +30,7 @@ h1 .color-dodge {
}
h1 .the {
font-size: 75px;
font-size: 60%;
line-height: 1;
}
@ -40,7 +40,6 @@ h1 .subheading {
.asides {
display: flex;
flex-wrap: wrap;
@ -513,36 +512,30 @@ img.cite {
.franken {
background-color: #b3d133;
color: #390075;
}
@media (max-width: 1350px) {
h1 {
font-size: 95px;
}
h1 .subheading {
font-size: 30px;
}
}
@media (max-width: 1000px) {
h1 {
text-align: center;
}
.asides {
flex-direction: column;
}
.action-buttons {
margin-bottom: 55px;
}
}
@media (max-width: 720px) {
.display {
margin-top: 50px;
margin-bottom: 50px;
}
.display.right > * {
transform: none;
}
.display.left > * {
transform: none;
}
.asides > * {
margin-right: 0;
justify-content: center;
}
}

224
new/resources/css/marketing.css
View file

@ -326,6 +326,197 @@ section.dark h3.blue {
section.dark h3.yellow {
color: #ffcb50; border-color: #ffcb50;
}
.asides {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 100px auto 150px auto;
align-items: center;
}
.hero-content .asides {
margin-top: 0;
margin-bottom: 75px;
}
.asides.top {
align-items: stretch;
}
.asides > * {
flex: 1;
margin-right: 50px;
min-width: 0; /* kind of a hack that allows proper sizing of pre children; see https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */
min-width: 300px;
width: 100%;
}
.asides > :last-child {
margin-right: 0;
}
.asides-40-60 > :first-child { max-width: 40%; }
.asides-40-60 > :last-child { max-width: 60%; }
.asides-60-40 > :first-child { max-width: 60%; }
.asides-60-40 > :last-child { max-width: 40%; }
.asides h2 {
text-align: left;
max-width: none;
}
.asides p {
margin-left: 0;
margin-right: 0;
}
.action-buttons {
display: flex;
gap: 1.5em;
margin-top: 55px;
align-items: center;
}
.caption {
margin-top: 10px;
font-size: 14px;
text-align: center;
}
.hero-content .caption {
color: #fff;
}
#video-demo {
display: block;
margin-bottom: 2em;
}
div.ap-wrapper div.ap-player {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
div.ap-wrapper:fullscreen div.ap-player {
transform: none;
}
.ap-player pre.ap-terminal {
border-color: transparent;
background-color: transparent;
}
.display {
perspective: 1500px;
}
.display code {
border-radius: 10px;
width: 100%;
}
.display code {
max-width: 800px;
font-size: 110%;
display: block;
position: relative;
padding: 20px 40px;
white-space: pre;
font-weight: bold;
overflow-x: auto;
box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1);
}
.display.left code {
box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.1);
}
.display.right > * {
transform: rotateY(-25deg);
}
.display.left > * {
transform: rotateY(25deg);
}
.display code.light {
background: #fff linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(241,241,241,0.5) 46%,rgba(225,225,225,0.5) 46.25%,rgba(246,246,246,0) 100%);
color: #222;
}
.display code.dark,
.ap-player {
/* background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%); */
background: rgb(0 0 0 / .7) linear-gradient(135deg, transparent 0%, rgb(200 200 200 / 0.25) 46%, rgb(200 200 200 / .15) 46.5%, transparent 100%);
color: #fff;
}
.light .display code.dark {
background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%);
}
.display .comment {
color: gray;
}
.blinking {
animation: blinking 1s infinite;
background-color: #fff;
width: .5em;
height: 1.2em;
position: relative;
top: 5px;
display: inline-block;
}
@keyframes blinking {
0% { background-color: #fff; }
45% { background-color: #fff; }
60% { background-color: transparent; }
99% { background-color: transparent; }
100% { background-color: #fff; }
}
.rollover-green,
.rollover-purple,
.rollover-blue,
.rollover-yellow {
transition: background-color 250ms;
}
.rollover-green.show { background-color: #41e68fc7; }
.rollover-purple.show { background-color: #a52fa59d; }
.rollover-blue.show { background-color: #0a62aaa3; }
.rollover-yellow.show { background-color: #ffcb50; }
@ -440,3 +631,36 @@ section.dark h3.yellow {
.sponsorship-primer p:last-child {
margin-bottom: 0;
}
@media (min-width: 1001px) {
.hero-content .display {
transform: scale(1.1);
position: relative;
left: -7%;
}
/* div.ap-wrapper div.ap-player {
} */
}
@media (max-width: 1000px) {
.asides {
flex-direction: column;
}
.asides > * {
margin-right: 0;
}
.display {
margin-top: 50px;
margin-bottom: 50px;
}
.display.right > * {
transform: none;
}
.display.left > * {
transform: none;
}
}

4
new/resources/css/on-demand.css Normal file
View file

@ -0,0 +1,4 @@
.hero-content {
margin-bottom: 0;
padding-bottom: 50px;
}

11
new/resources/js/common.js
View file

@ -185,6 +185,17 @@ on('mouseover', '.button:not(.cool), button:not(.cool)', (e) => {
});
// mouseover highlights for feature sections that explain config
on('mouseover', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target;
$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
});
on('mouseout', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target;
$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
});
// immediately set the configured theme to avoid flash
setTheme(getTheme());