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
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
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
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.
And it also does the auto-recommendation of helpful books that relate to each article.
Gridsome Robots Plugin
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
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:
Other Plugins
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
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.
