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

More Decks by Gift Egwuenu

Other Decks in Technology


  1. 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_
  2. 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_
  3. ! 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_
  4. 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_
  5. What? Gridsome? Gridsome is a Vue.js powered Jamstack framework for

    building static generated websites & apps that are fast by default. @lauragift_
  6. 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_
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. What Next? ❏ Gridsome Documentation ❏ Built with Gridsome ❏

    Gridsome Articles Dev.to ❏ Gridsome Discord Server @lauragift_