GatsbyJS notes

Quick start

hello world

# node 6
npm i -D gatsby-cli
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

# node 8
npx gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

cd hello-world
npm start

default

# node 6
npm i -D gatsby-cli
gatsby new my-site https://github.com/gatsbyjs/gatsby-starter-default

# node 8
npx gatsby new my-site https://github.com/gatsbyjs/gatsby-starter-default

cd my-site
npm start

blog

# node 6
npm i -D gatsby-cli
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-default

# node 8
npx gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-default

cd my-blog
npm start

Gatsby Starters


Commands

develop

npm start

# or
npm run develop

# or
npx gatsby develop

format

npm run format

test

npm test

build

npm run build

# or
npx gatsby build

serve

npm run serve

# or
npx gatsby serve

Gatbsy building blocks

.
├── gatsby-config.js
├── package.json
├── src
│   ├── components
│   │   ├── header.js
│   │   └── footer.js
│   └── pages
│       ├── about.js
│       └── index.js
├── static
│   └── favicon.ico
└── yarn.lock

Sub-Components

Any React component defined in src/components/*.js will automatically become a sub-component.

// src/components/header.js
import React from 'react'

export default props => <h1>{props.headerText}</h1>

Pages

Any React component defined in src/pages/*.js will automatically become a page.

// src/pages/index.js
import React from 'react'

export default () => (
  <div>
    <Header headerText="Hello Gatsby" />
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

Using <Link /> component

// src/pages/index.js
import React from 'react'
import { Link } from 'gatsby'
import Header from '../components/header'

export default () => (
  <div>
    <Link to="/contact/">Contact</Link>
    <Header headerText="Hello Gatsby" />
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

Styling in Gatsby

Creating global styles

Create main.scss under src/styles/

.
├── package.json
├── src
│   └── pages
│   │   └── index.js
│   └── styles
│       └── main.css

Include main.css in gatsby-browser.js

// gatsby-browser.js
import './src/styles/main.css'

// or:
// require('./src/styles/main.css')

Using component-scoped CSS

CSS Modules

container.module.css

/* src/components/container.module.css */
.container {
  margin: 3rem auto;
  max-width: 600px;
}

about-css-modules.module.css

/* src/pages/about-css-modules.module.css */
.user {
  display: flex;
  align-items: center;
  margin: 0 auto 12px auto;
}

.user:last-child {
  margin-bottom: 0;
}

.avatar {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
}

.description {
  flex: 1;
  margin-left: 18px;
  padding: 12px;
}

.username {
  margin: 0 0 12px 0;
  padding: 0;
}

.excerpt {
  margin: 0;
}

container.js

// src/components/container.js
import React from 'react'
import containerStyles from './container.module.css'

export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)

about-css-modules.js

// src/pages/about-css-modules.js
import React from 'react'
import styles from './about-css-modules.module.css'
import Container from '../components/container'

console.log(styles)

const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)

export default () => (
  <Container>
    <h1>About CSS Modules</h1>
    <p>CSS Modules are cool</p>
    <User
      username="Jane Doe"
      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
      excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    />
    <User
      username="Bob Smith"
      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
      excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    />
  </Container>
)

CSS-in-JS

CSS-in-JS is a component-oriented styling approach. Most generally, it is a pattern where CSS is composed inline using JavaScript.

Using Gatsby plugins

Install gatsby-plugin-typography

npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

Edit gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

Add typography.js configuration file under src/utils/:

// src/utils/typography.js
import Typography from 'typography'
import fairyGateTheme from 'typography-theme-fairy-gates'

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography

Source

© 2020 | Paul Kim