Gatsby in a day


yarn global add gatsby@latest gatsby-cli@latest
gatsby new mygatsby # MVC
#gatsby new mygatsby # Starter
cd mygatsby
gatsby develop


# npm install --global gatsby@next gatsby-cli@next
yarn global add gatsby@next gatsby-cli@next
gatsby -v
  • This will install the latest (release candidate) of Gatsby.
  • The next in @next is a dist-tag. See all tags for a package with npm view foo dist-tags or npm dist-tag ls
npm view gatsby dist-tags
{ latest: '2.0.28',
  next: '2.0.0-rc.28',
  canary: '2.0.0-alpha.80a21f04',
  'latest-v1': '1.9.279'}

basic site

# install Gatsby demo site
# gatsby new mygatsby # HTTPS
gatsby new mygatsby # SSH

cd mygatsby
gatsby develop
  • mygatsby is the name of the site
  • You sould get a live server at http://localhost:8000

plugins and config

# from within your gatsby site directory
yarn add gatsby-source-filesystem@next gatsby-transformer-remark@next
  • gatsby-config.js must be at the root of your project (not in src)
// ./gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `My Blog`, // notice the backticks
    description: `This is my blog yo!`
  plugins: [
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`

// Values can be in commas too, works with both commas and backticks.
// Backticks is convention i guess
// If you're having errors, this might help: :
  • Values can be in commas too, works with both commas and backticks. Backticks is Gatsby convention i guess
  • Restart your gastby server after creating a config file for the changes to take effect


When you run gatsby develop it also runs a GraphiQL instance in the browser which you can use to build your queries

  • Documentation explorer goes through your schema and can let you know what kind of stuff you cna access
  allMarkdownRemark {
    edges {
      node {
        frontmatter {

The above query will give you the title and date for all markdown posts.

Creating pages

  • Just create components in the src/pages folder and export them as default
import React from 'react'

const PageOne = () => (
    <h1>This is page 1</h1>

export default PageOne

Linking to pages

import React from 'react'
import Link from 'gatsby-link'

const PageOne = () => (
    <h1>This is page 1</h1>
    <Link to='/'>Go back to homepage</Link>

export default PageOne
  • You need to import Link from gatsby-link and then you can use the <Link> component to add your links.
  • The value for to depends on page name


Using Sass

  • install Sass plugins and then restart the Gatsby server
# npm i node-sass gatsby-plugin-sass
yarn add node-sass gatsby-plugin-sass
  • add and miport .scss files
// index.scss

$color_bg: salmon;

body {
  background: $color_bg;  
// index.js
import './index.scss'

Styled Components

# npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components
yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Building a blog

We need a source plugin to get the data in (e.g. files in a folder), we need a transform plugin to convert the data (e.g. Markdown to HTML)

# npm i gatsby-source-filesystem gatsby-transformer-remark
yarn add gatsby-source-filesystem gatsby-transformer-remark