學海無涯，思境無維；數乃六藝，理之始也。
或有一得足矣 愚千慮

$$$$

Gatsby

gatsby-config.js

• Site(App) Configuration

gatsby-node.js (Build Time)

• Create Page from sources

gatsby-ssr.js (Server Side)

• Server Side Rendering

gatsby-browser.js (Client Side)

• wrapPageElement
• wrapRootElement

Source

src/pages/

Content files (.md | .mdx)

src/components/

layout.js, layout.css, JSX components

plugins

gatsby-transformer-remark (markdown to html)

• gatsby-remark-mathjax (support math blocks $ & $$)
• gatsby-remark-graphviz (support dot language)
• gatsby-remark-vscode (code highlight)

gatsby-plugin-typography (themes)

• mark src/component/layout.js , don't import layout.css to work
• Kirkham (good theme)

GraphQL

How does the graphql tag work?
graphql is a tag function. Behind the scenes Gatsby handles these tags in a particular way:

The short answer
During the Gatsby build process, GraphQL queries are pulled out of the original source for parsing.

The longer answer
The longer answer is a little more involved: Gatsby borrows a technique from Relay that converts your source code into an abstract syntax tree (AST) during the build step. file-parser.js and query-compiler.js pick out your graphql-tagged templates and effectively remove them from the original source code.

This means that the graphql tag isn’t executed the way that JavaScript code is typically handled. For example, you cannot use expression interpolation with Gatsby’s graphql tag. However, it’s possible to pass variables into page queries with the context object when creating pages.

Gatsby Internal

https://www.gatsbyjs.org/docs/gatsby-internals/

tags: Gatsby