How to Gatsby: The Complete Course/

...

/

Project Structure

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

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

Folders structure

Let’s focus on the directory structure of our project and understand how to architect it.

The .cache directory

This is an auto-generated folder. This is generated by Gatsby for internal caching. We have no business with this folder, and neither it nor its contents should be modified. This folder is already gitignore’d by Gatsby, and should not be committed to git.

The node_modules directory

This folder contains the npm ...