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

Jamstack FTW: Static Site Generation with Gridsome

Gift Egwuenu
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.

Gift Egwuenu

September 17, 2020
Tweet

More Decks by Gift Egwuenu

Other Decks in Technology

Transcript

  1. Jamstack FTW!
    Static Site Generation with Gridsome

    View full-size slide

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

    View full-size slide

  3. What is
    Jamstack?
    @lauragift_

    View full-size 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 full-size 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 full-size slide

  6. Traditional Stack
    @lauragift_

    View full-size slide

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

    View full-size slide

  8. Jamstack Approach
    @lauragift_

    View full-size slide

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

    View full-size slide

  10. Why Build this way?
    @lauragift_

    View full-size slide

  11. Benefits of Jamstack
    @lauragift_
    Better Performance

    View full-size slide

  12. Benefits of Jamstack
    Great Developer Experience
    @lauragift_

    View full-size slide

  13. Benefits of Jamstack
    @lauragift_
    Higher Security

    View full-size slide

  14. Benefits of Jamstack
    @lauragift_
    Cheap and Easy Scalability

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  18. Why Gridsome?
    @lauragift_

    View full-size slide

  19. @lauragift_
    Automatic Code
    Splitting
    1

    View full-size slide

  20. @lauragift_
    Follows the PRPL
    Pattern
    2

    View full-size slide

  21. @lauragift_
    Smart Link Prefetching
    3

    View full-size slide

  22. @lauragift_
    Plugin Ecosystem
    4

    View full-size slide

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

    View full-size slide

  24. @lauragift_
    Data Sourcing
    5

    View full-size slide

  25. 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 full-size slide

  26. @lauragift_
    How it works

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. @lauragift_
    Collections

    View full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. Extending
    Gridsome
    Data Store
    API
    Pages API

    View full-size slide

  35. Data Store API
    @lauragift_

    View full-size slide

  36. Data Store API
    @lauragift_

    View full-size slide

  37. Pages API
    @lauragift_

    View full-size slide

  38. Pages API
    @lauragift_

    View full-size slide

  39. Built with Gridsome
    @lauragift_

    View full-size slide

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

    View full-size slide

  41. Thank You!
    @lauragift_

    View full-size slide