Gatsby 2.0 starter
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-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)
What's inside?
- 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 ->
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!