Gatsby #

References:

Quick Start | GatsbyJS

Basics #

Installation #

Create new site from template:

# create a new Gatsby site using the garden theme starter
$ gatsby new garden-source https://github.com/mathieudutour/gatsby-starter-digital-garden

$ cd garden-source

# install dependencies
$ npm install

# update dependencies
$ npm update

If this happens: npm WARN {something} requires a peer of {other thing} but none is installed. You must install peer dependencies yourself, do this: (credit)

$ npm install --save-dev "{other thing}"

Building Site #

Build site:

# Generate HTML files, etc.
$ gatsby build

# Start local server
$ gatsby serve

Start debugging server:

$ gatsby develop

Useful shell aliases:

alias gy='gatsby build && gatsby serve'
alias gyd='gatsby develop'

Use External Path for Public Files #

File tree:

.
├── garden
│   ├── subdir
│   ├── index
│   ├── index.html
│   ├── page-data
│   ├── static
│   ├── webpack.stats.json
│   └── ...
└── garden-source
    ├── LICENSE
    ├── README.md
    ├── content
    ├── gatsby-config.js
    ├── gatsby-node.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    └── public

Code to achieve this: (credits: 1, 2, 3)

// In gatsby-node.js

// Copy public path elsewhere
// Use copy instead of move since `gatsby serve` only knows source/public
const path = require("path")
const fs = require("fs-extra")

exports.onPostBuild = function() {
    fs.copySync(path.join(__dirname, "public"), path.join(__dirname, "../garden"),{ overwrite: true })
}