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
hello.sir. you are awesome. i request to make on JavaScript and AI
i really like these zooms
You don't have to import proptyes and define the proptypes?
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
Thanks for putting this together! For anyone running into issues with the Layout section — layouts are no longer a thing! This article from Gatsby was really helpful to me in migrating from Layouts to the new, more React-y way Gatsby handles this — https://www.gatsbyjs.org/blog/2018-06-08-life-after-layouts/
Super !!!
I love your tutorial. Can you please tell me how to generate hash classes in gatsby for ex. _[hash:base:64:6]
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).
I love freecodecamp! amazing! thank you for making CS so accessible!
He just copy&pastes the code, then reads it out loud, like i'm blind orsmthng. doesn't really explain much though….
How the heck do you know everything?
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!
if you have npm 4:00
Nice intro – many many thanks for the hours you've saved me.
Nice joob. Big like.
21:30
– Mom, can we have page 3?
– We already have page 3 at home!
page 3 at home: Page 2
Best gatsby tutorial. Can you do a part 2 with WordPress or contentful as backend? Thanks
Thanks for the tutorial Mike, you nail it every time 😃💪💪
thx
new site creation isn't working. It says github is not a recognized internal command or something like that.
done
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.
Thanks Mike.
Hi There, any ideas >> npm WARN gatsby-interface@0.0.166 requires a peer of gatsby@2.6.0 but none is installed. You must install peer dependencies yourself.
Thanks for keeping it brief and covered almost all the points!! I can now start to build a static website using gatsby.
Very ambitious video teaching node, react, ES6 & Gatsby all at once! I like it though!
Thank you so much but this video very detailed most of the time no need to do.dont get me wrong
You Are Awesome bro , go on with your training . thumbs up .
MIKE!!!!! You taught me python three years ago – LET'S GEAUX!!!!