- React 16 support via gatsby-plugin-react-next
- Bootstrap 4 support via reactstrap
- Unit testing with Jest and Enzyme
- Global styling with Sass
- Netlify CMS support
- Blogging capability including support for
- Images in blog post Markdown
- Multiple authors
- Blog post categories
- Blog post tags
If you have more or less complex requirements one of our alternative kits, built upon the same base, might better suit your needs:
gatsby-starter-base removes Netlify CMS support and is designed as a barebones static site generator.
gatsby-starter-netlify-cms removes much of the blogging configuration but still includes the basic Netlify CMS setup.
The kit requires Node (version 8 or above recommended) and npm (version 5.2 or above recommended). If those are available on your system you can use npx to quickly scaffold a new site from the kit:
npx -p gatsby-cli gatsby new $DIR_NAME https://github.com/orangejellyfish/gatsby-starter-blog cd $DIR_NAME npm start
Gatsby is a very flexible tool. In order to reduce some of the configuration overhead associated with such flexibility we favour the following conventions:
A "layout" is viewed as a common parent to multiple pages. It is represented as a React component exported from a file in the
A "template" is viewed as a blueprint for an individual page. It is represented as a React component exported from a file in the
A "page" is viewed as an individual web page. A page is represented as a React component exported from a file in the
Content may be placed inline within a page if it is not required to be editable via the CMS.
In some cases, such as blog posts, each editable piece of content represents a page. In such situations editable content may be placed in the
src/pagesdirectory. For example, a blog post written in Markdown might be found in
src/pages/blog/my-post.md. In this case the page will use a template component.
Editable content is placed in a Markdown file in the
The directory structures of the
src/contentdirectories are used to map content to pages. This avoids the need to configure the relationship manually. The content for
src/pages/about/index.jsis expected to be found in
Simple components (those that are not pages or layouts and generally receive data as props from ancestor components that pull in data from GraphQL) are placed in the
GraphQL fragments are placed in the
src/fragmentsdirectory. This means all fragments are co-located so you don't have to search through all of your components to find one.
This starter kits includes useful blogging functionality. Blog posts are placed
in subdirectories of
src/content/blog-posts. Images and other attachments for
a given post should be placed alongside the post content itself. We use the
gatsby-remark-images plugin to interpret file links within Markdown at
build time. For example, if you have an image
in a blog post directory you could render that image in the post with Markdown:
Take a look at the following diagram: ![This is the diagram alt text](diagram.png)