Static Site Generator built in React & GraphQL
TL;DR: It makes lightning fast sites with modern web technologies 🚀
npx gatsby new my-gatsby-site
or
Only need a GitHub account to login to Code Sandbox.
gatsby develop
if running locally. Automatically spins up on Code Sandbox
What are some interesting things we see?
<Image>
and <Link>
React Components that wrap <img>
and <a>
with some enhancements 🎉
<a>
tag when rendered out.per-route Code splitting, intersection observer, prefetching? Huh? 🤔
Simplifying all of the jargon, links using <Link>
will load the content that would load when you click the link even before you click on it.
<picture>
tag. Passes image to fit your viewport.The internals of gatsby-image only enhances JPGs and PNGs.
For something like SVG, import it manually given it is already optimized for any viewport.
import astro from '../images/gatsby-astronaut.svg'
return <img src={astro} />
Look around the starter and see what other pages / components are baked into the template.
Head to the bathroom, get a drink, relax for a bit.
Be back in 10 minutes
Gatsby's main data layer where everything can be sourced from
A data query language developed by Facebook.
Rather than hitting tons of URLs as you do in a REST api, you have one endpoint to create queries from.
{
allFile {
edges {
node {
# Data from all files being sourced from the filesystem
}
}
}
}
Let's explore things with GraphiQL
Plugins! gatsby-transformer-filesystem
specifically.
Let's look at gatsby-config.js
for a deeper look.
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
}
Gatsby-Image uses gatsby-transformer-sharp to do the majority of the work
Sharp
image processing Libraryconst query = graphql`
query {
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`;
<StaticQuery
query={/* Query from last slide */}
render={data => {
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
}}
/>
<picture>
, Intersection Observer)As said earlier, Mike and I are developing Syracuse.io with Gatsby. If you'd like to help out, visit https://github.com/syracuseio/syracuseio.
We're willing to pair program if you'd like some help with contributing
If you get a single PR merged into Gatsby, you can get one product in their the Gatsby store for free (Exlcuding their higher costing products. ex: sweaters, pj pants)