Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Gatsby 2.0 starter

XO code style Build Status Build status Code Climate Test Coverage

Demo: https://fabien0102-gatsby-starter.netlify.com/

Storybook: https://fabien0102-gatsby-starter.netlify.com/docs/

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

Warning

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 https://github.com/fabien0102/gatsby-starter

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)
 ├── README.md                     // 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!

About

Gatsby 2.0 starter with typescript and many cools dev tools

Topics

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.