Opinionated barebones GatsbyJS starter, pre-installed with my preferred tools and structure.
Almost zero styling, almost zero layout - ready to edit, delete what you don't need!
Features/Includes:
styled-components
, already set up and configured- Global 'normalizing' via
styled-components-normalize
- Add your own global styles via styled-components'
createGlobalStyle
method. (Already set up!) - Or, use SASS compilation and your own CSS files. That's set up, too!
- Universal importing from inside
/src
(e.g.import thing from "components/thing"
) react-icons
gatsby-plugin-sharp
gatsby-transformer-sharp
gatsby-image
react-helmet
formik
(withyup
validation) for formsdotenv
for handling env varsgatsby-plugin-sitemap
gatsby-plugin-robots-txt
- Also includes my
eslint + prettier + VS Code
configs, with autoformat/autofix on save
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying this starter.
gatsby new [DIRECTORY NAME] https://github.com/stoutlabs/gatsby-starter-stoutlabs
-
Start developing.
Navigate into your new site’s directory and start it up.
cd [DIRECTORY NAME]/ yarn develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000
!Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
Looking for more instructions?
- Full documentation for Gatsby can be found on their website - and they are FANTASTIC docs!! 💜
- Shameless plug: I'll be writing more articles soon over at Alligator.io, primarily in their Gatsby section... but perhaps in other areas as well. (And it's truly a great site, if you've never visited!)