Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Gatsby 2.0 starter

XO code style Build Status Build status Code Climate Test Coverage



Gatsby 2.0 starter for generate awesome static website working with a nice env development.


This starter is currently in wip (see progression to #What's inside session).

Getting started

Install this starter (assuming Gatsby is installed) by running from your CLI:

$ gatsby new my-website

Run npm start (or press F5 if you are on VSCode) to hot-serve your website on http://localhost:8000.

Run npm run build to create static site ready to host (/public)

What's inside?

Files structure

 ├── data                          // website data (included into graphQL)
 │   ├── author.json               // list of blog authors
 │   ├── avatars                   // authors avatars
 │   └── blog                      // all blog data (posts, images)
 ├── gatsby-config.js              // gatsby configuration
 ├── gatsby-node.js                // gatsby node hooks
 ├── generators                    // generators (`npm run generate`)
 │   ├── blog-post-generator.js    // `blog post` generator
 │   ├── component-generator.js    // `component` generator
 │   ├── page-generator.js         // `page` generator
 │   ├── plopfile.js               // generators entry
 │   ├── templates                 // all templates (handlebar notation)
 │   └── utils.js                  // utils scripts for generators
 ├── package.json
 ├── public                        // output folder (in .gitignore)
 ├──                     // this file
 ├── src                           // sources
 │   ├── components                // all react components
 │   ├── css                       // styles
 │   ├── declarations.d.ts         // declarations for no typescript modules/files
 │   ├── graphql-types.d.ts        // graphql types (`npm run graphql-types`)
 │   ├── html.tsx                  // main html (required)
 │   ├── layouts                   // layouts
 │   │   └── default.tsx           // default layout (required)
 │   ├── pages                     // all pages
 │   └── templates                 // all templates (used for procedural page creation, see `gatsby-node.js`)
 ├── tools                         // miscs tools for dev
 │   └── update-post-date.js       // update post date hook
 ├── tsconfig.json                 // typescript configuration
 ├── tslint.json                   // tslint configuration
 └── package-lock.json             // npm lock file

Plop generators - npm run generate

To avoid any boring copy/paste, this starter-kit have many generators to permit simple bootstrap of current file pattern (eg. components/pages/blog posts). e.g. to add a new blog post first add the authors to data/authors.json and add authors' images to the data/avatars folder. Next execute 'npm run generate' and select 'Blog post'. Follow the prompts for a new post. Each blog post requires an image be added to the /data/blog/ folder prior to running 'gatsby develop'.

You can add/delete/modify any generators into /generators folder.

Be lazy and have fun!