Jamstack FTW: Static Site Generation with Gridsome

The JAMstack is the new way of building modern web applications and has evolved over the years. In this session, I’ll give an introduction to Gridsome, a static site generator with Vue.js.

How we can leverage the JAMstack in building awesome websites with Gridsome also gives the audience a view on what they can achieve with Gridsome. So that by the end of this talk, attendees will understand how to build a website using Gridsome, and all the possibilities they can leverage by using JAMstack to build blazing-fast websites with better performance and great security.

Transcript

1. Jamstack FTW! Static Site Generation with Gridsome
2. Gift Egwuenu Frontend Developer at Passionate People @lauragift_ giftegwuenu.com @lauragift_
3. What is Jamstack? @lauragift_
4. Jamstack? JavaScript 1 2 3 Dynamic functionalities handled by JavaScript API Markup Websites gets served as static HTML files to a CDN Access to 3rd Party API accessed via HTTP Requests @lauragift_
5. Jamstack is a technique for building fast and secure sites delivered by prerendering files and serving them directly from a CDN, removing the requirement to manage or run servers. @lauragift_
6. Traditional Stack @lauragift_
7. Browser Traditional Stack Web Server Application Server Database @lauragift_
8. Jamstack Approach @lauragift_
9. Browser Jamstack Approach CDN @lauragift_ (Content Delivery Network)
10. Why Build this way? @lauragift_
11. Benefits of Jamstack @lauragift_ Better Performance
12. Benefits of Jamstack Great Developer Experience @lauragift_
13. Benefits of Jamstack @lauragift_ Higher Security
14. Benefits of Jamstack @lauragift_ Cheap and Easy Scalability
15. ! Jamstack ❏ Sites built with WordPress, Joomla, Squarespace. ❏ Single Page Applications (SPA) that uses Isomorphic rendering to build pages on the server at runtime. ❏ Monolithic Applications that relies on Node.js or Ruby or any backend language. @lauragift_
16. Fun Fact “There’s a HIGH chance that you’ve built a Jamstack website in the past without knowing it had a fancy name” @lauragift_
17. @lauragift_
18. What? Gridsome? Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default. @lauragift_
19. Why Gridsome? @lauragift_
20. @lauragift_ Automatic Code Splitting 1
21. @lauragift_ Follows the PRPL Pattern 2
22. @lauragift_ Smart Link Prefetching 3
23. @lauragift_ Plugin Ecosystem 4
24. @lauragift_ 4 [Gridsome Plugins] gridsome.org/plugins/
25. @lauragift_ Data Sourcing 5
26. The modern web is decoupled and modular. Gridsome makes it painless to build Jamstack websites using data from multiple sources such as Content API's, Headless CMSs, and other web services. @lauragift_
27. @lauragift_ How it works
28. /about.json /about JSON How it works /about.html HTML @lauragift_
29. Core Concepts @lauragift_ Pages Pages are responsible for presenting your data at a URL. Each page will be generated statically and have its own index.html file with the markup.
30. Core Concepts @lauragift_ Layouts Layout components are used to wrap pages. Layouts should contain components like headers, footers or sidebars that will be used across the site.
31. Core Concepts @lauragift_ Collections A collection is a group of nodes and each node contains fields with custom data. Collections are useful if you are going to have blog posts, tags, products etc. on your site.
32. @lauragift_ Collections
33. Core Concepts @lauragift_ Templates Templates are used to create single pages for nodes in a collection. Nodes need a corresponding page in order to be presented on its own URL.
34. Core Concepts @lauragift_ Images Gridsome has a built-in <g-image> component that outputs an optimized progressive image. It also resizes and crops in real-time when developing if width and height is changed.
35. Extending Gridsome Data Store API Pages API
36. Data Store API @lauragift_
37. Data Store API @lauragift_
38. Pages API @lauragift_
39. Pages API @lauragift_
40. Built with Gridsome @lauragift_
41. What Next? ❏ Gridsome Documentation ❏ Built with Gridsome ❏ Gridsome Articles Dev.to ❏ Gridsome Discord Server @lauragift_
42. Thank You! @lauragift_