Gatsby – Full Tutorial for Beginners



Learn how to use the Gatsby static site generator in this full tutorial course for beginners.

⭐️ Contents ⭐️
⌨️ (00:00) Introduction
⌨️ (01:38) Mac & Windows Installation
⌨️ (04:46) Creating a new site
⌨️ (11:19) Adding Content
⌨️ (17:10) Linking Pages
⌨️ (22:04) Interactive Pages
⌨️ (29:18) Building your site
⌨️ (31:53) Components
⌨️ (37:07) Plugins
⌨️ (42:47) Layouts
⌨️ (46:54) Site Data
⌨️ (55:12) File Data
⌨️ (1:04:24) Working with Markdown

Course developed by Mike Dane. Check out his YouTube channel for more great programming courses: https://www.youtube.com/channel/UCvmINlrza7JHB1zkIOuXEbw

🐦Follow Mike on Twitter – https://twitter.com/mike_dane

🔗The Mike’s website: https://www.mikedane.com/

⭐️Other full courses by Mike Dane on our channel ⭐️
💻C: https://youtu.be/KJgsSFOSQv0
💻C++: https://youtu.be/vLnPwxZdW4Y
💻SQL: https://youtu.be/HXV3zeQKqGY
💻Ruby: https://youtu.be/t_ispmWmdjY
💻PHP: https://youtu.be/OK_JCtrrv-c
💻C#: https://youtu.be/GhQdlIFylQ8

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 29 Comments

  1. Md Irfan Khan

    hello.sir. you are awesome. i request to make on JavaScript and AI

  2. Scott Huang

    You don't have to import proptyes and define the proptypes?

  3. Alem Kahrovic

    hey mike, i have installed gatsby globally but after when i check the version i get this error every time:

    Alems-MBP:~ alemkahrobek$ sudo npm install –global gatsby-cli
    Password:
    /usr/local/bin/gatsby -> /usr/local/lib/node_modules/gatsby-cli/lib/index.js
    + gatsby-cli@2.5.4
    updated 1 package in 15.287s
    Alems-MBP:~ alemkahrobek$ gatsby –version
    /usr/local/lib/node_modules/gatsby-cli/node_modules/configstore/index.js:49
    throw error;
    ^

    Error: EACCES: permission denied, open '/Users/alemkahrobek/.config/gatsby/config.json'
    You don't have access to this file.

    at Object.openSync (fs.js:439:3)
    at Object.readFileSync (fs.js:344:35)
    at Configstore.get all [as all] (/usr/local/lib/node_modules/gatsby-cli/node_modules/configstore/index.js:31:25)
    at new Configstore (/usr/local/lib/node_modules/gatsby-cli/node_modules/configstore/index.js:25:48)
    at new Store (/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry/lib/store.js:28:51)
    at new EventStorage (/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry/lib/event-storage.js:24:50)
    at new AnalyticsTracker (/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry/lib/telemetry.js:32:50)
    at Object.<anonymous> (/usr/local/lib/node_modules/gatsby-cli/node_modules/gatsby-telemetry/lib/index.js:7:18)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)

    hope you or somebody can help me? thx

  4. JS Conf India

    I love your tutorial. Can you please tell me how to generate hash classes in gatsby for ex. _[hash:base:64:6]

  5. B Smith

    This does not work on my mac at all, every section has an error
    RR! The operation was rejected by your operating system.
    npm ERR! It is likely you do not have the permissions to access this file as the current user
    npm ERR!
    npm ERR! If you believe this might be a permissions issue, please double-check the
    npm ERR! permissions of the file and its containing directories, or try running
    npm ERR! the command again as root/Administrator (though this is not recommended).

  6. Nicole Buckley

    I love freecodecamp! amazing! thank you for making CS so accessible!

  7. Gre Ko

    He just copy&pastes the code, then reads it out loud, like i'm blind orsmthng. doesn't really explain much though….

  8. Carl Summers

    This is what I needed! I cloned the repo for the gatsby blog and was totally lost with the file system, but this definitely clears the basics up for me for sure. Thanks!

  9. Nigel Eke

    Nice intro – many many thanks for the hours you've saved me.

  10. Unerty

    21:30
    – Mom, can we have page 3?
    – We already have page 3 at home!
    page 3 at home: Page 2

  11. Denniszen

    Best gatsby tutorial. Can you do a part 2 with WordPress or contentful as backend? Thanks

  12. Felix D'Amico

    Thanks for the tutorial Mike, you nail it every time 😃💪💪

  13. Shamir George

    new site creation isn't working. It says github is not a recognized internal command or something like that.

  14. This man Mike is there in all the video's almost . He knows so many programming languages it's crazy from c to python to everything.

  15. Munish Kumar

    Thanks for keeping it brief and covered almost all the points!! I can now start to build a static website using gatsby.

  16. nexgencodecamp

    Very ambitious video teaching node, react, ES6 & Gatsby all at once! I like it though!

  17. Thank you so much but this video very detailed most of the time no need to do.dont get me wrong

Leave a Reply