Gatsby JS Crash Course

This is a 1 hour crash course on Gatsby JS which is a static site generator that runs on React and GraphQL. We will be creating a static site along with a Markdown based blog using a few plugins. We will also deploy our Gatsby site to Netlify
Sponsor: Anthrodesk
anthrodesk.com/
Code: Github Repo:
github.com/bradtraversy/gatsb...
Deployed Site:
sharp-williams-dedbed.netlify...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@7XStriderX7]

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.

[@lamaruga4577]

I wish I saw your message before the end of the video

[@ryanespin4071]

23:08 - Frontmatter 32:12 - To return what he has, use absolutePath instead of id

[@ronishgaming8015]

18

[@jaayaustin336]

@@ryanespin4071 You a life saver!

[@gauravnagar3712]

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

[@petecapecod]

Thank you so much 😎🙌 Can't wait for more React JS based videos. Another great crash course by Brad 🎉🐱‍👓

[@andreivandrummer]

FINALLY!!! I was waiting this course from you from along time!!! YEEEEEEEEEEEEEEEEEEEEY!

[@naveencooray2733]

This video itself helped me build my blog entirely with gatsby. Brilliant content and explanation Brad! Keep up the good work.

[@heycezer]

Your "crash courses" on here are simply unrivaled .. you're doing amazing!

[@guillermovillalta6322]

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🙌

[@Envek1]

Thanks for the vid Brad! I keep learning react indirectly which is awesome.

[@rodrigohernando2210]

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!!!

[@armandobrito3934]

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)

[@Coachhere]

Thank you very much Brad. The amount of work and dedication you put in these videos is incredible.

[@GilAguilar]

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 :-)

[@pepeback]

Thanks Brad for keeping us up to date on the latest technologies and trends

[@__greg__]

I'm just getting started with Gatsby and this was a very well-done crash course. Thanks!

[@johngrattan2179]

Thanks for the tutorial! Finally got my blog up and running

[@AJonesB83]

Awesome course as usual, Thank you Brad Traversy. Always top quality learning with you.

[@robotglock6909]

"rfce" TAB to get a react functional component with const [file name base] = and export default [file name base]

[@Chempo]

Perfect timing

[@cadetspiff]

Awesome Brad. This is exactly the video I needed. Thanks man!

[@Samuelisme]

Love to see a follow up on this project with more features (creating tags page, social media support, dynamic menu etc.)

[@KrzysiekKaminskis]

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

[@Protoscribe]

This is so something I was waiting for you to do!

[@tom_sd3466]

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!

[@Artem-kv4er]

thanks very much for posting this!

[@Artem-kv4er]

@@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.

[@andriypolukhin]

Thank you Brad, this is a good intro to Gatsby!

[@amirnoorani5017]

Thank you Brad! I'm learning a lot from you

[@paullefebvre6667]

This is f* amazing ! THANKS MY LORD !

[@MrJ-and-friends]

This is super handy. Appreciate the quick run through. Thinking about making a site for student projects and then enhancing to allow voting etc.

[@gerryedroso1414]

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..

[@ChessFlix]

Great video per usual. Thanks so much for making these amazing tutorials!

[@CarlosMafla]

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.

[@kevinzhang8974]

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.

[@TutorialsHub3]

2022 and this video still helping peoples. One of the best video to start your gatsby journey.

[@alwayssomewhere716]

great tutorial, I have forked the repository and using it as a boilerplate for my projects

[@marktwain3083]

I watched that other guys tutorials (LevelUpTuts) and didn't understand shit. I watched yours and it's all clear to me. Thanks Brad!

[@ryanharris5968]

Thanks so much Brad. This video is a very good introduction to Gatsby.js. What an awesome tech to whip up something quickly!

[@adamgm84]

Beauty/10 Keep up the good work, driving mad value into the world.

[@osmeig6025]

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!

[@skverskk]

Great tutorial. Luv anything with React

[@ashutoshnayak609]

Welcome back brad , a great piece of content once again , I hope you are done with your shifting and moving up

[@foupax]

As usual, very nice course. Thanks, Brad

[@alok2573407]

wait ended... thank you !

[@kevinduck3714]

Yessssss this is awesome you are always on the new tech

[@javadoctor101]

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]

Thanks, that's the thing I am wondering while watching the video. Too many magic there

[@svenskdod]

@@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.

[@liamdavis492]

this happens @ 36:25

[@liamdavis492]

also @ 46:37

[@yamogebrewold8620]

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).

[@carolineold5386]

thank you!!

[@Jason-bg7jc]

Noticed this. Thanks

[@btandayamo]

I was going crazy looking for Layout import but I couldn't see it on the repo. Your comment save me

[@exz1199]

My King

[@chrisr2442]

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!

[@phemartin]

Awesome course. Thanks brad

[@SoyaleFM]

This was very helpful thank you!

[@coreygriffin]

Nice tutorial! I just used Gatsby to make my portfolio.

[@joeyabanks]

This is so helpful. Thank you!

[@tarihart8385]

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

[@mattgilstrap7295]

Great video as always Brad.

[@ClariRomero]

Thank you very much for this tutorial!!

[@akhwan5297]

what a cool frameworks, thanks man

[@flo_dev]

Thank you again for this great tutorial

[@user-kg8ef9nq9b]

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.

[@golakjena]

You can type rafce and press tab for functional component :)

[@boscocorrea1895]

Thank you so much Brad

[@TheAmazingMarvinJan]

Thanks, Brad! Another great video! I got a question though: would you consider making something about the web design as for graphical design per se, meaning a video without coding at all but solely focused on the pre-coding image of the site. Because i, as a developer, am having a huge problems trying to come up with something decently looking and modern/ui-wise well designed myself. But you seem to do that just fine. If you don't have the time, maybe atleast a video with a few references on where we can learn that stuff? Courses, other KZbinrs you watched maybe?

[@ProgramWithErik]

Gatsby really is blowing up, heard it on syntax the other day. I'm guessing your a fan of the podcast too?

[@voquygiang6094]

Thanks for your course

[@thefantasynuttwork]

Would definitely love a Udemy course on Gatsby!

[@catalinim4227]

Thank you, this is much appreciated!

[@vicalbincooper]

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 KZbin 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

[@LynxBaretta]

Great course!!!... and very well explained

[@NGNails]

thank u very much for the tutorial! 😊

[@stavvers]

really great tutorial! Thank you!

[@viktordemydov1886]

Thanks Brad!

[@jaykef]

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🙏

[@khaledmohamed4639]

Thanks for the great video! I'd like to know if it's possible to have an admin panel to add blog posts instead of writing it directly to the code and redeploying.

[@luisbento9918]

Before my questions, I admire a lot your work. Keep it up! Could you teach us as well how to set up our pc as a server? Which server is better? Wamp or Xampp?

[@jaychang5631]

`rafc` for react arrow function component snippet

[@TheOlivarria]

“rafce” adds the export at the end too

[@tommyshaw2420]

Thanks

[@narcos1024]

Thank you for this video. Really appreciate it. :)

[@onecarwood]

I wish I could give this ten stars!

[@utube3805]

Brad thanks one of the better videos !

[@shemeermali1]

Very useful. Thank you :)

[@MrMiguelapb35]

Good job man, thanks a lot

[@miguelalvarez4591]

Thank you for this video!!

[@FordExplorer-rm6ew]

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 :)

[@rubenverster250]

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

[@nicot2895]

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 :)

[@divyumbhumra9750]

Watching this in 2020, and it is still relevant :)

[@Alessandro-nq3tm]

Amazing , as always!! :)

[@TraversyMedia]

Thanks :)

[@Alessandro-nq3tm]

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?

[@misterjaypeasmith]

Stayed up late to watch this. Totally worth it!

[@naynyamish270]

is this tutorial had any issues with the current gatsby version today? will i be running into issues if i follow it verbatim?

[@IyanSR]

hey brad, thanks for the tutorial, i have a question, how to short post for example by the date?

[@berlandagabriel]

Thanks brother =), nice tutorial

[@davidofug]

Even where internet is hard to afford, you me all reasons to pursue my career. Quick question, which microphone do you recommend to use if don't want to edit audio after recording a video and it works with Ubuntu out of box? Thank you

[@Prince_of_all_Saiyans]

can you do a small video comparing next.js and Gatsby js ?

[@masroorali9307]

Interesting brad ...keep it up

[@ThePaternostertje]

57:30 "If you haven't used graphql before that probably confused the shit out of you", no better way to say it lmao

[@ridl27]

yea :D

[@randith87]

I love your channel dude!

[@dainsleif3122]

Hi Travis. Realy love your videos. I have been trying to learn myself coding for a while now and got a good understanding with Javascript. I moved to React, and now that I understand more. I am getting really confused as there is just more and more and more stuff to learn. I started with regular react app, then i discovered next.js , and now i discovered Gatsby. I am getting really frustrated and demotivated. As I just now feel totaly overwhelmed. I feel its just too much different stuff to get my head around. I was wondering, and I hope you have time to answer. When should one use Next.js and when should one use Gatsby? Should we just forget about building with "regular" Create React App now? And also, wth is Headless CMS?

[@mikhailbaev2707]

Finally! Thank you :)

[@AlanSmithofficial]

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.

[@TheStarKiller220]

Thanks for tutorial

[@enricoalbertocerri8093]

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?

[@zulhilmizainudin]

Thank you for this crash course. How about pagination for the blog index?

[@jasondark3758]

Thanks for the video Brad! I have one question. I’m new to markdown. I was wondering about using file system for storing blog posts vs something like contentful. How many posts and images can you realistically do with file system? If that number is a lot why would anyone use contentful for a blog? Sorry if this is a dumb question ☺️

[@petrcichra7242]

Nice, thank you 😃

[@Ostap_H]

yeap! amazing tutorial like to learning web with your videos)

[@CarloL525]

Excellent!

[@matteobarbieri2989]

maybe it's only my feeling but it's seems that, comparing to a couple of years ago, you now prefer React instead of Angular. Is it true? Generally speaking, do you think React is more used than Angular? Thanks