Learning - Gatsby - Static Site Generator

Installation

• Install NodeJS

node --version
npm --version

• Install gatsby

npm install --global gatsby-cli
gatsby --version

Create site

gatsby new ga_site https://github.com/gatsbyjs/gatsby-starter-hello-world

A new folder called ga_site is created.

Run

npm run develop

The site will be run on http://localhost:8000

Folders

node_modules - Used by NodeJS.
public - the site to be published
src - pages
src/pages/index.js - start up page
package.json - define NodeJS packages

Adding Content

In index.js, there are ReactJS scripts.

import React from "react"

export default() =>
  <div style={{color: 'tomato', backgroundColor: 'blue'}} >
    <h1>Hello world!</h1>
    <p>This is a paragraph</p>
  </div>

Note: When writing contents in ReactJS, only one HTML element can be used in one statement.

Linking Pages

Add Link in index.js

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

export default() =>
  <div style={{color: 'tomato', backgroundColor: 'blue'}} >
    <h1>Hello world!</h1>
    <p>This is a paragraph</p>
    <Link to="/page-2/">Page 2</Link>
  </div>

Create a file src/pages/page-2.js

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

export default() =>
  <div style={{color: 'tomato', backgroundColor: 'blue'}} >
    <h1>Page 2</h1>
    <Link to="/">Go Home</Link>
  </div>

Note: Pages also can be in sub directory

Interactive Pages

Create a file called src/pages/counter.js.

import React from "react"

class Counter extends React.Component {
  constructior() {
    super()
    this.state = { count: 0 }
  }
  render() {
    return
      <div>
        <h1>Counter</h1>
        <p>current count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1})}>plus</button>
        <button onClick={() => this.setState({ count: this.state.count - 1})}>minus</button>
      </div>
  }
}

Building site

npm run build

The site will be built in folder public.

Components

Import a component in another page, such as index.js

import React from "react"
import Link from "gatsby-link"
import Counter from "./counter.js"

export default() =>
  <div style={{color: 'tomato', backgroundColor: 'blue'}} >
    <h1>Hello world!</h1>
    <p>This is a paragraph</p>
    <Link to="/page-2/">Page 2</Link>

    <Counter />
  </div>

Component Parameters

In index.js file

<Counter color="blue" />

Read parameter in counter.js.

{this.props.color}

or

<div style={{ clor: this.props.color}}>
  ...
</div>

Plugins

Plugins can be downloaded from https://www.gatsbyjs.org/docs/plugins

For example, install typography plugin

npm install --save gatsby-plugin-typography

Create gatsby-config.js file.

module.exports = {
  plugins: [`gatsby-plugin-typography`]
}

Then restart website

gats develop

Layouts

Create default layout in src/layouts/index.js

import React from "react"

export default({ children }) =>
  <div>
    <h1>Header</h1>
    {children()}
    <h3>Footer</h3>
  </div>

Site Data

Create a file called gatsby-config.js.

  module.exports = {
    siteMetadata: {
      title: "Giraffe Academy's Website",
      author: Mike,
    }
  }

In index.js, use graphql

import React from "react"

export default({data}) => (
  <div style={{color: 'tomato', backgroundColor: 'blue'}} >
    <h1>{data.site.siteMetadata.title}</h1>
    <p>{data.site.siteMetadata.author}</p>
  </div>
)

export const query = graphql`
  query FirstQuery {
    site {
      siteMetadata {
        title
        author
      }
    }
  }
`

Restart gatsby server.

Testing GraphiQL page

Access http://localhost:8000/___graphql

{
  site {
    siteMetadata {
      title
      author
    }
  }
}

File Data

Install gatsby-source-filesystem plugin

npm install --save gatsby-source-filesystem

Update gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      }
    }
  ]
}

Restart gatsby server.

Use GraphiQL to query file or allFile

{
  allFile {
    edges {
      node {
        id
      }
    }
  }
}

Note: after key in allFile, press Control-Enter or Command-Enter, the information will be auto filled up.
Note: If delete id, press Control-Space, the available attributes will be shown.

For example,

node: {
  extension
  relativePath
}

Update index.js

import React from "react"

export default({data}) => (
  <div style={{color: 'tomato', backgroundColor: 'blue'}} >
    <table>
      <thead>
        <tr>
          <th>relativePath</th>
          <th>prettySize</th>
          <th>extension</th>
          <th>birthTime</th>
        </tr>
      </thead>
      <tbody>
        {data.allFile.edges.map({ node }) =>
          <tr>
            <td>
              {node.relativePath}
            </td>
            <td>
              {node.prettySize}
            </td>
            <td>
              {node.extension}
            </td>
            <td>
              {node.birthTime}
            </td>
          </tr>
        }
      </tbody>
    </table>
  </div>
)

export const query = graphql`
  query MyFilesQuery {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`

Working with Markdown

Install plugin gatsby-transformer-remark

npm install --save gatsby-transformer-remark

Update plugin session in gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-transformer-remark`,
  ]
}

In GraphiQL, can see two new options

markdownRemark
allMarkdownRemark

Create markdown file src/pages/myFirstPost.md

---
title: "My Markdown File"
author: "Mike"
---

This is the content in my markdown

To access attributes in markdown file

id
html
formatmatter
formatmatter {
  title
  date
  parent
}

References

Gatsby - Static Site Generator | Tutorial