What is Gatsby
For newcomers, Gatsby is a React-based, GraphQL powered, app generator for static sites and apps. This builder read information from a variety of sources (file system, CMS (Wordpress, Drupal), structured data (YAML, JSON, Markdown) using GraphQL selects, and inject all the content into blazing fast apps and static websites. The deployment is also automatized for AWS, Netlify, GH pages and Now.sh.
Gatsby uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. All out of the box. I didn’t believe the speed until I tried it myself.
To start using this React-based app generator, is quite easy and all we need it's to have Node.js and Gatsby CLI, installed globally into our system.
Generate apps with Gatsby
The platform has a generous offer for starters, categorized by functionalities, CSS frameworks, and underline technologies:
- Blogs starters: Morning Dew, LekoArts Blog, Lumen
- Documentation starters: Antd docs, Gitbook
- One-page starters: Portfolio, Aerial, Highlights
For a full list, just access the official Gatsby corner with apps and projects.
GatsbyJS Dimension is an open-source app built with Gatsby app generator on top of HTML5Up Dimension design.
How to build the app from sources:
$ git clone https://github.com/app-generator/gatsbyjs-dimension.git $ cd gatsbyjs-dimension $ yarn $ yarn start # start the app in development mode $ yarn build # build the app for production
TailwindPlay - a simple open-source landing page styled with Tailwind CSS.
In case you want to generate your next app, using this Gatsby starter, just type:
$ git clone https://github.com/app-generator/gatsbyjs-starter-tailwindplay.git $ cd gatsbyjs-starter-tailwindplay $ yarn # install modules $ yarn start # start the app in development mode $ yarn build # build the app for production
It's a static starter based on Gatsby and styled via a minimal SCSS.
To generate an app, based on this starter, without leaving the page just type:
$ git clone https://github.com/app-generator/gatsby-starter-scss.git $ cd gatsby-starter-scss $ yarn # install modules $ yarn start # start the app in development mode $ yarn build # build the app for production
A blazing fast blog starter generated from Markdown content, PWA, Disqus, SEO, Styling:CSS-in-JS.
To build this starter from sources, just type:
$ git clone firstname.lastname@example.org:maxpou/gatsby-starter-morning-dew.git $ cd gatsby-starter-morning-dew $ yarn $ gatsby develop