Gatsby JS Crash Course
ฝัง
- เผยแพร่เมื่อ 4 มิ.ย. 2024
- 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 - วิทยาศาสตร์และเทคโนโลยี
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!
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
Thank you so much 😎🙌 Can't wait for more React JS based videos. Another great crash course by Brad 🎉🐱👓
FINALLY!!! I was waiting this course from you from along time!!! YEEEEEEEEEEEEEEEEEEEEY!
This video itself helped me build my blog entirely with gatsby. Brilliant content and explanation Brad! Keep up the good work.
Your "crash courses" on here are simply unrivaled .. you're doing amazing!
Thank you very much Brad. The amount of work and dedication you put in these videos is incredible.
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)
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 for the vid Brad! I keep learning react indirectly which is awesome.
Awesome course as usual, Thank you Brad Traversy. Always top quality learning with you.
I'm just getting started with Gatsby and this was a very well-done crash course. Thanks!
Thanks Brad for keeping us up to date on the latest technologies and trends
Love to see a follow up on this project with more features (creating tags page, social media support, dynamic menu etc.)
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 :-)
This is so something I was waiting for you to do!
Thanks for the tutorial! Finally got my blog up and running
"rfce" TAB to get a react functional component with const [file name base] = and export default [file name base]
Awesome Brad. This is exactly the video I needed. Thanks man!
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! 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.
This is super handy. Appreciate the quick run through. Thinking about making a site for student projects and then enhancing to allow voting etc.
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 Brad! I'm learning a lot from you
Great video per usual. Thanks so much for making these amazing tutorials!
Thanks so much Brad. This video is a very good introduction to Gatsby.js. What an awesome tech to whip up something quickly!
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
Thank you Brad, this is a good intro to Gatsby!
great tutorial, I have forked the repository and using it as a boilerplate for my projects
As usual, very nice course. Thanks, Brad
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!
Perfect timing
Beauty/10 Keep up the good work, driving mad value into the world.
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🙏
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 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.
2022 and this video still helping peoples. One of the best video to start your gatsby journey.
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
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
Great video as always Brad.
Great tutorial. Luv anything with React
This is f* amazing ! THANKS MY LORD !
Awesome course. Thanks brad
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.
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
wait ended... thank you !
Nice tutorial! I just used Gatsby to make my portfolio.
Would definitely love a Udemy course on Gatsby!
Yessssss this is awesome you are always on the new tech
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?
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?
Thank you very much for this tutorial!!
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 :)
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?
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.
This is so helpful. Thank you!
This was very helpful thank you!
Great course!!!... and very well explained
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!
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 TH-camrs you watched maybe?
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 TH-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
Thank you, this is much appreciated!
You can type rafce and press tab for functional component :)
what a cool frameworks, thanks man
Thank you again for this great tutorial
Thank you so much Brad
hey brad, thanks for the tutorial, i have a question, how to short post for example by the date?
Thanks Brad!
I wish I could give this ten stars!
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 ☺️
thank u very much for the tutorial! 😊
Very useful. Thank you :)
Thanks for your course
Thank you for this video. Really appreciate it. :)
`rafc` for react arrow function component snippet
“rafce” adds the export at the end too
Thanks
really great tutorial! Thank you!
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
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
Brad thanks one of the better videos !
can you do a small video comparing next.js and Gatsby js ?
Thank you for this crash course. How about pagination for the blog index?
Watching this in 2020, and it is still relevant :)
Gatsby really is blowing up, heard it on syntax the other day. I'm guessing your a fan of the podcast too?
Thank you for this video!!
I love your channel dude!
Finally! Thank you :)
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 :)
Interesting brad ...keep it up
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?
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?
Thanks brother =), nice tutorial
Nice, thank you 😃
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.
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
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, you're awesome
Hey! Awesome content again! Can you tell me the desktop wallpaper that you are using it? It looks great!
Thanks!
Awesome awesome video thanks!