I know it's not a new video, but here are my notes on it: 10:00 - Helmet Plugin in gatsby-config.js for changing the title and metadata, in the . 12:33 - Create new pages simply by generating new files in the \pages folder. 15:03 - Create a new component. 22:59 - VSC extension for seing a preview of any markdown file that is open. 23:80 - Frontmatter 26:13 - gatsby-source-filesystem (npm): File System Plugin, for accessing files in the computer, with Gatsby 27:13 - gatsby-transformer-remark (npm): transform .md files into HTML. 27:42 - gatsby-plugin-catch-links (npm): intercept local links from markdown files and pushes state to them. 28:32 - After installing these plugins, we got to config them in the gatsby-config.js file. 31:29 - Check GraphQL queries on localhost: localhost:PORT/___graphql 35:00 - Query markdown files, to get data on GraphQL. 42:38 - Create a template for individual posts. 49:07 - Create pages programmatically, with the createPages API. www.gatsbyjs.org/docs/node-apis/#createPages) API. Follow this [tutorial](www.gatsbyjs.org/tutorial/part-seven 58:22 - Deploy with Netlify.
At the time of this comment (October 2019) and for the latest versions of Gatsby CLI ( 2.8.3) and Gatsby (2.16.5), at 50:31 using boundActionsCreators will result in an error. The object should be { actions, graphql } in order for createPages to work. Great video Brad!!!! Is the first time I'm using Gatsby and I really enjoyed, thanks!!!
Also, at the time of this comment (February 2020), a few differences with the current gatsby are: Menu should go into Layout, the Layout component should be in every page (contains header and footer), in order to change bottom margin of header look into layout.css, gatsby-config.js is more populated by default, sometimes an error appears after adding plugins (the solution for this issue: github.com/gatsbyjs/gatsby/issues/18048)
Love you brad. You are such a amazing inspirational man . I watch your video in about your struggles . one thing come in my mind at that point you changed your life by your hard work and made it better
Thanks again Brad I have an upcoming talk about web accessibility. I was trying to tie documentation and engineering into my talk. Which reminded me of this crash course. I am using the same layout to help me tie the concepts together but will definitely customize it over time. Thanks for being a great inspiration to so many. Just like yourself I also have two boys who are on the spectrum and they show me daily so much strength, determination, and other great examples that hold me accountable. It is also why I was formally diagnosed with autism and have just kept pushing through to learn more and do more. Saw your post on Twitter and it was great to see your boy doing great things. Finally taking that leap of faith to put myself out there to help other developers and engineers who are also neurodivergent. Cheers and have a happy holiday :-)
Somethings have changed in Gatsby 2.0. So anyone following this and wondering why their header isn't showing up on about, services pages you just need to import Layout from '../components/Layout'; and wrap your page in a tag. Also this will help you out at the end if your Read More isn't linking to the post. www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#rename-boundactioncreators-to-actions basically you just need to change boundActionCreators to actions and it will work. Thank you Brad, this tutorial was awesome!
@@ShelterDogs i think his main point is that it's really lacking in documentation and is still pretty new. the question of if it is going to last or not, I think comes down to if they keep updating it. CodingPhase, obvi. an experienced developer's video seemed mostly about personal preference. I think the main takeaway is that it's silly to go down a rabbit hole and learn whatever new framework suddenly pops up for whatever reason. Gatsby has two advantages: speed and security.
Thanks Brad! Just an FYI that AWS just announced a new service similar to Netlify called Amplify Console aws.amazon.com/amplify/console/. I was reading about it and they mentioned Gatsby. It looked interesting and I wanted to learn more so I searched for it on UA-cam and, no surprise, found your video. Thanks for being one step ahead and for cranking out so much content. Would love to see a follow up where you show how to use WordPress with Gatsby
Didn't watch yet but it's just on time. Unbelievable. I've just played with gatsby and it is awesome. Gatsby Casper starter and personal blog by Greg globinski are my favorites
Awesome video. I was excited throughout the whole thing as I was able to follow this great example! Some syntax is deprecated but it still works like a charm. Brad, you f**king rock man!! Keep up the good work. Def new subscriber🙌
Thanks! you inspired me to start my channel with web development tutorials. I also love Prettier and I use it daily with VIM so I have some videos about it.
Si asi enseñas en videos gratuitos, no me quiero imaginar en cursos de pago! Gracias por todos tus videos, me he vuelto un fanático de tu canal, eternas gracias, de corazón!
Just in case anyone is wondering how does graphql data gets inserted into data variable...The result of the query is automatically inserted into your React component on the data prop when you declare the query variable below the component declaration as he does in the video.
@@otheraw5659 If you remove the `export` from the query, you will notice that the query data is no longer on the data prop. Cool way to check if the query is working for your given page, and check for a potential false positive. Also, gives you a simple way to break it easily to understand the structure a bit.
I think Gatsby has made an upgrade since the tutorial was made. I tried to create a page but the layout didn't apply. Then I read this from the Gatsby docs: "Gatsby does not, by default, automatically apply layouts to pages". So, when you create a page, the layout is not automatically applied to it by default. You have to wrap the entire JSX into a component for the layout to be applied. There are ways to automate it, but it doesn't come out-of-the-box anymore (like it did when Brad coded it).
Thanks for this. This video seems the hardest one I had tried recently for myself ... I think part of reason I didn't learn anything about React framework yet .. and I didn't spend any time to read Gatsby.js myself ... though, I have successfully duplicated the result, I think I need go back to watch it several times to really learn Gatsby.js.
Guys, at 27:51, after I have downloaded the "gatsby-source-filesystem", "gatsby-transformer-remark", "gatsby-plugin-catch-links" plugins, I can't start my gatsby project again. Do you know why? It says the thing below: The above error occurred in the component: in StoreStateProvider in App React will try to recreate this component tree from scratch using the error boundary you provided, App. ERROR Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI. ERROR UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
Excellent. I'm a big fan of SSGs in general and, now, GatsbyJS after having played around with Hugo (great build speed), Jekyll, Hexo and other variants. It would be great to see this series continue. Perhaps a followup on typical use cases for fledgling developers? Maybe along the lines of CMS integration--headless Drupal, Wordpress, etc--for non-technical clients who require traditional editing tools. And Hey! Just noticed we're both in Boston. Go Sox!
You’re indeed a pro! This is just very much resourceful as all of your other tutorials I’ve watched. You’re one of my icons in this field, thanks a lot🙏
After this course, I highly recommend The Great Gatsby Bootcamp from Andrew Mead. It uses more advanced features as well as CMS integration from Contentful for dynamic pages
Thank you, Brad. Awesome! I think an in-depth Gatsby course would be a logical and perfect next step to the MERN one? Would seriously like to see that, and would probably be on the cue to buy it :)
Loved this. Thanks for building it. So many of the errors that happened here would have been solved by using TypeScript. You should consider it. Would make things a lot easier.
Brad, I'm trying to add pictures to each blogpost, I was thinking about using graphql to fetch pictures from each blog post folder the same way as index.md files however I'm utterly confused with using image-sharp (as far as I am concerned markdown isn't really for images). Can't seem to grasp it, maybe you could hint at how to incorporate images.
a couple of videos explanation on how to integrate this simple static "gatsby website with a wordpress backend" would be more help full, as most of them are using wordPress blogs and websites including myself and very less number of beginner-friendly tutorials exist on how to link this static website to a wordPress backend blog website
This is awesome, looking more and more into gatsbyjs and Netlify because of Brad. Hey brad, any more tutorials about gatsby web apps in the pipeline? maybe something on Udemy?
i have a video request if it's possible. if you could do a websocket crash course with php. hope it's not too much to ask. and thank you for all the great i'm a big fan of yours and you are by far my inspiration. so thank you for everything 😄
Two questions: Firstly, why do you not need to query the excerpt (blog text) in the GraphQL query? Does the HTML query pull in the post text? Secondly, if you build a site like this for a client do you need to redeploy the website everytime a blog post is created or will the website automatically update when you push the new blog post to GitHub? Thanks for the great tutorial.
I know it's not a new video, but here are my notes on it:
10:00 - Helmet Plugin in gatsby-config.js for changing the title and metadata, in the .
12:33 - Create new pages simply by generating new files in the \pages folder.
15:03 - Create a new component.
22:59 - VSC extension for seing a preview of any markdown file that is open.
23:80 - Frontmatter
26:13 - gatsby-source-filesystem (npm): File System Plugin, for accessing files in the computer, with Gatsby
27:13 - gatsby-transformer-remark (npm): transform .md files into HTML.
27:42 - gatsby-plugin-catch-links (npm): intercept local links from markdown files and pushes state to them.
28:32 - After installing these plugins, we got to config them in the gatsby-config.js file.
31:29 - Check GraphQL queries on localhost: localhost:PORT/___graphql
35:00 - Query markdown files, to get data on GraphQL.
42:38 - Create a template for individual posts.
49:07 - Create pages programmatically, with the createPages API. www.gatsbyjs.org/docs/node-apis/#createPages) API. Follow this [tutorial](www.gatsbyjs.org/tutorial/part-seven
58:22 - Deploy with Netlify.
I wish I saw your message before the end of the video
23:08 - Frontmatter
32:12 - To return what he has, use absolutePath instead of id
18
@@ryanespin4071 You a life saver!
At the time of this comment (October 2019) and for the latest versions of Gatsby CLI ( 2.8.3) and Gatsby (2.16.5), at 50:31 using boundActionsCreators will result in an error. The object should be { actions, graphql } in order for createPages to work.
Great video Brad!!!! Is the first time I'm using Gatsby and I really enjoyed, thanks!!!
Also, at the time of this comment (February 2020), a few differences with the current gatsby are: Menu should go into Layout, the Layout component should be in every page (contains header and footer), in order to change bottom margin of header look into layout.css, gatsby-config.js is more populated by default, sometimes an error appears after adding plugins (the solution for this issue: github.com/gatsbyjs/gatsby/issues/18048)
Love you brad. You are such a amazing inspirational man . I watch your video in about your struggles . one thing come in my mind at that point you changed your life by your hard work and made it better
Your "crash courses" on here are simply unrivaled .. you're doing amazing!
Thanks again Brad I have an upcoming talk about web accessibility. I was trying to tie documentation and engineering into my talk. Which reminded me of this crash course. I am using the same layout to help me tie the concepts together but will definitely customize it over time. Thanks for being a great inspiration to so many.
Just like yourself I also have two boys who are on the spectrum and they show me daily so much strength, determination, and other great examples that hold me accountable. It is also why I was formally diagnosed with autism and have just kept pushing through to learn more and do more. Saw your post on Twitter and it was great to see your boy doing great things.
Finally taking that leap of faith to put myself out there to help other developers and engineers who are also neurodivergent. Cheers and have a happy holiday :-)
Somethings have changed in Gatsby 2.0. So anyone following this and wondering why their header isn't showing up on about, services pages you just need to
import Layout from '../components/Layout'; and wrap your page in a tag.
Also this will help you out at the end if your Read More isn't linking to the post. www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#rename-boundactioncreators-to-actions basically you just need to change boundActionCreators to actions and it will work.
Thank you Brad, this tutorial was awesome!
thanks very much for posting this!
@@ShelterDogs i think his main point is that it's really lacking in documentation and is still pretty new. the question of if it is going to last or not, I think comes down to if they keep updating it. CodingPhase, obvi. an experienced developer's video seemed mostly about personal preference. I think the main takeaway is that it's silly to go down a rabbit hole and learn whatever new framework suddenly pops up for whatever reason. Gatsby has two advantages: speed and security.
Thank you so much 😎🙌 Can't wait for more React JS based videos. Another great crash course by Brad 🎉🐱👓
This video itself helped me build my blog entirely with gatsby. Brilliant content and explanation Brad! Keep up the good work.
I watched that other guys tutorials (LevelUpTuts) and didn't understand shit.
I watched yours and it's all clear to me. Thanks Brad!
Thanks Brad for keeping us up to date on the latest technologies and trends
2022 and this video still helping peoples. One of the best video to start your gatsby journey.
Awesome course as usual, Thank you Brad Traversy. Always top quality learning with you.
FINALLY!!! I was waiting this course from you from along time!!! YEEEEEEEEEEEEEEEEEEEEY!
Thanks brad... Your channel has become my bible and a learning tool for a career shift. Thank you so much for bringing those awesome contents..
Thanks so much Brad. This video is a very good introduction to Gatsby.js. What an awesome tech to whip up something quickly!
Stayed up late to watch this. Totally worth it!
is this tutorial had any issues with the current gatsby version today? will i be running into issues if i follow it verbatim?
I'm just getting started with Gatsby and this was a very well-done crash course. Thanks!
57:30 "If you haven't used graphql before that probably confused the shit out of you", no better way to say it lmao
yea :D
Thanks Brad! Just an FYI that AWS just announced a new service similar to Netlify called Amplify Console aws.amazon.com/amplify/console/. I was reading about it and they mentioned Gatsby. It looked interesting and I wanted to learn more so I searched for it on UA-cam and, no surprise, found your video. Thanks for being one step ahead and for cranking out so much content. Would love to see a follow up where you show how to use WordPress with Gatsby
This is super handy. Appreciate the quick run through. Thinking about making a site for student projects and then enhancing to allow voting etc.
Didn't watch yet but it's just on time. Unbelievable. I've just played with gatsby and it is awesome. Gatsby Casper starter and personal blog by Greg globinski are my favorites
Awesome video. I was excited throughout the whole thing as I was able to follow this great example! Some syntax is deprecated but it still works like a charm. Brad, you f**king rock man!! Keep up the good work. Def new subscriber🙌
Thanks! you inspired me to start my channel with web development tutorials. I also love Prettier and I use it daily with VIM so I have some videos about it.
great tutorial, I have forked the repository and using it as a boilerplate for my projects
Thank you very much Brad. The amount of work and dedication you put in these videos is incredible.
Welcome back brad , a great piece of content once again , I hope you are done with your shifting and moving up
Si asi enseñas en videos gratuitos, no me quiero imaginar en cursos de pago! Gracias por todos tus videos, me he vuelto un fanático de tu canal, eternas gracias, de corazón!
Just in case anyone is wondering how does graphql data gets inserted into data variable...The result of the query is automatically inserted into your React component on the data prop when you declare the query variable below the component declaration as he does in the video.
Thanks, that's the thing I am wondering while watching the video. Too many magic there
@@otheraw5659 If you remove the `export` from the query, you will notice that the query data is no longer on the data prop. Cool way to check if the query is working for your given page, and check for a potential false positive. Also, gives you a simple way to break it easily to understand the structure a bit.
this happens @ 36:25
also @ 46:37
I think Gatsby has made an upgrade since the tutorial was made. I tried to create a page but the layout didn't apply. Then I read this from the Gatsby docs: "Gatsby does not, by default, automatically apply layouts to pages".
So, when you create a page, the layout is not automatically applied to it by default. You have to wrap the entire JSX into a component for the layout to be applied. There are ways to automate it, but it doesn't come out-of-the-box anymore (like it did when Brad coded it).
thank you!!
Noticed this. Thanks
I was going crazy looking for Layout import but I couldn't see it on the repo. Your comment save me
My King
Thanks for this. This video seems the hardest one I had tried recently for myself ... I think part of reason I didn't learn anything about React framework yet .. and I didn't spend any time to read Gatsby.js myself ... though, I have successfully duplicated the result, I think I need go back to watch it several times to really learn Gatsby.js.
Thanks for the vid Brad! I keep learning react indirectly which is awesome.
Would definitely love a Udemy course on Gatsby!
"rfce" TAB to get a react functional component with const [file name base] = and export default [file name base]
Gatsby really is blowing up, heard it on syntax the other day. I'm guessing your a fan of the podcast too?
`rafc` for react arrow function component snippet
“rafce” adds the export at the end too
Thanks
Guys, at 27:51, after I have downloaded the "gatsby-source-filesystem", "gatsby-transformer-remark", "gatsby-plugin-catch-links" plugins, I can't start my gatsby project again. Do you know why? It says the thing below:
The above error occurred in the component:
in StoreStateProvider
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
ERROR
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
ERROR
UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the
body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See fb.me/react-invalid-hook-call for tips about how to debug and fix
this problem.
You can type rafce and press tab for functional component :)
As usual, very nice course. Thanks, Brad
Love to see a follow up on this project with more features (creating tags page, social media support, dynamic menu etc.)
Thanks for the tutorial! Finally got my blog up and running
This is so something I was waiting for you to do!
Excellent. I'm a big fan of SSGs in general and, now, GatsbyJS after having played around with Hugo (great build speed), Jekyll, Hexo and other variants.
It would be great to see this series continue. Perhaps a followup on typical use cases for fledgling developers? Maybe along the lines of CMS integration--headless Drupal, Wordpress, etc--for non-technical clients who require traditional editing tools.
And Hey! Just noticed we're both in Boston. Go Sox!
Brad thanks one of the better videos !
I don't know what to do man, i think i'm in love with you, and i'm totally straight. Thanks you for all the things u post.
Great video per usual. Thanks so much for making these amazing tutorials!
Watching this in 2020, and it is still relevant :)
Awesome Brad. This is exactly the video I needed. Thanks man!
Gatsby is a little different on Windows but I'm sure I'll figure it out.
Been working hard and getting good :)
Thanks for everything brad :)
You’re indeed a pro! This is just very much resourceful as all of your other tutorials I’ve watched. You’re one of my icons in this field, thanks a lot🙏
Perfect timing
Great video as always Brad.
me: Does entire official Gatsby walkthrough
me: Understands jack shit
me: Watches Brad's Gatsby crash course
me: "Well it's all clear now"
Thank you Brad, this is a good intro to Gatsby!
After this course, I highly recommend The Great Gatsby Bootcamp from Andrew Mead. It uses more advanced features as well as CMS integration from Contentful for dynamic pages
Thank you, Brad. Awesome! I think an in-depth Gatsby course would be a logical and perfect next step to the MERN one? Would seriously like to see that, and would probably be on the cue to buy it :)
Amazing , as always!! :)
Thanks :)
I don't understand the 53:17 part: why check if there are errors? The promise will go to the .catch() if there are any. Right?
Yessssss this is awesome you are always on the new tech
Nice tutorial! I just used Gatsby to make my portfolio.
Beauty/10 Keep up the good work, driving mad value into the world.
I love your channel dude!
Thank you for this amazing tutorial, keep up the good work, mate.
Loved this. Thanks for building it.
So many of the errors that happened here would have been solved by using TypeScript. You should consider it. Would make things a lot easier.
Awesome course. Thanks brad
Thank you Brad! I'm learning a lot from you
Great course!!!... and very well explained
what a cool frameworks, thanks man
This is f* amazing ! THANKS MY LORD !
Thanks for the tutorial. Keep up the good work.Waiting for your next udemy course. Also would like to see a tutorial on authentication with sailsjs
I wish I could give this ten stars!
Great tutorial. Luv anything with React
can you do a small video comparing next.js and Gatsby js ?
wait ended... thank you !
1:00:14 What happened was you need to add the remote as an SSH url instead of HTTPS url for ssh keys to be used.
Thank you again for this great tutorial
No, if you change anything in the config file you don't have restart the react server. Thanks for the crash course
This is so helpful. Thank you!
Brad, I'm trying to add pictures to each blogpost, I was thinking about using graphql to fetch pictures from each blog post folder the same way as index.md files however I'm utterly confused with using image-sharp (as far as I am concerned markdown isn't really for images). Can't seem to grasp it, maybe you could hint at how to incorporate images.
Did you ever figure out this issue with images?
Thanks Brad!
really great tutorial! Thank you!
Excellent!
Good job man, thanks a lot
Thank you, this is much appreciated!
a couple of videos explanation on how to integrate this simple static "gatsby website with a wordpress backend" would be more help full, as most of them are using wordPress blogs and websites including myself and very less number of beginner-friendly tutorials exist on how to link this static website to a wordPress backend blog website
Finally! Thank you :)
Thank you so much Brad
Interesting brad ...keep it up
Very useful. Thank you :)
Thanks a lot! awesome as usual! Just one thing: where can I get the list of the colors with weird names "coral, tomato etc." used to style?
This is awesome, looking more and more into gatsbyjs and Netlify because of Brad.
Hey brad, any more tutorials about gatsby web apps in the pipeline? maybe something on Udemy?
Are you making a full react + redux + backend course on udemy?
He just released a MERN stack course on udemy...
If I want to access read more option with title then how can i do this..? where should I have to make chnages?
This was very helpful thank you!
Thank you for this video. Really appreciate it. :)
Great video
nice video man keep up the good work
Thank you :)
i have a video request if it's possible. if you could do a websocket crash course with php. hope it's not too much to ask. and thank you for all the great i'm a big fan of yours and you are by far my inspiration. so thank you for everything 😄
Thank you for this video!!
Does each blog post need to be in a separate folder or can I place all posts in a single folder?
at 46:01, would this work??
const post = data.markdownRemark.frontmatter
then later
{post.title}
Thanks for your course
Two questions:
Firstly, why do you not need to query the excerpt (blog text) in the GraphQL query? Does the HTML query pull in the post text?
Secondly, if you build a site like this for a client do you need to redeploy the website everytime a blog post is created or will the website automatically update when you push the new blog post to GitHub?
Thanks for the great tutorial.