📘 mkit-bundle-gatsby

Micro Gatsby project bundle

Slightly opinionated GatsbyJS v2 starter template supporting various best practices.

GatsbyJS and its Starters offer outstanding features. However, there are some essential components we identify as a must-have for every project. Shared layout, full-blown SEO, static assets, favicon generation, (es)lint, pre-commit hooks... Say No More!

Bug reports and PRs are more than welcome!

Motivation

This project strives to deliver clean folder structure and satisfying development experience. Easy.

Single source of truth configuration. As simple as editing a few constants in a single file and you're all set to start writing your own code!

There are many starter projects out there, but we felt they were all too tightly coupled to their domain of usage, e.g. blogs, landing pages, e-commerce, etc.

This boilerplate will get you exactly to the point where you can start your own journey. The production-ready skeleton for modern web apps.

Features

• 🚀 Latest JS Support
• 💎 ReactJS & PropTypes Validation
• 🔎 SEO Reusable Component
• 📈 Google Analytics Integration
• 💯 Google Lighthouse 100/100 Score
• ✈️ Offline Support
• 🔧 Single Source Of Truth Configuration
• ⚡ ESlint, Prettier, EditorConfig
• 📂 Clean folder Structure
• 🚀 Production Build
• ⭐ Automated Favicon Generation
• 📜 Automated Manifest Support
• 🌐 Automated Sitemap Support
• 🤖 Automated Robots.txt Support
• 🌿 Automated Structured Data Support (JSON-LD)
• 🐘 size-plugin For Production Bundle Inspection
• 👷 npm run All The Things
• 🚦 Pre-commit Hooks

Gatsby-Specific Components

• 🌀 Reusable Layout Component
• 🎩 HOC-like <StaticQuery /> Usage, i.e. withStaticQuery()

Getting Started

Automagically...

This whole project can be installed automagically using our smart tool.

1. Visit mkit-bundler

2. That's pretty much it... 💥 💥 💥

Don't worry, these instructions will be present there too!

or using Gatsby's CLI

WIP

or Manually

These simple steps will get you a copy of the project, make it your own and let you start hacking right away!

⚠️ If you face any npm errors try the same steps with Yarn.

1. Clone the repository

git clone https://github.com/mkitio/mkit-bundle-gatsby.git <your-project-name>

2. Make it your own

cd <your-project-name> && rm -rf .git && git init

# Change the constants in `/gatsby-config.js` to your liking;

# Replace `/static/images/icon.png` and `/static/images/social.png` with your own. Mind the image size for best performance;

3. Install the dependencies

npm install

3. Test your installation with production build

npm run build && npm run serve

4. Start hacking!

# code and have fun
npm run develop

When deploying you'd want to run npm run build. Then deploy the generated /public folder and its contents.

Folder Structure

.
├── scripts                       # Runnable utility scripts
│   └── favicons.js                 # https://www.npmjs.com/package/favicons
├── src                           # Source files
│   ├── components                  # React (dumb) components
│   │   ├── layout                    # Layout component for wrapping your pages
│   │   └── seo                       # Reusable SEO component
│   ├── pages                       # Pages
│   │   ├── 404.js                    # 404 page
│   │   ├── index.js                  # Index page
│   │   └── learn-more.js             # Learn-more page (can be deleted)
│   └── utils                       # Helpers
│       └── jsonld-generator.js       # JSON-LD generator
├── static                        # Static files served from the root of your domain
│   └── images                      # Static images
│       ├── icon.png                  # Used to generate static assets automatically
│       └── social.png                # Used for SEO and Social media meta tags
├── README.md
├── gatsby-config.js              # Standard gatsby-config.js file extended with more variables
├── ...
└── package.json

Available Scripts

In the project directory, you can run:

# Lint all `/src` files
npm run lint

# Local development
npm run develop

# Production build
npm run build

# Serve production build
npm run serve

# Build and run production preview
npm run build && npm run serve

Versioning

This project uses Semantic Versioning, a.k.a. Semver.

Each release is tagged by:

git tag -a v1.0.0 -m "Release v1.0.0"
npm publish --tag <tag>

Authors

Stoyan Merdzhanov - Initial work - MK IT

See also the list of contributors who participated in this project.

Acknowledgments

A hat-tip to Fabian Schultz (@fschultz_)! This project was heavily inspired by his amazing starter gatsby-universal and hard work!

License

The MIT License (MIT)

Copyright (c) 2018-present MK IT Ltd. <hi@mkit.io>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.