mirror of https://github.com/knative/docs.git
464 lines
15 KiB
HTML
464 lines
15 KiB
HTML
{% extends "main.html" %} {% block content %}
|
||
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />
|
||
|
||
<div class="md-container home-page">
|
||
<section>
|
||
<div class="hero">
|
||
<div class="md-grid md-typeset">
|
||
<div class="headline-section">
|
||
<h1 class="main-headline">
|
||
Providing the building blocks for <br />
|
||
creating modern, cloud-based applications
|
||
</h1>
|
||
<h2 class="secondary-headline">
|
||
The easiest way to build and run serverless workloads on Kubernetes.
|
||
Built by the community, for modern cloud-native teams
|
||
</h2>
|
||
<p class="call-to-action">
|
||
<a
|
||
href="{{ 'docs/getting-started/tutorial' | url }}"
|
||
class="md-button md-button--primary"
|
||
>Try the tutorial</a
|
||
>
|
||
<a
|
||
href="{{ 'docs/install/' | url }}"
|
||
class="md-button"
|
||
>Install Knative on your cluster</a
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="trusted-by-container">
|
||
<h3 class="trusted-by">Trusted by</h3>
|
||
<div class="scroller">
|
||
<div class="scroller__inner"></div>
|
||
</div>
|
||
<div class="scroller" data-direction="right">
|
||
<div class="scroller__inner"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="need-to-know-more-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>What is Knative?</h1>
|
||
<p class="normal-text">
|
||
Learn about how Knative works with Kubernetes and the underlying ideas
|
||
behind containers <br class="br" />
|
||
and serverless infrastructure.
|
||
</p>
|
||
<iframe
|
||
width="560"
|
||
height="315"
|
||
src="https://www.youtube.com/embed/69OfdJ5BIzs?si=3rM6m3LfA-OMCmCO"
|
||
title="YouTube video player"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
referrerpolicy="strict-origin-when-cross-origin"
|
||
allowfullscreen
|
||
></iframe>
|
||
</div>
|
||
</section>
|
||
<section class="serverless-outer">
|
||
<div class="why-serverless-container md-grid">
|
||
<div class="serverless-content-block">
|
||
<h1>Why serverless containers?</h1>
|
||
<p>
|
||
Express scalable application architecture without distractions.
|
||
Serverless gives you a vocabulary for expressing web and event-based
|
||
applications without getting mired in the details of scaling and
|
||
infrastructure libraries. Behind the scenes, Knative optimizes your
|
||
deployment to match demand.
|
||
</p>
|
||
</div>
|
||
<div class="serverless-feature-block">
|
||
<div class="card feature">
|
||
<div class="img-wrapper">
|
||
<img
|
||
src="images/home-images/blue_functions_icon.svg"
|
||
alt=""
|
||
draggable="false"
|
||
/>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Functions</h2>
|
||
<p class="normal-text">
|
||
Application template patterns you can version and update
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="card feature">
|
||
<div class="img-wrapper">
|
||
<img
|
||
src="images/home-images/blue_http_first_icon.svg"
|
||
alt=""
|
||
draggable="false"
|
||
/>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>HTTP-first</h2>
|
||
<p class="normal-text">Serve and scale HTTP/2, gRPC, and MCP</p>
|
||
</div>
|
||
</div>
|
||
<div class="card feature">
|
||
<div class="img-wrapper">
|
||
<img
|
||
src="images/home-images/blue_event_based_icon.svg"
|
||
alt=""
|
||
draggable="false"
|
||
/>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Event-based</h2>
|
||
<p class="normal-text">
|
||
Route and handle asynchronous events just like HTTP
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="card feature">
|
||
<div class="img-wrapper">
|
||
<img
|
||
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">
|
||
Extract events from existing services or define your own
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="card feature">
|
||
<div class="img-wrapper">
|
||
<img
|
||
src="images/home-images/blue_kubernetes_integrated_icon.svg"
|
||
alt=""
|
||
draggable="false"
|
||
/>
|
||
</div>
|
||
<div class="reason-text">
|
||
<h2>Kubernetes-integrated</h2>
|
||
<p class="normal-text">Trigger handlers from the event broker</p>
|
||
</div>
|
||
</div>
|
||
<div class="card feature">
|
||
<div class="img-wrapper">
|
||
<img
|
||
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>
|
||
</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>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="case-studies-container">
|
||
<div class="md-grid md-typeset">
|
||
<h1>Case Studies & Testimonies</h1>
|
||
<a href="{{ 'about/testimonials/' | url }}">
|
||
<div class="card kelsey-testimonial">
|
||
<img src="images/home-images/kelsey.png" alt="Kelsey Hightower" width="139px" height="140px"/>
|
||
<div>
|
||
<p class="italize">
|
||
<span class="quote">"</span>If you want to build a
|
||
function-as-a-service, then you can build on top of Knative, which
|
||
has a serving framework, meaning when a request comes in you can
|
||
scale a workload up and down on demand.<span class="quote"
|
||
>"</span
|
||
>
|
||
</p>
|
||
<p class="quote-author">— Kelsey Hightower</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div class="cases-table">
|
||
<a href="{{ 'about/case-studies/sva/' | url }}">
|
||
<div class="card col">
|
||
<div class="logo">
|
||
<img
|
||
class="sva"
|
||
src="images/case-studies/sva.png"
|
||
alt=""
|
||
draggable="false"
|
||
/>
|
||
</div>
|
||
<p class="normal-text">
|
||
"Knative allowed the team to centralize their system, scale,
|
||
audit, and even select events while enforcing policies and
|
||
simplifying the architecture"<br />
|
||
</p>
|
||
</div>
|
||
</a>
|
||
<a href="{{ 'about/case-studies/ibm/' | url }}">
|
||
<div class="card col">
|
||
<div class="logo">
|
||
<img
|
||
class="ibm"
|
||
src="images/case-studies/ibm.png"
|
||
alt="IBM logo"
|
||
draggable="false"
|
||
width="75"
|
||
/>
|
||
</div>
|
||
<p class="normal-text">
|
||
"The introduction of the ML training infrastructure using Knative
|
||
Eventing has enabled us to establish a well-defined operational
|
||
boundary for the service teams."<br />
|
||
</p>
|
||
</div>
|
||
</a>
|
||
<a href="{{ 'about/case-studies/pnc/' | url }}">
|
||
<div class="card col" id="pnc-testimonial">
|
||
<div class="logo">
|
||
<img
|
||
class="pnc"
|
||
src="images/case-studies/pnc_bank.png"
|
||
alt=""
|
||
draggable="false"
|
||
/>
|
||
</div>
|
||
<p class="normal-text">
|
||
"The power of Knative’s eventing and serverless features allows
|
||
PNC to bridge processes between Apache Kafka and CI/CD toolchain
|
||
events and achieve this automated state."<br />
|
||
</p>
|
||
</div>
|
||
</a>
|
||
</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>
|
||
</div>
|
||
{% endblock %} {% block scripts %} {{ super() }}
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
// Suggested size for the logo images = 320x96
|
||
const adopters = [
|
||
{
|
||
logoPath: "images/corporate-logos/alauda.svg",
|
||
url: "https://www.alauda.io/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/alibaba_cloud.svg",
|
||
url: "https://cs.console.aliyun.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/bloomberg.svg",
|
||
url: "https://www.bloomberg.net/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/blue_origin.svg",
|
||
url: "https://www.blueorigin.com/",
|
||
},
|
||
{ logoPath: "images/corporate-logos/box.svg", url: "https://box.com/" },
|
||
{
|
||
logoPath: "images/corporate-logos/chainguard.svg",
|
||
url: "https://chainguard.dev/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/control_plane.svg",
|
||
url: "https://www.controlplane.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/deepc.svg",
|
||
url: "https://www.deepc.ai/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/fulcrum.svg",
|
||
url: "https://www.fulcrumapp.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/gojek.svg",
|
||
url: "https://www.gojek.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/google.svg",
|
||
url: "https://cloud.google.com/anthos/run",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/ibm.svg",
|
||
url: "https://cloud.ibm.com/codeengine",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/ka-nabell_japan.svg",
|
||
url: "https://www.ka-nabell.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/kubesphere.svg",
|
||
url: "https://kubesphere.io/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/liquidx.svg",
|
||
url: "https://www.liquidx.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/manomano.svg",
|
||
url: "https://www.manomano.es/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/optum.svg",
|
||
url: "https://optum.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/property_xyz.svg",
|
||
url: "https://property.xyz/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/redhat.svg",
|
||
url: "https://www.openshift.com/learn/topics/serverless",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/scaleway.svg",
|
||
url: "https://www.scaleway.com/en",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/sonavi_labs.svg",
|
||
url: "https://www.sonavilabs.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/spider.svg",
|
||
url: "https://www.spider.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/tata_comm.svg",
|
||
url: "https://www.tatacommunications.com/solutions/cloud/platforms",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/vmware.svg",
|
||
url: "https://network.tanzu.vmware.com/products/serverless",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/y_meadows.svg",
|
||
url: "https://www.ymeadows.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/grerook.svg",
|
||
url: "https://www.greyrook.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/high_cohesion.svg",
|
||
url: "https://www.highcohesion.com/",
|
||
},
|
||
{
|
||
logoPath: "images/corporate-logos/vhive.svg",
|
||
url: "https://vhive-serverless.github.io/",
|
||
},
|
||
{ logoPath: "images/corporate-logos/sva.svg", url: "https://sva.de/en" },
|
||
{
|
||
logoPath: "images/corporate-logos/vorteil-direktiv.svg",
|
||
url: "https://www.direktiv.io/",
|
||
},
|
||
];
|
||
|
||
function shuffle(array) {
|
||
for (let i = array.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[array[i], array[j]] = [array[j], array[i]];
|
||
}
|
||
}
|
||
|
||
// Shuffle the adopters array
|
||
shuffle(adopters);
|
||
|
||
const trustedByContainers = document.querySelectorAll(
|
||
".trusted-by-container .scroller__inner"
|
||
);
|
||
|
||
function populateAdopters(container, adopters) {
|
||
adopters.forEach((adopter) => {
|
||
const adopterLink = document.createElement("a");
|
||
adopterLink.href = adopter.url;
|
||
adopterLink.target = "_blank";
|
||
|
||
const adopterImg = document.createElement("img");
|
||
adopterImg.src = adopter.logoPath;
|
||
adopterImg.alt = "Adopters";
|
||
adopterImg.classList.add("logo");
|
||
|
||
adopterLink.appendChild(adopterImg);
|
||
container.appendChild(adopterLink);
|
||
});
|
||
}
|
||
|
||
const firstRowAdopters = adopters.slice(0, adopters.length / 2);
|
||
const secondRowAdopters = adopters.slice(adopters.length / 2);
|
||
|
||
// Shuffle each row's adopters array independently
|
||
shuffle(firstRowAdopters);
|
||
shuffle(secondRowAdopters);
|
||
|
||
populateAdopters(trustedByContainers[0], firstRowAdopters);
|
||
populateAdopters(trustedByContainers[1], secondRowAdopters);
|
||
|
||
// If a user hasn't opted in for reduced motion, then we add the animation
|
||
const scrollers = document.querySelectorAll(".scroller");
|
||
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||
addAnimation();
|
||
}
|
||
|
||
function addAnimation() {
|
||
scrollers.forEach((scroller) => {
|
||
scroller.setAttribute("data-animated", true);
|
||
|
||
const scrollerInner = scroller.querySelector(".scroller__inner");
|
||
const scrollerContent = Array.from(scrollerInner.children);
|
||
|
||
// For each item in the array, clone it -> add aria-hidden to it -> add it into the `.scroller-inner`
|
||
scrollerContent.forEach((item) => {
|
||
const duplicatedItem = item.cloneNode(true);
|
||
duplicatedItem.setAttribute("aria-hidden", true);
|
||
scrollerInner.appendChild(duplicatedItem);
|
||
});
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
{% endblock %}
|
||
|
||
<!-- Application footer -->
|
||
{% block footer %} {% include "partials/footer.html" %} {% endblock %}
|