src/ contains the website that is run on client side, React app
pages/ → gatsby creates a page for each React component down here
layouts/ → demos + refer to layouts(for today follow the starter)
pause at post listing and pass to Nut
Overview
With Gatsby, the final static site is a React app. And the source code lives in our package’s src/ directory.
Let’s examine the folder structure of our starter. The layout lives in its own folder with a stylesheet along side of it. At the same time, we get React’s component mindset for free. Each reusable component live in their own directory under src/components.
$ tree src -L 2
src
├── components
│ ├── About
│ ├── Disqus
│ ├── Footer
│ ├── PostListing
│ ├── PostTags
│ ├── SEO
│ ├── SocialLinks
│ ├── UserInfo
│ └── UserLinks
├── favicon.png -> ../static/logos/logo-48.png
├── layout
│ ├── index.css
│ └── index.jsx
├── pages
│ ├── about.jsx
│ └── index.jsx
└── templates
├── b16-tomorrow-dark.css
├── category.jsx
├── post.css
├── post.jsx
└── tag.jsx
Pages
Gatsby core automatically turns React components in src/pages into pages
Create a new page under src/Pages/
// anyhowly.jsx
import React from"react";
exportdefault () => <div>anyhowly</div>;
The hot reload dev server that is running watches our React app’s directory. And once we’ve created this component, it should be up and running in our app already.
You can use gatsby-plugin-page-creator to turn any directory into one that automatically creates pages from the React components inside of it.
Overview
$ tree src -L 2src├── components│ ├── About│ ├── Disqus│ ├── Footer│ ├── PostListing│ ├── PostTags│ ├── SEO│ ├── SocialLinks│ ├── UserInfo│ └── UserLinks├── favicon.png -> ../static/logos/logo-48.png├── layout│ ├── index.css│ └── index.jsx├── pages│ ├── about.jsx│ └── index.jsx└── templates ├── b16-tomorrow-dark.css ├── category.jsx ├── post.css ├── post.jsx └── tag.jsx// anyhowly.jsximport React from "react";export default () => <div>anyhowly</div>;