Notes

Getting started with Gatsby

Edit on GitHub


Web Development
2 minutes
1npm install --global gatsby-cli
2# or
3yarn global add gatsby-cli
1gatsby new . # create a new gatsby site in the current folder
2# or
3gatsby new gatsby-site # create a new site in a folder called `gatsby-site`
4cd gatsby-site # move to the project directory to run gatsby commands like develop, serve and build
1gatsby develop # run a hot-reloading server on http://localhost:8000
2gatsby build # create a production build
3gatsby serve # serve the production build on a local HTML server
1# get help
2gatsby --help
3gatsby COMMAND_NAME --help
1npx gatsby new blog.aamnah.com
2cd blog.aamnah.com
3npm run develop # start dev server http://localhost:8000
4npm run build # build production site
5npm run serve # serve production site you built, http://localhost:9000
6
7npx gatsby help # show available commands
8npx 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

1import Link from 'gatsby-link'
1<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

1# to read markdown files from a directory
2npm install --save gatsby-source-filesystem
3
4# to transform Markdown content to HTML and convert frontmatter
5npm install --save gatsby-transformer-remark

add the conifg

 1plugins: [
 2        {
 3      resolve: `gatsby-source-filesystem`,
 4      options: {
 5        name: `content`, // where would this be used? is this significant? does this need to match the name of the path dir?
 6        path: `${__dirname}/src/content`
 7      }
 8    },
 9    `gatsby-transformer-remark`,
10]