Skip to content

Commit 8230670

Browse files
Added callout for What is Jamstack and seperated the next section.
1 parent 82a8340 commit 8230670

File tree

2 files changed

+35
-46
lines changed

2 files changed

+35
-46
lines changed

src/css/tailwind.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
}
2323
@screen md {
2424
h2 {
25-
@apply text-4xl;
25+
@apply text-3xl;
26+
@apply underline;
2627
}
2728
}
2829
}

src/site/index.njk

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -13,95 +13,83 @@ layout: layouts/base.njk
1313
{{ ticker.main() }}
1414
</section>
1515

16-
<section >
17-
<a name="what-is-jamstack">
18-
<h1>What is Jamstack?</h1>
19-
</a>
20-
<p>Pre-generated assets which are highly portable and may be served from a wide variety of hosting platforms. Elevated by modern developer tooling.</p>
16+
<section class="relative p-10 h-[200px]">
17+
<div class="p-2 rounded-lg bg-gradient-jams" w-full>
18+
<div class="flex flex-col bg-blue-900 p-10">
19+
<a class="border-b-0" name="what-is-jamstack">
20+
<h1>What is <span class="font-extrabold text-transparent bg-clip-text bg-gradient-jams">Jamstack</span>?</h1>
21+
</a>
22+
23+
<p>Pre-generated assets which are highly portable and may be served from a wide variety of hosting platforms. Elevated by modern developer tooling.</p>
24+
<h3 class="mt-3">Jamstack projects have:</h3>
25+
<ul class="list-disc ml-4">
26+
<li>
27+
Ready-to-serve assets
28+
</li>
29+
<li>
30+
Any interactivity provided <em>without a managed server</em>
31+
</li>
32+
<li>
33+
Any interactivity provided by some combination of Javascript and decoupled services via APIs
34+
</li>
35+
</ul>
36+
</div>
37+
38+
</div>
2139
</section>
2240

23-
<section>
24-
<h2>Jamstack projects have:</h2>
25-
<ol>
26-
<li>
27-
Ready-to-serve assets
28-
</li>
29-
<li>
30-
Any interactivity provided <em>without a managed server</em>
31-
</li>
32-
<li>
33-
Any interactivity provided by some combination of Javascript and decoupled services via APIs
34-
</li>
35-
</ol>
36-
</section>
37-
41+
<div class="bg-gray-100">
42+
43+
3844
<section>
3945
<a name="why-jamstack">
4046
<h1>Why Jamstack?</h1>
4147
</a>
4248
<p>
4349
A Jamstack architecture can bring all sorts of benefits to the sites and to project workflows. Some of the key benefits are:
4450
</p>
45-
</section>
4651

47-
<section>
48-
<h2>Security</h2>
52+
<h2>Security</h2>
4953
<p>
5054
The Jamstack removes multiple moving parts and systems from the hosting infrastructure resulting in fewer servers and systems to harden against attack.
5155
</p>
5256
<p>
5357
Serving pages and assets as <a href="/glossary/pre-render/">pre-generated</a> files allows read-only hosting reducing attack vectors even further. Meanwhile dynamic tools and services can be provided by vendors with teams dedicated to securing their specific systems and providing high levels of service.
5458
</p>
55-
</section>
5659

57-
<section>
58-
<h2>Scale</h2>
60+
<h2>Scale</h2>
5961
<p>
6062
Popular architectures deal with heavy traffic loads by adding logic to cache popular views and resources. The Jamstack provides this by default. When sites can be served entirely from a <a href="/glossary/cdn/">CDN</a> there is no complex logic or workflow to determine what assets can be cached and when.
6163
</p>
6264
<p>
6365
With Jamstack sites everything can be cached in a content delivery network. With simpler deployments, built-in redundancy and incredible load capacity.
6466
</p>
65-
</section>
6667

67-
<section>
6868
<h2>Performance</h2>
6969
<p>
7070
Page loading speeds have an impact on user experience and conversion. Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build.
7171
</p>
7272
<p>
7373
With all the pages are already available on a <a href="/glossary/cdn/">CDN</a> close to the user and ready to serve, very high performance is possible without introducing expensive or complex infrastructure.
7474
</p>
75-
</section>
7675

77-
<section>
78-
<h2>Maintainability</h2>
76+
<h2>Maintainability</h2>
7977
<p>
8078
When hosting complexity is reduced, so are maintenance tasks. A <a href="/glossary/pre-render/">pre-generated</a> site, being served directly from a simple host or directly from a CDN does not need a team of experts to "keep the lights on".
8179
</p>
8280
<p>
8381
The work was done during the build, so now the generated site is stable and can be hosted without servers which might require patching, updating and maintain.
8482
</p>
85-
</section>
86-
87-
<section>
88-
<h2>Portability</h2>
89-
<p>
90-
Jamstack sites are <a href="/glossary/pre-render/">pre-generated</a>. That means that you can host them from a wide variety of hosting services and have greater ability to move them to your preferred host. Any simple static hosting solution should be able to serve a Jamstack site.
91-
</p>
92-
<p>
93-
Bye-bye infrastructure lock-in.
94-
</p>
95-
</section>
9683

97-
<section class="mb-20 pb-20 border-gray-400 border-b ">
98-
<h2>Developer Experience</h2>
84+
<h2>Developer Experience</h2>
9985
<p>
10086
Jamstack sites can be built with a wide variety of tools. They do not depend on the proprietary technologies or exotic and little known frameworks. Instead, they build on widely available tools and conventions. As a result, it's not hard to find enthusiastic and talented developers who have the right skills to build with the Jamstack. Efficiency and effectiveness can prosper.
10187
</p>
10288
</section>
89+
</div>
10390

104-
</section>
91+
<section class="mb-20 pb-20 border-gray-400 border-b ">
92+
</section>
10593

10694
<section class=" mb-16">
10795
<div class="md:w-8/12 mx-auto">

0 commit comments

Comments
 (0)