Repository files navigation

A fork fromgatsby-advanced-starter theme from vagr9k. Check out his excellent theme as a great minimal starter for any gatsby project, as well as notes on what made this a great skeleton theme in the first place

How is this theme any different? A few improvements were made:

• Flattened the components structure so it's easier to modify and customize
• Moved over independent css styles to a sass-folder struct so you can customize styles quickly
• Convert class components to React Hook friendly components

Here's a quick guide through on how this gatsby-advanced starter works:

• $ npm install
• $ npm run dev

• gatsby-config.js -> this is your plugins, similar to wordpress plugins
  • When you run the backend to createpublic and .cache, these plugins are being looked at for generating graphql assets
  • When you run the frontend to consume it, it's using those same assets frompublic and .cache. It's also bundling a javascript library to frontend (imageResharp -> lazy loading images)
• gatsby-node.js -> this is the settings to point your data sources,
  • also includes graphql setup
• data/siteConfig.js -> backend file configs

gatsby-node.js -> gatsby-config.js (middleware plugins - backend processing, and JS library frontend) -> frontend

• content -> this is where markdown files live

• .cache
• public

• src/
  • layout -> entry point
  • pages -> localhost:8000/about
  • templates -> base styling/html for tags/categories/posts
  • components -> dumb reusable react components

• anytime you modify backend files (gatsby-config.js, gatsby-node.js, siteConfig.js) -> you need to clean cache using$ npm run clean and then$ npm run dev
• basically the 3 backend files are generating data topublic and.cache that the frontend references.
• basically when you deploy the website, there's no backend running
• If you change frontmatter onmd, you need to run$ npm run clean again