JAMstack Course - Build websites that are simpler, faster, and more secure

Learn how to use the JAMstack from an expert in this full course for beginners.

The JAMstack allows people to create websites that are simpler, faster, and more secure than other methods of creating websites. Sites created with the JAMstack are delivered by pre-rendering files that are served directly from a CDN, removing the requirement to manage or run web servers.

🎥 Course developed by Phil Hawksworth. Phil is part of the Developer Experience team at Netlify and is very experienced with the JAMstack.

⭐️ Course Contents ⭐️
⌨️ (00:00:00) Video Introduction

⌨️ (00:01:56) Introduction to the JAMstack

⌨️ (00:35:14) All simply static

⌨️ (00:40:40) Changing the DOM with JavaScript

⌨️ (00:42:21) Introducing a static site generator

⌨️ (01:24:09) Generating pages from a content API

⌨️ (02:02:17) Generating localized pages, with geo-IP routing at the CDN

⌨️ (02:28:08) Client-side rendering targeted API content

⌨️ (03:19:50) How to gradually introduce the JAMstack to your existing infrastructure

⭐️ Resources ⭐️

--

[YBWang-piqq]

32:14 1. Simple a Static Site
40:40 2. JavaScript to Render Content
52:21 3. Templating and Abstraction with a Static Site Generator
1:24:09 4. Content Sourced from an API at Build Time
2:02:17 5. Localised Content Render at Build Time, Routed at the CDN
2:28:08 6. Client-Side Render of Targeted Content with Browser and Content APIs
3:19:50 7. Bonus: How to Gradually Introduce the JAMStack to your existing infra

[josemgarlla]

Really awesome introduction to JAMStack, thanks a lot Phil.
I've got a general overview of what JAMStack is, not only from a theoretical point of view but also from the practical one through all the examples, using eleventy as Static Site Generator(SSG), a SSG that I hadn't heart about until this video, Gatsby and Next are probably the most known ones.
He goes from basic concepts of how we thought about sites years back and the infrastructure around it: LOAD balancer, WEB server, Databases, etc.. to the JAMStack model using CDN and different tooling. Then Phil codes and shows different JAMStack sites examples, from the most basic one to a full example using Static Site Generator, Client Side Rendering using serverless functions and how to even configure the CDN to customize the views based on the customer location.

Really awesome JAMStack course, thanks again Phil.

[FraserMacDonald-gbej]

Best tutorial I have came across on YouTube, for literally anything, thank you so much. It's long but not a moment is wasted and its just the right length to solidly demonstrate the key concepts of the topic.

[stefanbruck]

this was just on the spot, not too hard, not too general, very precise and distinct. Just a super-helpful tutorial and a great sum-up. Thank you Phil !

[erikchap]

Great video Phil! Usually it takes me various attempts on different tutorials to get a grasp of a topic. But your content and delivery hit the spot first shot!

[this.channel]

I was just thinking about searching whether FCC had done a video on JAM stack. Here it is!
So my initial interpretation of what the JAM stack is, is basically adopting static site generators.

[davidam]

Thank you very much it's the best tutorial on the topic, I have been looking for a tutorial with clear concepts and examples for a long time, most of them on the web are ambiguous and only mention the JAM without clarifying the background architecture.

[joshma]

I'm watching this and following along. It's such an incredible tutorial, thank you Phil!

[absar]

Wow!!! Totally Bombed...Many thanks Phil..you made me a new convert to JAMStack..Be safe wherever you are, in these times..take care

[RyanJohnson]

I <3 that "It's not a mug, it's a feature" mug :)

[Tacotom]

Just finished the course. Phenomenal! It's a gift to get to learn from an expert. Thanks!

[saidevla]

This video is simply MAGIC! Thank you so much for exceptional content for something that doesn't have a lot of data to start with. Greetings from Argentina. 💪💪

[exactzero]

Great tutorial! Very informative. I'm now interested in building my next project with JAMstack. Thank you for taking the time to educate people.

[lonw.]

this "server" sounds good.$$$. can hear the excitement in this fellows voice. personally, i have a mighty fine desktop. $$$$

[ShopperPlug]

Finally, proper internet web development is becoming proper again. Not using node and all the bloated crap. Simple static coding to make complex websites is the way to go.

[KeelanJon]

I never enjoyed building websites, until I found jam stack. Now I build websites with react everyday ☕️

[JessHines]

Loved this content, thank you so much for putting it out.
But the cursor following the reading, and the not-in-show-mode Keynote and clicking between slides was distracting. I loved the deck design, but using the keyboard or a presentation remote, plus using color changes or other Keynote animation methods to highlight important parts (where you swirled the cursor) would have made it premium.

[groovebird]

I have a question: In example 4 you said there are some options to update the data (because of the pre rendering we always get the same news data). What are this options and how they are working?

[tedshapera]

When I run the script "npm run build" Dreamweaver starts up!!! When I exit Dreamweaver the script ends with no error messages BUT nothing is built - there is no dist folder. I'm stumped at this point.

[camillo]

Hello, your video is really amazing, I just find the 11ty documentation very bad; it is difficult to find even the simplest things like standard folder names or configuration options.