Getting started with Gatsby

Edit on Github
webdev/gatsby_intro.md
Mar 20, 2020
Web Development 
npm install --global gatsby-cli
# or
yarn global add gatsby-cli

gatsby new . # create a new gatsby site in the current folder
# or
gatsby new gatsby-site # create a new site in a folder called `gatsby-site`
cd gatsby-site # move to the project directory to run gatsby commands like develop, serve and build

gatsby develop # run a hot-reloading server on http://localhost:8000
gatsby build # create a production build
gatsby serve # serve the production build on a local HTML server

# get help
gatsby --help
gatsby COMMAND_NAME --help

npx gatsby new blog.aamnah.com
cd blog.aamnah.com
npm run develop # start dev server http://localhost:8000
npm run build # build production site
npm run serve # serve production site you built, http://localhost:9000

npx gatsby help # show available commands
npx gatsby new help # show help for a specific command

Directory Structure

src/
    - pages

All your pages are in the src/pages directory

Linking between pages

There’s a builtin Link component

import Link from 'gatsby-link'

<Link to="/page-3/">Go to page 3</Link>

The link is going to the page located at src/pages/page-3.js. The slashes in /page-3/ are not necessary, the link will still work without them

Adding Markdown content

# to read markdown files from a directory
npm install --save gatsby-source-filesystem

# to transform Markdown content to HTML and convert frontmatter
npm install --save gatsby-transformer-remark

add the conifg

plugins: [
        {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`, // where would this be used? is this significant? does this need to match the name of the path dir?
        path: `${__dirname}/src/content`
      }
    },
    `gatsby-transformer-remark`,
]