Це відео не доступне.
Перепрошуємо.
Gatsby JS Crash Course
Вставка
- Опубліковано 14 сер 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/bra...
Deployed Site:
sharp-williams...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
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!
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
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
Your "crash courses" on here are simply unrivaled .. you're doing amazing!
Thank you so much 😎🙌 Can't wait for more React JS based videos. Another great crash course by Brad 🎉🐱👓
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.
`rafc` for react arrow function component snippet
“rafce” adds the export at the end too
Thanks
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 :-)
2022 and this video still helping peoples. One of the best video to start your gatsby journey.
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
"rfce" TAB to get a react functional component with const [file name base] = and export default [file name base]
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!
FINALLY!!! I was waiting this course from you from along time!!! YEEEEEEEEEEEEEEEEEEEEY!
Awesome course as usual, Thank you Brad Traversy. Always top quality learning with you.
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
I'm just getting started with Gatsby and this was a very well-done crash course. Thanks!
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🙌
This is super handy. Appreciate the quick run through. Thinking about making a site for student projects and then enhancing to allow voting etc.
Thanks Brad for keeping us up to date on the latest technologies and trends
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!
You can type rafce and press tab for functional component :)
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.
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
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!
Thank you very much Brad. The amount of work and dedication you put in these videos is incredible.
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!
can you do a small video comparing next.js and Gatsby js ?
great tutorial, I have forked the repository and using it as a boilerplate for my projects
Would definitely love a Udemy course on Gatsby!
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?
Gatsby really is blowing up, heard it on syntax the other day. I'm guessing your a fan of the podcast too?
Thanks for the vid Brad! I keep learning react indirectly which is awesome.
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.
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.
Welcome back brad , a great piece of content once again , I hope you are done with your shifting and moving up
Love to see a follow up on this project with more features (creating tags page, social media support, dynamic menu etc.)
As usual, very nice course. Thanks, Brad
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
Thanks for the tutorial! Finally got my blog up and running
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 :)
Watching this in 2020, and it is still relevant :)
This is so something I was waiting for you to do!
Great video per usual. Thanks so much for making these amazing tutorials!
me: Does entire official Gatsby walkthrough
me: Understands jack shit
me: Watches Brad's Gatsby crash course
me: "Well it's all clear now"
Brad thanks one of the better videos !
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 :)
Awesome Brad. This is exactly the video I needed. Thanks man!
Nice tutorial! I just used Gatsby to make my portfolio.
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.
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?
Please make an updated video of gatsby
Thank you Brad, this is a good intro to Gatsby!
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
Great video as always Brad.
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?
Perfect timing
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.
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
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🙏
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?
Just in case somebody is wondering everything here is relevant and the only big difference is the file structure.
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.
Are you making a full react + redux + backend course on udemy?
He just released a MERN stack course on udemy...
Great tutorial. Luv anything with React
Beauty/10 Keep up the good work, driving mad value into the world.
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 UA-camrs you watched maybe?
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.
Great course!!!... and very well explained
Awesome course. Thanks brad
Thank you Brad! I'm learning a lot from you
There are things which got deprecated here like using 'graphql'. 'boundActionCreators'. Developers please make sure to correct it.
Prob too late but React Functional Component with Export => rfce (shortcut) gives this: 13:35
I wish I could give this ten stars!
Yessssss this is awesome you are always on the new tech
The reason it didn't use your SSH key (1:00:10) is that you set the origin to "github.com/{...}" instead of "git@github.com:{...}".
No, if you change anything in the config file you don't have restart the react server. Thanks for the crash course
Can we get an updated Gatsby video with Firebase + Redux? Have been grappling with using these three technologies in the same project... no good videos or posts on using the 3 together. Would be much appreciated!
This is f* amazing ! THANKS MY LORD !
getting error "Building static HTML failed for path "/post-one"" while building gatsby build, anyone can help me in it?
what a cool frameworks, thanks man
If I want to access read more option with title then how can i do this..? where should I have to make chnages?
I'm getting an error "Git is not recognized as an internal or external batch command spawn error ENOENT" right after typing the gatsby new gatsby-site command. What could be the problem. I've already installed git but still this error is showing.
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 ☺️
Hi, just wondering if anyone has gotten this error after putting in the plugin for gatsby-source-filesystem? thanks
Error: Names must match /^[_a-zA-Z][_a-zA-Z0-9]*$/ but "0" does not
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?
How can i put this blogpage component inside a tab view and render it on click of the tab? This process is giving me a data undefined whenever i put this inside a tab. But with a Link it can redirect with data
I am having trouble. I don't have Helmet and also gatsby-link. In my layout is a little different. In the terminal i write gatsby develop but it showed error. Why is this happening??
at 46:01, would this work??
const post = data.markdownRemark.frontmatter
then later
{post.title}
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
it is very good, but can you make a video , data fetch from api (axios) ,show post and pages are make in our site and link to single page , i am look forward from you , thanks
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
Very useful. Thank you :)
Anyone know how to make module.exports render on visual studio code. It’s not recognizing this along with sitemetadata. This happens in my gatsby-config.js
wait ended... thank you !
Is anybody else receiving Gatsby: command not found after installing? So frustrating. I can't find a fix to the problem!
use npm install -g gatsby-cli
-g is for glabal install so npm will link gatsby command to /usr/local/bin or something
you can also check `npm link` docs if you still can't just run the `gatsby` command directly
Hey! Awesome content again! Can you tell me the desktop wallpaper that you are using it? It looks great!