---
title: "Gatsby"
path: "Gatsby"
---

{%hackmd @RintarouTW/About %}

# Gatsby <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/gatsby.svg"></img>

`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`](https://kyleamathews.github.io/typography.js/) (themes)
* mark `src/component/layout.js` , don't import layout.css to work
* Kirkham (good theme)

## GraphQL <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/graphql.svg"></img>

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`