logo

GatsbyJS - Overview

Why Gatsby

About Static Website Generator

Static website generator can generate static HTML offline, so they can be served with an HTTP server with dead simple configuration, or with Amazon AWS S3 or similar services.

There are quite a few open sourced tools out there, most of which convert Markdown or other formats to HTML files, using some shared layouts and stylesheets. Functionally they are similar, but I'd suggest you choose the one with underlying language/framework you are familiar with, so you can easily understand how it works and customize it if needed.

I'm choosing GatsbyJS because of React and GraphQL. Check Under the Hood page to learn about the alternatives I tried.

About JAMstack

This design pattern is described as JAMstack: the frontend is now static (pre-generated) and distributed globally by CDN; it is neatly separated from the backend: the dynamic content is provided by backend through APIs.

Visit jamstack.org to learn more. Also Netlify has a great JAMstack page to explain the idea.

Plugins

Source plugins

gatsby-source-xxx

e.g. gatsby-source-filesystem

New nodes are added to Gatsby by “source” plugins. A common one that many Gatsby sites use is the Filesystem source plugin which turns files on disk into File nodes. Other source plugins pull data from external APIs such as the Drupal andHacker News

Transformer plugins

gatsby-transformer-xxx

e.g. gatsby-transformer-remark

Transformer plugins can also create nodes by transforming source nodes into new types of nodes. It is very common when building Gatsby sites to install both source plugin(s) and transformer plugins.

functional plugins

gatsby-plugin-xxx

e.g. gatsby-plugin-sitemap, gatsby-plugin-google-analytics

Progressive Web App (PWA)

Install the 2 key plugins:

$ npm i gatsby-plugin-manifest gatsby-plugin-offline

Trouble Shooting

https://github.com/gatsbyjs/gatsby/issues/6540

$ gatsby build hangs after Building production JavaScript and CSS bundles on WSL Ubuntu and other Linux systems.

Work around:

  • open file node_modules/gatsby/dist/utils/webpack-utils.js
  • search for plugins.minifyJs
  • change from parallel: true to parallel: false,

Serving

logo
PRIVACY POLICYABOUT中文