Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinformentin/gatsby-v2-tutorial-starter
Gatsby V2 Starter - product of step by step tutorial
https://github.com/justinformentin/gatsby-v2-tutorial-starter
circleci emotion eslint gatsby gatsby-image lighthouse prettier react seo styled-components typefaces typography
Last synced: 4 months ago
JSON representation
Gatsby V2 Starter - product of step by step tutorial
- Host: GitHub
- URL: https://github.com/justinformentin/gatsby-v2-tutorial-starter
- Owner: justinformentin
- License: mit
- Created: 2018-10-28T04:45:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T19:41:49.000Z (over 1 year ago)
- Last Synced: 2024-01-16T13:08:54.779Z (5 months ago)
- Topics: circleci, emotion, eslint, gatsby, gatsby-image, lighthouse, prettier, react, seo, styled-components, typefaces, typography
- Language: JavaScript
- Size: 5.05 MB
- Stars: 139
- Watchers: 4
- Forks: 55
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-jam-stack - SEO Friendly Blog Theme
README
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
[](https://app.netlify.com/start/deploy?repository=https://github.com/justinformentin/gatsby-v2-tutorial-starter)
```bash
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
```bash
├──.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
```