forked from knative/docs
/
home.html
352 lines (337 loc) · 13.6 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
{% extends "main.html" %} {% block content %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />
<div class="md-container home-page">
<section class="home-container">
<div class="md-grid md-typeset">
<div class="mdx-hero">
<div class="headline-section">
<h1 class="main-headline">
Knative is an Open-Source Enterprise-level<br>
solution to build Serverless and Event Driven Applications
</h1>
<p style="display: block">
<a href="{{ 'getting-started/' | url }}" class="md-button white md-button--primary">Try the tutorial</a>
<a href="{{ 'install/' | url }}" class="md-button white">Install Knative on your cluster</a>
</p>
<div class="trusted-by-container">
<h3 class="trusted-by">Trusted by</h3>
<div id="usedby">
<div class="logo">
<img src="images/corporate-logos/Google.svg" alt="" draggable="false" />
</div>
<div class="logo">
<img src="images/corporate-logos/vmware.svg" alt="" draggable="false" />
</div>
<div class="logo">
<img src="images/corporate-logos/IBM.svg" alt="" draggable="false" />
</div>
<div class="logo">
<img src="images/corporate-logos/Redhat.svg" alt="" draggable="false" />
</div>
<div class="logo triggermesh">
<img src="images/corporate-logos/triggermesh_logo.svg" alt="" draggable="false" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="need-to-know-more-container">
<div class="md-grid md-typeset">
<h1>Need to know more?</h1>
<p class="normal-text">
Learn about how Knative works with Kubernetes and the underlying ideas behind containers<br>
and serverless infrastructure.
</p>
<a href="{{ 'getting-started/' | url }}" class="md-button call-to-action">
Explore Knative
</a>
</div>
</section>
<section class="why-serverless-container">
<div class="md-grid md-typeset">
<h1>Why serverless containers?</h1>
<p class="normal-text">
Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
meaning that companies only use what they pay for. Knative is a platform-agnostic
solution for running serverless deployments.
</p>
<div class="img-table">
<div class="img-row">
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/blue_simple_abstractions_icon.svg"
onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Simpler Abstractions</h2>
<p class="normal-text">
Simplify your YAML with our custom CRDs
</p>
</div>
</div>
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/blue_autoscaling_icon.svg"
onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Autoscaling</h2>
<p class="normal-text">
Scale down to zero and up from zero
</p>
</div>
</div>
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/blue_progressive_rollouts_icon.svg"
onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Progressive Rollouts</h2>
<p class="normal-text">
Choose your rollout strategy depending on your needs
</p>
</div>
</div>
</div>
<div class="img-row">
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/blue_event_intergrations_icon.svg"
onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Event Integrations</h2>
<p class="normal-text">
Handle events from many sources
</p>
</div>
</div>
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/blue_handle_events_icon.svg"
onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Handle Events</h2>
<p class="normal-text">
Trigger handlers from the event broker
</p>
</div>
</div>
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/blue_plugable_icon.svg"
onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Plugable</h2>
<p class="normal-text">
Kubernetes native to be integrated and extended
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="knative-components-container">
<div class="md-grid md-typeset">
<h1>Knative Components</h1>
<p class="normal-text">
Knative has two main components that empower teams working with Kubernetes. Serving and<br>
Eventing work together to automate and manage tasks and applications.
</p>
<div class="components-content">
<img class="components-img" src="images/home-images/knative_flowchart_graphic.svg" alt="" draggable="false" />
<div class="text-table">
<p class="normal-text">
Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking,
autoscaling (even to zero), and revision tracking. Teams can focus on core logic using any programming
language.
</p>
<p class="normal-text">
Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data
stream with declarative event connectivity and developer friendly object models.
</p>
</div>
</div>
</div>
</section>
<section class="trying-it-all-container">
<div class="md-grid md-typeset">
<h1>Trying it all together</h1>
<div class="img-table">
<div class="img-row">
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/dev_focus_code_icon.svg" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Developers focus on code</h2>
<p class="normal-text">
From container to URL<br>
with less YAML config
</p>
</div>
</div>
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/dkblue_scale_icon.svg" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Scale up and down</h2>
<p class="normal-text">
Scale down to zero<br>
based on traffic patterns
</p>
</div>
</div>
<div class="img-col">
<div class="reason-img">
<img src="images/home-images/cloud_agnostic_icon.svg" alt="" draggable="false">
</div>
<div class="reason-text">
<h2>Cloud agnostic</h2>
<p class="normal-text">
Control traffic shifting<br>
for smoother rollouts
</p>
</div>
</div>
</div>
</div>
<a href="{{ 'install/' | url }}" class="md-button call-to-action">
Deploy Knative Today
</a>
</div>
</section>
<section class="case-studies-container">
<div class="md-grid md-typeset">
<h1>
<a href="{{ 'about/case-studies/' | url }}">Case Studies</a>
</h1>
<div class="cases-table">
<div class="col">
<a href="{{ 'about/case-studies/deepc/' | url }}">
<div class="logo">
<img class="deepc" src="images/case-studies/deepc.png" alt="" draggable="false" />
</div>
<hr>
<p class="normal-text">
"It should be possible for
somebody with an algorithm to have it on the platform in an hour"<br><br>
—Andrew Webber,<br>
Senior Software Engineer for deepc
</p>
</a>
</div>
<div class="col">
<a href="{{ 'about/case-studies/outfit7/' | url }}">
<div class="logo">
<img class="outfit7" src="images/case-studies/outfit7.png" alt="" draggable="false" />
</div>
<hr>
<p class="normal-text">
"The community support is
really great. The hands-on
experience with Knative was
so impressive. On the Slack
channel, we got actual
engineers to answer our questions"<br><br>
—Tilen Kavcic,<br>
Software Engineer for Outfit7
</p>
</a>
</div>
<div class="col">
<a href="{{ 'about/case-studies/puppet/' | url }}">
<div class="logo">
<img class="puppet" src="images/case-studies/puppet.png" alt="" draggable="false" />
</div>
<hr>
<p class="normal-text">
"I'm a strong believer in
working with open-source
vendors. We've made
contributions to numerous
projects, including Tekton,
Knative, Ambassador, and
gVisor --All of which we depend
on to make our product
functional."<br><br>
—Noah Fontes,<br>
Senior Principal Software Engineer for<br>Puppet
</p>
</a>
</div>
</div>
</div>
</section>
<section class="cncf-notice-container">
<h3>Knative is a <a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> incubation project</h3>
<img class="cncf-logo" src="images/home-images/cncf-color.png" alt="" draggable="false" />
</section>
<section class="whats-next-container">
<div class="md-grid md-typeset">
<h1>What's Next?</h1>
<div class="component-flex">
<div class="pane">
<a href="https://slack.cncf.io" title="Slack Link">
<div class="twemoji">
{% include ".icons/fontawesome/brands/slack.svg" %}
</div>
<h2>Talk to us on Slack in #knative</h2>
<p class="normal-text">Interested in learning more, speaking to other contributors, or finding answers?</p>
</a>
</div>
<div class="pane">
<a href="{{ 'community/contributing' | url }}" title="Contributing Link">
<div class="twemoji">
{% include ".icons/fontawesome/brands/github.svg" %}
</div>
<h2>Contributions Welcome</h2>
<p class="normal-text">Want to join the fun on Github? New users are always welcome!</p>
</a>
</div>
<div class="pane">
<a href="https://twitter.com/KnativeProject" title="Twitter Link">
<div class="twemoji">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
</div>
<h2>Follow us on Twitter / X</h2>
<p class="normal-text">For feature announcements, interesting Knative news, and other great things.</p>
</a>
</div>
</div>
</div>
</section>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
document.addEventListener("DOMContentLoaded", () => {
const logos = document.getElementById("usedby").getElementsByTagName("div");
for (let i = 0; i < logos.length - 1; i++) {
// Technically there's a chance two elements end up with the same
// random order in which case the result won't be truly random (it'll be based
// on the original document order). This really doesn't matter.
logos[i].style.order = Math.floor(Math.random() * 99);
}
logos[logos.length - 1].style.order = 100;
})
</script>
{% endblock %}
<!-- Application footer -->
{% block footer %}
{% include "partials/footer.html" %}
{% endblock %}