Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jamstack FTW: Static Site Generation with Gridsome

Egwuenu Gift
September 17, 2020

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.

Egwuenu Gift

September 17, 2020

More Decks by Egwuenu Gift

Other Decks in Technology


  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_