Gatsby in a day

Edit on GitHub
Oct 21, 2018
Web Development
3 minutes

tl;dr

1yarn global add gatsby@latest gatsby-cli@latest
2gatsby new mygatsby git@github.com:gatsbyjs/gatsby-starter-hello-world.git # MVC
3#gatsby new mygatsby git@github.com:gatsbyjs/gatsby-starter-default.git # Starter
4cd mygatsby
5gatsby develop

install

1# npm install --global gatsby@next gatsby-cli@next
2yarn global add gatsby@next gatsby-cli@next
3gatsby -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

1npm view gatsby dist-tags

1{ latest: '2.0.28',
2  next: '2.0.0-rc.28',
3  canary: '2.0.0-alpha.80a21f04',
4  'latest-v1': '1.9.279'}

basic site

1# install Gatsby demo site
2# gatsby new mygatsby https://github.com/gatsbyjs/gatsby-starter-hello-world # HTTPS
3gatsby new mygatsby git@github.com:gatsbyjs/gatsby-starter-hello-world.git # SSH
4
5cd mygatsby
6gatsby develop

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

plugins and config

1# from within your gatsby site directory
2yarn add gatsby-source-filesystem@next gatsby-transformer-remark@next

gatsby-config.js must be at the root of your project (not in src)

 1// ./gatsby-config.js
 2
 3module.exports = {
 4  siteMetadata: {
 5    title: `My Blog`, // notice the backticks
 6    description: `This is my blog yo!`
 7  },
 8  plugins: [
 9    `gatsby-transformer-remark`, 
10    {
11      resolve: `gatsby-source-filesystem`,
12      options: {
13        name: `pages`,
14        path: `${__dirname}/src/pages`
15      }
16    }
17  ]
18}
19
20// Values can be in commas too, works with both commas and backticks.
21// Backticks is convention i guess
22// If you're having errors, this might help: : https://rusl.io/blog/backticks/

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

GraphQL

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

http://localhost:8000/___graphql

Documentation explorer goes through your schema and can let you know what kind of stuff you cna access

 1{
 2  allMarkdownRemark {
 3    edges {
 4      node {
 5        frontmatter {
 6          title
 7          date
 8        }
 9      } 
10    }
11  }
12}

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

1import React from 'react'
2
3const PageOne = () => (
4  <div>
5    <h1>This is page 1</h1>
6  </div>
7)
8
9export default PageOne

Linking to pages

 1import React from 'react'
 2import Link from 'gatsby-link'
 3
 4
 5const PageOne = () => (
 6  <div>
 7    <h1>This is page 1</h1>
 8    <Link to='/'>Go back to homepage</Link>
 9  </div>
10)
11
12export 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

Plugins

Using Sass

install Sass plugins and then restart the Gatsby server

1# npm i node-sass gatsby-plugin-sass
2yarn add node-sass gatsby-plugin-sass

add and miport .scss files

1// index.scss
2
3$color_bg: salmon;
4
5body {
6  background: $color_bg;  
7}

1// index.js
2import './index.scss'

Styled Components

https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/?=

1# npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components
2yarn 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)

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

Notes