Unlocking Dynamic Power in Static Sites

The Challenge: Breathing Life into Static Pages

As a developer, I’ve always been fascinated by the potential of static sites. But, I’ve often wondered: can we make them more dynamic? Inspired by a talk on making static React sites dynamic, I decided to explore the possibility of using Gridsome, a Vue-powered static site generator, to build a site that updates in real-time.

The Solution: Leveraging Hasura and Netlify

I decided to put my Gridsome-built blog to the test. I have a list of books I’ve read, stored in a GraphQL API. I want to use this data source to dynamically update my site whenever I add or remove a book. To achieve this, I’ll combine the power of Hasura, a fast GraphQL server, with Netlify’s event-driven architecture.

Getting Started

First, I installed the Gridsome CLI tool and created a new project:

npm install -g @gridsome/cli
gridsome create my-blog

Then, I deployed it to Heroku and set up a Hasura API Explorer. Next, I created a table called “books” with columns for id, name, and author.

Querying Remote GraphQL Sources

To query my remote GraphQL source, I installed the Gridsome source plugin and edited my gridsome.config.js file:

module.exports = {
  //...
  plugins: [
    {
      use: '@gridsome/source-graphql',
      options: {
        url: 'https://my-hasura-api.com/v1/graphql',
        headers: {
          'Content-Type': 'application/json',
        },
      },
    },
  ],
};

Then, I navigated to the src > pages > About.vue file, where I wanted to display the data. Using GraphQL, I queried the author, id, and name from the books table:

query {
  books {
    id
    name
    author
  }
}

Displaying Dynamic Data

To display the data, I added a page query and used the $page.books variable to access the query response. I then parsed the data using the v-for directive, storing each value in the book variable. Finally, I displayed the book author and name using Vue’s templating engine:

<template>
  <ul>
    <li v-for="book in $page.books" :key="book.id">
      {{ book.name }} by {{ book.author }}
    </li>
  </ul>
</template>

The Magic of Hasura Event Triggers

But here’s the catch: when I deploy the app, only the data available at deploy time is displayed. To solve this, I leveraged Hasura Event Triggers to trigger a Netlify build whenever I insert or delete a row in the books table. This ensures that my site updates dynamically, reflecting the latest changes to my data source.

The Result: A Dynamic Static Site

With Hasura Event Triggers and Netlify, I’ve created a static site that updates dynamically. Whenever I add or remove a book, the site rebuilds, reflecting the latest changes. This solution opens up new possibilities for static sites, allowing them to respond to changes in real-time.

Explore Further

Want to learn more? Check out the full repo on my GitHub and feel free to tweet me any questions.

• Learn more about Gridsome and its capabilities.
• Explore Hasura’s Event Triggers and how they can be used to trigger actions.
• Discover Netlify’s event-driven architecture and its benefits.