justinformentin / Gatsby V2 Tutorial Starter
Licence: mit
Gatsby V2 Starter - product of step by step tutorial
Stars: ✭ 139
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Gatsby V2 Tutorial Starter
gatsby-starter-antoine
My opinionated Gatsby.js starter
Stars: ✭ 17 (-87.77%)
Mutual labels: eslint, gatsby, prettier
React Ssr Starter
All have been introduced React environment
Stars: ✭ 20 (-85.61%)
Mutual labels: eslint, prettier, styled-components
nest-boilerplate
Nest.js boilerplate with CircleCI, Commitizen, Commitlint, Docker-Compose, ESLint, GitHub Actions, Husky, Lint-staged, OpenAPI, Prettier, PostGreSQL, Travis CI, TypeORM
Stars: ✭ 16 (-88.49%)
Mutual labels: circleci, eslint, prettier
React Native Boilerplate
A React Native boilerplate with Expo, Redux, React Navigation, Styled Components and some 💕 included.
Stars: ✭ 135 (-2.88%)
Mutual labels: eslint, prettier, styled-components
Gatsby Starter Typescript Rebass Netlifycms
My default Gatsby setup. Includes rich MDX support.
Stars: ✭ 79 (-43.17%)
Mutual labels: prettier, gatsby, styled-components
react-component-library-lerna
Build your own React component library managed with lerna, presented with storybook and published in private npm registry.
Stars: ✭ 55 (-60.43%)
Mutual labels: eslint, styled-components, prettier
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+5026.62%)
Mutual labels: typography, styled-components, emotion
rebass
⚛️ React primitive UI components built with styled-system.
Stars: ✭ 7,844 (+5543.17%)
Mutual labels: styled-components, typography, emotion
Gatsby Themes
Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
Stars: ✭ 1,208 (+769.06%)
Mutual labels: eslint, gatsby, circleci
Gatsby Starter Typescript Deluxe
A Gatsby starter with TypeScript, Storybook, Styled Components, Framer Motion, Jest, and more.
Stars: ✭ 50 (-64.03%)
Mutual labels: eslint, gatsby, styled-components
Gatsby Starter Prismic
A typography-heavy & light-themed Gatsby Starter which uses the Headless CMS Prismic.
Stars: ✭ 381 (+174.1%)
Mutual labels: gatsby, typography, emotion
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-7.19%)
Mutual labels: seo, styled-components, emotion
Gatsby Starter Strict
A Gatsby starter with strict linting and auto-formatting rules.
Stars: ✭ 43 (-69.06%)
Mutual labels: eslint, prettier, gatsby
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-16.55%)
Mutual labels: eslint, prettier, styled-components
Fluid System
Fluid System is a style props function transformer for generating fluid styles. 💦
Stars: ✭ 130 (-6.47%)
Mutual labels: typography, styled-components, emotion
Onno
Responsive style props for building themed design systems
Stars: ✭ 95 (-31.65%)
Mutual labels: styled-components, emotion
Gatsby Remark Social Cards
Gatsby remark plugin for generating social card graphics
Stars: ✭ 95 (-31.65%)
Mutual labels: gatsby, seo
Css In React
🍭 CSS in React - Learn the best CSS in JS frameworks by example
Stars: ✭ 101 (-27.34%)
Mutual labels: styled-components, emotion
Gatsby Plugin Advanced Sitemap
Advanced XML Sitemaps for Gatsby.js
Stars: ✭ 94 (-32.37%)
Mutual labels: gatsby, seo
Simple React Calendar
A simple react based calendar component to be used for selecting dates and date ranges
Stars: ✭ 97 (-30.22%)
Mutual labels: eslint, prettier
View the demo at gatsby-tutorial-starter.netlify.com.
Read the full step by step guide: Guide to Build a Gatsby Site with Perfect Pagespeed Scores.
Features
- Gatsby v2
- Emotion for styling
- Code syntax highlighting
- Tags
- SEO
- Sitemap generation
- Schema.org JSON-LD for Google Rich Snippets
- Twitter Tags
- OpenGraph Tags for Facebook/Google+/Pinterest
- robots.txt
- Typography.js
- Typefaces for faster font loading
- Offline Support
- Manifest Support
- Gatsby Image
- Responsive images
- Traced SVG Loading with Lazy-Loading
- WebP Support
- Development tools
- ESLint for linting
- Prettier for code style
- CircleCI support
- Google Lighthouse Optimization
Lighthouse Audit
Usage
Download project
# With `gatsby-cli`
gatsby new my-site https://github.com/justinformentin/gatsby-v2-tutorial-starter
OR
# Cloning
git clone my-site https://github.com/justinformentin/gatsby-v2-tutorial-starter.git
cd my-site
THEN
# Install dependencies
npm i
# Start dev server
gatsby develop
# Build for production
gatsby build
# Format with Prettier
npm format
Folder structure
├──.circleci # Circleci integration
├── config # Theme and site metadata
├── content # Post markdown and images
├── src
│ ├── components
│ ├── layouts
│ ├── pages
│ ├── style
│ └── templates # For Post and Tag page generation
├── static # Images for logo and favicon, and robots.txt
├── gatsby-config.js # Plugin loading and configuration
└── gatsby-node.js # Generate posts/tags and modify webpack
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].