Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fabien0102/gatsby-starter
Gatsby 2.0 starter with typescript and many cools dev tools
https://github.com/fabien0102/gatsby-starter
gatsbyjs jest plop react starter-kit typescript
Last synced: 3 days ago
JSON representation
Gatsby 2.0 starter with typescript and many cools dev tools
- Host: GitHub
- URL: https://github.com/fabien0102/gatsby-starter
- Owner: fabien0102
- Created: 2017-04-13T12:50:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T04:24:35.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T01:09:41.828Z (10 days ago)
- Topics: gatsbyjs, jest, plop, react, starter-kit, typescript
- Language: TypeScript
- Homepage:
- Size: 21.5 MB
- Stars: 385
- Watchers: 14
- Forks: 97
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gatsby 2.0 starter
[](https://github.com/sindresorhus/xo)
[](https://travis-ci.org/fabien0102/gatsby-starter)
[](https://ci.appveyor.com/project/fabien0102/gatsby-starter/branch/master)
[](https://codeclimate.com/github/fabien0102/gatsby-starter)
[](https://codeclimate.com/github/fabien0102/gatsby-starter/coverage)
Demo:
Storybook:
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:
```bash
$ 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 .
Run `npm run build` to create static site ready to host (`/public`)
## What's inside?
- [ ] Gatsby 2.0 (alpha)
- [x] sharp
- [x] offline support
- [ ] google analytics
- [x] manifest
- [x] typescript
- [x] blog in markdown
- [x] Best practices tools
- [x] [Jest](https://facebook.github.io/jest/) / [Enzyme](http://airbnb.io/enzyme/)
- [x] [Storybook](https://storybooks.js.org/)
- [x] [Typescript](https://www.typescriptlang.org/) / [tslint](https://palantir.github.io/tslint/)
- [x] [xo linter](https://github.com/sindresorhus/xo)
- [x] [Remark-lint](https://github.com/wooorm/remark-lint)
- [x] [Husky](https://github.com/typicode/husky) & [lint-staged](https://github.com/okonet/lint-staged) for autofix each commit
- [x] Travis/AppVeyor config (unix-osx-windows CI)
- [x] Code climate config
- [x] SEO
- [x] [Helmet](https://github.com/nfl/react-helmet)
- [x] [Semantic-ui](http://react.semantic-ui.com) for styling
- [x] Lazyboy tools
- [x] [plop](https://github.com/amwmedia/plop) templates -> `npm run generate`
## 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!