gatsby

From IndieWeb
(Redirected from gatsbyjs)

Gatsby is a React-based static site generator with live preview.

Gatsby uses React to render static pages that follow the PRPL pattern for exceptional loading speed. The static pages can be sourced from a huge variety of data, translated into GraphQL, then queried to produce a collection of pages that are generated at build time.

This means that there is HTML markup that's fully machine-readable - making it SEO/indie/webmention/js;dr friendly.

At the moment it supports many data sources:

These data sources can then be transformed:

  • Remark (turn Markdown into HTML)
  • YAML
  • TOML

(Note that these are only read during build time - so you must re-build to get new content out)

Incremental Builds

Gatsby officially began supporting incremental builds in April 2020: 2020-04-22 Gatsby: From static to real-time: introducing incremental builds in Gatsby Cloud

These are primarily designed to be used in conjunction with their own paid hosting platform, Gatsby Cloud, but a Netlify plugin provides at least partial support:

See Also

JS;DR

Out of the box, Gatsby uses the React "hydration" model. That means whilst a Gatsby site is statically rendered during the build process, pages are still sent to the browser with a large JavaScript bundle that effectively loads React on top of the existing website. Whilst this provides some clever features – like Gatsby's page pre-caching, image optimisations, and client-side routing – it can also be a performance concern.

The Gatsby community has come up with two possible solutions to this issue:

  • The No JavaScript plugin which removes all client-side React bundles during the build process;
  • The Preact plugin which replaces React with Preact, providing many of the same client-side benefits but with a reduced JavaScript bundle size.

Gatsby has also come under criticism for shipping with a default noscript message recommending JavaScript, even though many Gatsby sites don't actually need JavaScript enabled to run.

See Also

Opportunities

When it comes to "incoming" data to this site generator, it would have to push the data to one of the connected data sources then trigger a rebuild. Even without access to incremental builds the performance is pretty good for small-ish sites to do a complete rebuild.

You could probably handle incoming webmentions by having a small app on another subdomain that pushes the webmentions into MongoDB, then triggers a rebuild of the site to include new mentions.

Plugins

Webmentions

RSS

IndieWeb Examples

IndieWeb community members using Gatsby on their own primary sites:

Other independents that are using it on their primary self-identifying site:

  • Josh W Comeau β€” Josh previously worked for Gatsby and continues to use the platform for his personal site.

Articles

See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=gatsby&oldid=81349"