Skip to content

Commit 8a573f4

Browse files
mrgilesmrgiles
committed
Add images css and alert boxes
1 parent 6cad191 commit 8a573f4

8 files changed

Lines changed: 92 additions & 74 deletions

File tree

‎content/en/docs/tutorials/kubernetes-basics/_index.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,41 +35,43 @@ container orchestration, combined with best-of-breed ideas from the community.
3535

3636
## Kubernetes Basics Modules
3737

38-
<!-- this css code is to preserve the original format -->
39-
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;">
40-
<div style="width: 30%; text-align: center;">
38+
<!-- css code to preserve original format -->
39+
<link rel="stylesheet" href="/css/style_tutorials.css">
40+
41+
<div class="tutorials-modules">
42+
<div class="module">
4143
<a href="/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/">
42-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347" alt="Module 1" style="width: 100%;">
44+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347" alt="Module 1">
4345
<h5>1. Create a Kubernetes cluster</h5>
4446
</a>
4547
</div>
46-
<div style="width: 30%; text-align: center;">
48+
<div class="module">
4749
<a href="/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/">
48-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347" alt="Module 2" style="width: 100%;">
50+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347" alt="Module 2">
4951
<h5>2. Deploy an app</h5>
5052
</a>
5153
</div>
52-
<div style="width: 30%; text-align: center;">
54+
<div class="module">
5355
<a href="/docs/tutorials/kubernetes-basics/explore/explore-intro/">
54-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347" alt="Module 3" style="width: 100%;">
56+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347" alt="Module 3">
5557
<h5>3. Explore your app</h5>
5658
</a>
5759
</div>
58-
<div style="width: 30%; text-align: center;">
60+
<div class="module">
5961
<a href="/docs/tutorials/kubernetes-basics/expose/expose-intro/">
60-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347" alt="Module 4" style="width: 100%;">
62+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347" alt="Module 4">
6163
<h5>4. Expose your app publicly</h5>
6264
</a>
6365
</div>
64-
<div style="width: 30%; text-align: center;">
66+
<div class="module">
6567
<a href="/docs/tutorials/kubernetes-basics/scale/scale-intro/">
66-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347" alt="Module 5" style="width: 100%;">
68+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347" alt="Module 5">
6769
<h5>5. Scale up your app</h5>
6870
</a>
6971
</div>
70-
<div style="width: 30%; text-align: center;">
72+
<div class="module">
7173
<a href="/docs/tutorials/kubernetes-basics/update/update-intro/">
72-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347" alt="Module 6" style="width: 100%;">
74+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347" alt="Module 6">
7375
<h5>6. Update your app</h5>
7476
</a>
7577
</div>

‎content/en/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro.md‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@ weight: 10
1111

1212
## Kubernetes Clusters
1313

14-
<div class="col-md-8">
15-
<div class="content__box content__box_fill">
16-
<p><i>Kubernetes is a production-grade, open-source platform that orchestrates
17-
the placement (scheduling) and execution of application containers
18-
within and across computer clusters.</i></p>
19-
</div>
20-
</div>
14+
{{% alert %}}
15+
_Kubernetes is a production-grade, open-source platform that orchestrates
16+
the placement (scheduling) and execution of application containers
17+
within and across computer clusters._
18+
{{% /alert %}}
2119

2220
**Kubernetes coordinates a highly available cluster of computers that are connected
2321
to work as a single unit.** The abstractions in Kubernetes allow you to deploy
@@ -43,11 +41,10 @@ A Kubernetes cluster consists of two types of resources:
4341
coordinates all activities in your cluster, such as scheduling applications, maintaining
4442
applications' desired state, scaling applications, and rolling out new updates.
4543

46-
<div class="col-md-8">
47-
<div style="background-color: #eaf7ff; border-left: 5px solid #3771e3; padding: 15px; margin: 20px 0;">
48-
<p><i>Control Planes manage the cluster and the nodes that are used to host the running applications.</i></p>
49-
</div>
50-
</div>
44+
{{% alert %}}
45+
_Control Planes manage the cluster and the nodes that are used to host the running
46+
applications._
47+
{{% /alert %}}
5148

5249
**A node is a VM or a physical computer that serves as a worker machine in a Kubernetes
5350
cluster.** Each node has a Kubelet, which is an agent for managing the node and

‎content/en/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ weight: 10
1010

1111
## Kubernetes Deployments
1212

13+
{{% alert %}}
14+
_A Deployment is responsible for creating and updating instances of your application._
15+
{{% /alert %}}
16+
1317
{{< note >}}
1418
This tutorial uses a container that requires the AMD64 architecture. If you are using
1519
minikube on a computer with a different CPU architecture, you could try using minikube with
@@ -36,6 +40,11 @@ provide a fundamentally different approach to application management.
3640

3741
## Deploying your first app on Kubernetes
3842

43+
{{% alert %}}
44+
_Applications need to be packaged into one of the supported container formats in
45+
order to be deployed on Kubernetes._
46+
{{% /alert %}}
47+
3948
{{< figure src="/docs/tutorials/kubernetes-basics/public/images/module_02_first_app.svg" class="diagram-medium" >}}
4049

4150
You can create and manage a Deployment by using the Kubernetes command line interface,

‎content/en/docs/tutorials/kubernetes-basics/explore/explore-intro.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ weight: 10
1111

1212
## Kubernetes Pods
1313

14+
{{% alert %}}
15+
_A Pod is a group of one or more application containers (such as Docker) and includes
16+
shared storage (volumes), IP address and information about how to run them._
17+
{{% /alert %}}
18+
1419
When you created a Deployment in [Module 2](/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/),
1520
Kubernetes created a **Pod** to host your application instance. A Pod is a Kubernetes
1621
abstraction that represents a group of one or more application containers (such as Docker),
@@ -39,6 +44,11 @@ the cluster.
3944

4045
{{< figure src="/docs/tutorials/kubernetes-basics/public/images/module_03_pods.svg" class="diagram-medium" >}}
4146

47+
{{% alert %}}
48+
_Containers should only be scheduled together in a single Pod if they are tightly
49+
coupled and need to share resources such as disk._
50+
{{% /alert %}}
51+
4252
## Nodes
4353

4454
A Pod always runs on a **Node**. A Node is a worker machine in Kubernetes and may
@@ -75,8 +85,8 @@ operations can be done with the following kubectl subcommands:
7585
You can use these commands to see when applications were deployed, what their current
7686
statuses are, where they are running and what their configurations are.
7787

78-
Now that we know more about our cluster components and the command line, let's explore
79-
our application.
88+
Now that we know more about our cluster components and the command line, let's
89+
explore our application.
8090

8191
### Check application configuration
8292

‎content/en/docs/tutorials/kubernetes-basics/expose/expose-intro.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ each Pod in a Kubernetes cluster has a unique IP address, even Pods on the same
2222
so there needs to be a way of automatically reconciling changes among Pods so that your
2323
applications continue to function.
2424

25+
{{% alert %}}
26+
_A Kubernetes Service is an abstraction layer which defines a logical set of Pods and
27+
enables external traffic exposure, load balancing and service discovery for those Pods._
28+
{{% /alert %}}
29+
2530
A [Service](/docs/concepts/services-networking/service/) in Kubernetes is an abstraction
2631
which defines a logical set of Pods and a policy by which to access them. Services
2732
enable a loose coupling between dependent Pods. A Service is defined using YAML or JSON,
@@ -146,7 +151,6 @@ Then use the given URL to access the app:
146151
```shell
147152
curl 127.0.0.1:51082
148153
```
149-
150154
{{< /note >}}
151155

152156
And we get a response from the server. The Service is exposed.

‎content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ weight: 10
99

1010
## Scaling an application
1111

12+
{{% alert %}}
13+
_You can create from the start a Deployment with multiple instances using the --replicas
14+
parameter for the kubectl create deployment command._
15+
{{% /alert %}}
16+
1217
Previously we created a [Deployment](/docs/concepts/workloads/controllers/deployment/),
1318
and then exposed it publicly via a [Service](/docs/concepts/services-networking/service/).
1419
The Deployment created only one Pod for running our application. When traffic increases,
@@ -34,35 +39,28 @@ with its `type` set to `LoadBalancer`:
3439
```shell
3540
kubectl expose deployment/kubernetes-bootcamp --type="LoadBalancer" --port 8080
3641
```
37-
3842
{{< /note >}}
3943

4044
## Scaling overview
4145

4246
<!-- animation -->
4347
<div class="col-md-8">
4448
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
45-
<ol class="carousel-indicators">
46-
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
47-
<li data-target="#myCarousel" data-slide-to="1"></li>
48-
</ol>
49-
<div class="carousel-inner" role="listbox">
50-
<div class="item carousel-item active">
51-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg">
52-
</div>
53-
<div class="item carousel-item">
54-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg">
55-
</div>
49+
<div class="carousel-inner" role="listbox">
50+
<div class="item carousel-item active">
51+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg">
5652
</div>
57-
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
58-
<span class="sr-only ">Previous</span>
59-
</a>
60-
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
61-
<span class="sr-only">Next</span>
62-
</a>
53+
<div class="item carousel-item">
54+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg">
55+
</div>
56+
</div>
6357
</div>
6458
</div>
6559

60+
{{% alert %}}
61+
_Scaling is accomplished by changing the number of replicas in a Deployment._
62+
{{% /alert %}}
63+
6664
Scaling out a Deployment will ensure new Pods are created and scheduled to Nodes
6765
with available resources. Scaling will increase the number of Pods to the new desired
6866
state. Kubernetes also supports [autoscaling](/docs/tasks/run-application/horizontal-pod-autoscale/)

‎content/en/docs/tutorials/kubernetes-basics/update/update-intro.md‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ Perform a rolling update using kubectl.
99

1010
## Updating an application
1111

12+
{{% alert %}}
13+
_Rolling updates allow Deployments' update to take place with zero downtime by
14+
incrementally updating Pods instances with new ones._
15+
{{% /alert %}}
16+
1217
Users expect applications to be available all the time, and developers are expected
1318
to deploy new versions of them several times a day. In Kubernetes this is done with
1419
rolling updates. A **rolling update** allows a Deployment update to take place with
@@ -28,35 +33,28 @@ versioned and any Deployment update can be reverted to a previous (stable) versi
2833
<!-- animation -->
2934
<div class="col-md-8">
3035
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
31-
<ol class="carousel-indicators">
32-
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
33-
<li data-target="#myCarousel" data-slide-to="1"></li>
34-
<li data-target="#myCarousel" data-slide-to="2"></li>
35-
<li data-target="#myCarousel" data-slide-to="3"></li>
36-
</ol>
37-
<div class="carousel-inner" role="listbox">
38-
<div class="item carousel-item active">
39-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg">
40-
</div>
41-
<div class="item carousel-item">
42-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg">
43-
</div>
44-
<div class="item carousel-item">
45-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg">
46-
</div>
47-
<div class="item carousel-item">
48-
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg">
49-
</div>
36+
<div class="carousel-inner" role="listbox">
37+
<div class="item carousel-item active">
38+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg">
39+
</div>
40+
<div class="item carousel-item">
41+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg">
42+
</div>
43+
<div class="item carousel-item">
44+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg">
45+
</div>
46+
<div class="item carousel-item">
47+
<img src="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg">
5048
</div>
51-
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
52-
<span class="sr-only ">Previous</span>
53-
</a>
54-
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
55-
<span class="sr-only">Next</span>
56-
</a>
5749
</div>
50+
</div>
5851
</div>
5952

53+
{{% alert %}}
54+
_If a Deployment is exposed publicly, the Service will load-balance the traffic
55+
only to available Pods during the update._
56+
{{% /alert %}}
57+
6058
Similar to application Scaling, if a Deployment is exposed publicly, the Service
6159
will load-balance the traffic only to available Pods during the update. An available
6260
Pod is an instance that is available to the users of the application.
@@ -206,7 +204,7 @@ kubectl describe pods
206204
The Deployment is once again using a stable version of the app (`v2`). The rollback
207205
was successful.
208206

209-
Remember to clean up your local cluster
207+
Remember to clean up your local cluster.
210208

211209
```shell
212210
kubectl delete deployments/kubernetes-bootcamp services/kubernetes-bootcamp

‎static/css/style_tutorials.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* styles for kubernetes-basics tutorials */
1+
/* kubernetes-basics tutorials */
22
.tutorials-modules {
33
display: flex;
44
flex-wrap: wrap;

0 commit comments

Comments
 (0)