Table of Contents
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
}