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.
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-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
)
- Gatsby 1.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!