React Framework - Gatsby


Gatsby is a React Framework that builds static PWA (Progressive Web App)

When a visitor lands on a Gatsby page, the page’s HTML file is loaded first, then the React JavaScript bundle.


yarn global add gatsby-cli

Hello World

Create a site

# example
gatsby new hello-world


Start dev server

cd hello-world
gatsby develop
# or to listen on both ‘localhost’ and your local IP
gatsby develop -- --host=


Project Structure



Source plugins fetch data from their source.

Node is a an object in a graph

  • Metadata
siteMetadata: {
    title: `Title from siteMetadata`,


Graphiql - http://localhost:8000/___graphql

You can sort and filter nodes, set how many nodes to skip, and choose the limit of how many nodes to retrieve.

allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })


Page queries live outside of the component definition — by convention at the end of a page component file — and are only available on page components.

Tuto: build-a-page-with-a-graphql-query


static-query allows non-page components (like our layout.js component), to retrieve data via GraphQL queries



Source plugins fetch data from their source.

Tuto: source-plugins


transformer plugins transform the raw content brought by source plugins. transformer plugins which take raw content from source plugins and transform it into something more usable.

yarn add gatsby-transformer-remark

Dynamic Page Creation

Gatsby lets you use GraphQL to query your data and map the query results to pages—all at build time.

This is a two steps process:

  • Generate the “path” or “slug” for the page (ie: will become /pandas-and-bananas/). See oncreatenode
  • Create the page. See createpages

Example: Gatsby - Markdown


  • The onCreateNode function is called by Gatsby whenever a new node is created (or updated).
// The API  implementation for onCreateNode
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    console.log("onCreateNode for "+node.internal.type)
    const fileNode = getNode(node.parent)
    console.log(`   * Create slug for `, fileNode.relativePath)

    const slug = createFilePath({ node, getNode, basePath: `pages` })
      name: `slug`,
      value: slug,

  • After restarting Gatsby, the slug field can be queried
query MkDownSlugQuery {
  allMarkdownRemark {
    edges {
      node {
        fields {
  "data": {
    "allMarkdownRemark": {
      "edges": [
          "node": {
            "fields": {
              "slug": "/sweet-pandas-eating-sweets/"


to the console for a template, see tuto

exports.createPages = ({ graphql, actions }) => {
  // **Note:** The graphql function call returns a Promise
  // see: for more info
  return graphql(`
      allMarkdownRemark {
        edges {
          node {
            fields {
).then(result => {
    console.log(JSON.stringify(result, null, 4))

Sites build with Gatsby

Discover More
Gatsby Markdown Hello World
Gatsby - Markdown

How to show markdown page in Markdown page are a gatsby dynamic page creation process A markdown document in the pages directory with a . Markdown data are exposed via the graphiQl server....
React - Framework

A react framework is a library that is based on react adding other capabilities. Most of the time, they are web based server framework, adding routing and other web capabilities. They create a single...
Web - Prerendering / Snapshoting (Dynamic to Static Web Site Generation)

Prerendering is a web static generator method that will take a dynamic website and turn it into a static web application. You then: don't need a server. improve the page load The website (called...

Share this page:
Follow us:
Task Runner