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.
This starter is currently in wip (see progression to #What's inside session).
Install this starter (assuming Gatsby is installed) by running from your CLI:
$ gatsby new my-website https://github.com/fabien0102/gatsby-starterRun 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)
- Gatsby 2.0 (alpha)
- sharp
- offline support
- google analytics
- manifest
- typescript
- blog in markdown
- Best practices tools
- Jest / Enzyme
- Storybook
- Typescript / tslint
- xo linter
- Remark-lint
- Husky & lint-staged for autofix each commit
- Travis/AppVeyor config (unix-osx-windows CI)
- Code climate config
- SEO
- Semantic-ui for styling
- Lazyboy tools
- plop templates ->
npm run generate
- plop templates ->
.
├── 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
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!