Project Structure
Get familiar with the files and folder structure of a newly created Gatsby project.
We'll cover the following...
- Introduction to the project structure
- Folders structure
- The .cache directory
- The node_modules directory
- The public directory
- The /src folder
- components: This contains the React and JSX components that make up bigger pieces of our project.
- images: This stores the image assets we need in our application. This directory already contains two images that are used in the default starter.
- pages: This is a very important folder. It contains individual files that are later considered web pages in Gatsby and used for routing within the application.
- templates: This contains templates that are used by Gatsby to programmatically create pages.
- File structure
- Other files
Introduction to the project structure
So far, we’ve generated a new project named Lark. Let’s now look into the important generated project folders and files, and see what each does.
You can explore this folder structure below. It shows all project files except the /.cache, /node-modules, /public folders, and the contents of /src/images folder.
import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
const Header = ({ siteTitle }) => (
<header
style={{
background: `rebeccapurple`,
marginBottom: `1.45rem`,
}}
>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
}}
>
<h1 style={{ margin: 0 }}>
<Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{siteTitle}
</Link>
</h1>
</div>
</header>
)
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
Project structure