3 min read

How Overflowed.dev is built

Table of Contents

Intro

Gridsome

Gridsome is a static site generator based on Vue that allows you to pull data from different data sources, such as local Markdown files, GraphQL, JSON, and any REST APIs.

The data is getting fetched from all sources you define and converted in a GraphQL schema that is made available in all your web pages and components

Gridsome Starter

Originally this site was started on top of the Bleda Starter but has evolved since then so that basically nothing of the original project is left.

Gridsome Plugins

Gridsome offers extensibility via source plugins that pull data into the GraphQL layer (ex.: gridsome-source-rest) and general plugins that either interact with the build flow of Gridsome and modify data (ex.: gridsome-plugin-recommender)

Gridsome File System Source

gridsome-source-filesystem

A Gridsome Source Plugin that lets you load Markdown .md files into collections of the GraphQL layer of Gridsome. It can create references between multiple collections, such as Posts and Tags or Posts and Authors.

As an example, the code section below shows the "Post" collection definition, which has links to categories, tags, and authors.

gridsome.config.js

    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'content/posts/**/*.md',
        typeName: 'Post',
        refs: {
          category: 'Category',
          tags: 'Tag',
          authors: 'Author',
        },
      },
    },

Gridsome Static Meta Source

gridsome-source-static-meta

Unlike the gridsome-source-filesystem, this Gridsome Source Plugin loads a single JSON file and adds all properties to the Gridsome Metadata Collection.

gridsome.client.js

    {
      use: 'gridsome-source-static-meta',
      options: {
        path: 'content/settings.json'
      }
    },

In the case of overflowed.dev, I´m just loading a single settings.json file that contains social media names, site description, title, and a few others.

Static data can be accessed in any page or page template (those components that are also pages but are reused for each collection entry such as Post.vue)

<static-query>
query {
  metadata {
    message
  }
}
</static-query>

Gridsome Recommender Plugin

gridsome-plugin-recommender

A Gridsome Plugin to find similarities in posts and attach related posts to each post node for later use.

It allows me to find similar posts and display them in a related posts widget on each site.

Related Posts Widget

And it also does the auto-recommendation of helpful books that relate to each article.

Automated affiliate product recommendations for static sites

More about the plugin

Gridsome Robots Plugin

gridsome-plugin-robots

This small plugin generates the robots.txt on the fly based on your configuration. It lets you exclude certain pages from web crawling and tells the crawler in what frequency it should be recrawled.

Gridsome Flexsearch Plugin

gridsome-plugin-flexsearch

A plugin that integrates Flexsearch into the Gridsome site.

Web's fastest and most memory-flexible full-text search library with zero dependencies.

You are telling the plugin which collections should be indexed and which fields of them. It creates an index during the build (in my case Blog Posts and Tags are indexed) and drops the index file into the static folder. When deployed, the flexsearch script uses the file to do search queries against.

This is used to make the on-site search working:

Gridsome Flexsearch with multiple indexed collections

Other Plugins

Netlify Identity Widget

netlify-identity-widget

Javascript library that allows you to integrate authentication into your site without setting up any backend. It is tied to your Netlify account and allows you to authenticate with several oAuth providers such as Gitlab, Github, or BitBucket.

Netlify CMS

netlify-cms

An Open Source CMS that operates on your Git repository and creates and edits Markdown files. It uses the Netlify Identity Widget to protect the admin dashboard.

Netlify CMS Admin