The third iteration of my personal website.
This project serves as an experiment with Gatsby, Netlify-CMS and the JAM stack. I'm hoping these notes will help anyone else toying around with this stack!
- If anyone is curious, this repo showcases the end result of Gatsby tutorial. This will quickly become stale as Gatsby is experiencing rapid growth.
This project uses npm for package dependency, make sure you have it installed first.
- Clone/fork this repository
- Run
npm install - Run
npm run developto start up the project locally
- To make sure packages stay up to date, periodically run
npm-check uto identify safe, backwards-compatible updates.
- Files are
sourcedbygatsby-source-*plugins. Once the data has been sourced, you use a "transformer" plugin to transform your source data into other types of data. - There are transformers for JSON, YAML, Markdown, etc.
According to Gatsby, any component found in the pages directory will be automatically turned into a page. This can be seen by looking at the gatsby-config.js file.
There are a few different ways to create Pages in Gatsby.
- Using page components
- Any React component defined in
src/pages/*.jswill automatically become a page. - EX: I create a file in
src/pages/about.jsand create a basic React component. Just by putting a React component in thesrc/pages/about.jsfile, you now have a page accessible at/about.
- Any React component defined in
- Programmatically create pages from data
- Gatsby lets you use GraphQL to query your data and map the query results to pages—all at build time.
- Check the docs on how Markdown file names are transformed into slugs.
- The steps to programmatically creating pages are:
- Query data with GraphQL
- Map the query results to pages
See the wiki for more info