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
   

   View Slide

2. Gift Egwuenu
   Frontend Developer at
   Passionate People
   @lauragift_
   giftegwuenu.com
   @lauragift_
   

   View Slide

3. What is
   Jamstack?
   @lauragift_
   

   View Slide

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_
   

   View Slide

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_
   

   View Slide

6. Traditional Stack
   @lauragift_
   

   View Slide

7. Browser
   Traditional Stack
   Web Server
   Application
   Server
   Database
   @lauragift_
   

   View Slide

8. Jamstack Approach
   @lauragift_
   

   View Slide

9. Browser
   Jamstack Approach
   CDN
   @lauragift_
   (Content Delivery
   Network)
   

   View Slide

10. Why Build this way?
    @lauragift_
    

    View Slide

11. Benefits of Jamstack
    @lauragift_
    Better Performance
    

    View Slide

12. Benefits of Jamstack
    Great Developer Experience
    @lauragift_
    

    View Slide

13. Benefits of Jamstack
    @lauragift_
    Higher Security
    

    View Slide

14. Benefits of Jamstack
    @lauragift_
    Cheap and Easy Scalability
    

    View Slide

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_
    

    View Slide

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_
    

    View Slide

17. @lauragift_
    

    View Slide

18. What? Gridsome?
    Gridsome is a Vue.js powered Jamstack framework for
    building static generated websites & apps that are fast
    by default.
    @lauragift_
    

    View Slide

19. Why Gridsome?
    @lauragift_
    

    View Slide

20. @lauragift_
    Automatic Code
    Splitting
    1
    

    View Slide

21. @lauragift_
    Follows the PRPL
    Pattern
    2
    

    View Slide

22. @lauragift_
    Smart Link Prefetching
    3
    

    View Slide

23. @lauragift_
    Plugin Ecosystem
    4
    

    View Slide

24. @lauragift_
    4
    [Gridsome Plugins] gridsome.org/plugins/
    

    View Slide

25. @lauragift_
    Data Sourcing
    5
    

    View Slide

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_
    

    View Slide

27. @lauragift_
    How it works
    

    View Slide

28. /about.json
    /about
    JSON
    How it works
    /about.html
    HTML
    @lauragift_
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

32. @lauragift_
    Collections
    

    View Slide

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.
    

    View Slide

34. Core Concepts
    @lauragift_
    Images
    Gridsome has a built-in component that
    outputs an optimized progressive image. It also resizes
    and crops in real-time when developing if width and
    height is changed.
    

    View Slide

35. Extending
    Gridsome
    Data Store
    API
    Pages API
    

    View Slide

36. Data Store API
    @lauragift_
    

    View Slide

37. Data Store API
    @lauragift_
    

    View Slide

38. Pages API
    @lauragift_
    

    View Slide

39. Pages API
    @lauragift_
    

    View Slide

40. Built with Gridsome
    @lauragift_
    

    View Slide

41. What Next?
    ❏ Gridsome Documentation
    ❏ Built with Gridsome
    ❏ Gridsome Articles Dev.to
    ❏ Gridsome Discord Server
    @lauragift_
    

    View Slide

42. Thank You!
    @lauragift_
    

    View Slide