orta / gatsby-starter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fabien0102/gatsby-starter

0.0 3.0 0.0 15.03 MB

Gatsby 1.0 starter with typescript and many cools dev tools

JavaScript 33.80% HTML 0.72% TypeScript 59.71% CSS 5.77%

gatsby-starter's Introduction

Gatsby 1.0 starter

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

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

Gatsby 1.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/past, this starter-kit have many generators to permit simple bootstrap of current file pattern (eg. components/pages/blog posts).

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

Be lazy and have fun!

Recommend Projects