Gatsby Tutorial #1 - What is a Static Site Generator?

[@gradientO]

Shaun is on a mission to educate the world

[@martapfahl940]

I think you live VW

[@risinggfx9236]

@@martapfahl940 yeah

[@Doomslayer420]

Can't believe this high-quality content is provided for free. Thank you so much @TheNetNinja!

[@pasizdobrekuce]

Not Really a fan of Gatsby personally, but to you Shawn, I say Bravo! This is the right tutorial series at the right time, coming from the right person. Thank you.

[@rene.rodriguez]

Excellent video, mate. I'm over 50 and learning the basics of code and web dev to work on my own proof of concept ideas. This was helpful.

[@BURBXN]

I love Gatsby so much. Thanks for creating a series on it; much-needed refresher!

[@mioszp3378]

Yesterday i was looking for gatsby tutorial. Man, you are life-saving

[@1000daystech]

I saw a comment under your recent Full React Tutorial, where a guy said something about the right moment of releasing your tutorials and that you're a real ninja. I can confirm that too! I need a new website for a client and I was looking for Gatsby. 2 days ago! P.S. The Net Ninja sounds better than The Web Warrior. :)

[@MaxProgramming]

You are a GENIUS! Thanks a lottt

[@barbararaitz]

This is a stunning video tutorial series -- really well done!

[@paakofibamfoquaicoe4193]

Seriously, I will be glad to meet you in person to show how great your works are... I have been thinking, how do you do it. Because you said in one of your videos that you work at NYT. Thanks.....................

[@RameenFallschirmjager]

This amount of energy and craftsmanship is unheard of. I bet he put one drop of liquid plutonium in his tea!

[@whereislolly]

Literally binge watching/coding your courses. Netflix who?

[@MovementJournal]

I was planning to search up either a Hugo or Gatsby tutorial today and here one is in my subscriptions - legend thank u!

[@theodorabi-mansour1750]

amazing, this video alone introduced me to Gatsby and now i'm much more interested in checking it by the rest of your videos. Thank you and keep up the amazing videos you make

[@moaazbhnas886]

Best video on the diff between ssr, csr, and scg

[@abdullahmoiz8151]

Looking forward to this, Thanks a lot Sean for your constant effort

[@jovan4614]

Dude, finally someone who can explain Why! Thanks a lot!

[@maxmaksum4673]

Shaun is the best teacher

[@Nasir_Haidari]

Thank you for all the great courses you create!!!

[@ridl27]

Shaun, so now you force me to learn Gatsby you know right :D ty.

[@NetNinja]

Haha, you’re welcome 😉

[@diederikslob]

I worship the ground that you walk on, NetNinja!

[@roysheppard-dev]

Just thinking I want to learn Gatsby and my favourite teacher drops this!

[@ryanriaz1163]

I Love this Man! Your contribution is endless, dear! Really I love you...🧡💛💚

[@sergiocano9658]

I really love your courses. Thank you so much!

[@NetNinja]

You're very welcome Sergio!

[@michaelantoni8323]

Wow nice upload...hope you can make a Nestjs (progressive nodejs framework) tutorial series as well

[@maskman4821]

that would be awesome !!!

[@carlosjosejimenezbermudez9255]

Never did I click something faster than I clicked this video. I want to migrate my blog to Gatsby.

[@WeeLiem]

Amazing and helpful videos created from you bro, worth the effort!

[@javirbls8492]

because of tutorials like this I love learning web dev stuff

[@danny_kinz]

Great job ninja, waiting for Nuxt JS for Vue JS

[@isidorenwaiwu2793]

Same here. I really want to learn from Shawn. The nuxt.js videos I have found are quite subpar compare to shawn's. I was to be a nuxt.js ninja !!! That brings me to a query about SSG's. What is the difference between this ssg and using something like a prerender plugin. I ask because I have implemented the prerender-spa-plugin for a vue 3 project and it did something similar to what ssg is supposed to do. Is there a difference or is there something I am missing. Which is better or recommended?

[@kikiseo]

Me, thinking about starting my first Gatsby project: "Hmm, I wonder if there's a Net Ninja tutorial for that..." *finds this video* "Uploaded 8 hours ago" Dude, I love you.

[@nicolaslupo5021]

Hi Ninja! Thanks a lot for this magnific work! You're great dude, wishing all the best for you!

[@ΚλαϊντιΑ]

Awesome video Shaun

[@narasimhareddygolla2454]

Best content ever :). Please create a website with Gatsby and Shopify.

[@SaikiaCodes]

I really needed this one video to kickstart myself

[@NetNinja]

Awesome :) glad it helped, you got this Saikia!

[@SaikiaCodes]

@@NetNinja It did help, yes. But I did face some issues as this course has been outdated and some changes have been made by the gatsby so far. Could you possibly be thinking on making a new video or updating this one

[@SamLuvsPizza]

Anything Net Ninja teaches, I'm learning. Guess I'm learning Gatsby now right after learning Next 😂

[@chamseddineberkane1223]

Gatspy Vs next js ???

[@seanastro5549]

Great stuff... very well explained. Exactly what I was looking for, and so is Gatsby it seems.

[@royangagas2519]

In this tutorial, are we will learn two subject little bit graphql and gatsby?

[@NetNinja]

Correct :).

[@maskman4821]

I think the only difference between Gatsby and Next/Nuxt is GraphQL, or they all do the same thing, generate static html page and get data from numerous sources at build time, however Gatsby is limited in SSG, Next and Nuxt works on both SSG and SSR, anyhow, it is always exciting to learn new technology !!!

[@snsa_kscc]

You can use graphql with next/nuxt by using apollo. Imo nowdays the need for Gatsby is slowly diminishing cause it brings nothing new to the table. Next/nuxt can replicate everything and even more like ISR in next's case. That of course doesn't mean Gatsby is a bad or obsolete product in any shape or form. After all, it has tone of backend plugins and starters and you can spin up a frontend in a matter of minutes.

[@maskman4821]

@@snsa_kscc yeah, can't agreen more !!!

[@AmoghSrivastava]

Was going to learn about gatsby today and thought you had a video already. I search for gatsby netninja and found your upload 6 days ago! Force of attraction?

[@Wael100]

I can see the 1M subs right around the corner :)

[@greyu93]

Best channel ever! So basically - use Gatsby or Next.js - but if you need mixed website with some dynamics into it, is it better to use Next? Gatsby is great because of plugins. However, Next offers what Gatsby does and some extra functionalities - does it mean that Next is better?

[@maskman4821]

Nextjs beats Gatsby 100% !!!

[@felicianolimiener5977]

Loving Gatsby!

[@wlu236]

Thanks so much for all the great tutorials!!!

[@ITentrepreneur]

Shaun, how did you know that I need Gatsby tutorials?

[@akibahood7403]

Хуй знает брат

[@kaserali2110]

i dont what is this and i wont learn it but you deserve the comment and like NINJAAAA

[@NetNinja]

Thank you :)

[@sohaibarbii]

best teacher EVER

[@Traintec]

Thank you Shaun

[@Waethos]

Thanks for the information. I appreciate the effort you put into your videos

[@rl_y]

Thank you so much Shaun! Great content as always : )

[@joeya2330]

I love your accent so much, Gatspahhhh 😂

[@vaasudhand3200]

This is all I wanted. Thanks❤️

[@darthvadeth6290]

Can someone help me understand something about Gatsby? So if I have a large site, with, say, thousands of blog posts. Then does that mean when a user first visits the website, Gatsby will load ALL the contents of ALL those blogs at the same time? Because it doesn't fetch data from the CDN after the initial load, because all the data from the entire blog website are all compiled together during build time, correct? So the larger content of the website gets, the worse Gatsby will perform on initial visit, since the more data it will need to load, right?

[@ryanmckenna2047]

Very well explained!

[@chrishuhn5065]

Not convinced to use Gatsby yet. I think I'll keep using Pug (Jade). Haven't found anything that let's me build (static) websites faster, because pug is so much less to write compared to other systems/languages.

[@daidandy]

next course=nuxt js ,awesome

[@potantirittisak8494]

Thank you! So helpful

[@NetNinja]

Great to hear :) thanks for watching!

[@_kkaai]

great tutorial

[@tomascarignano5002]

Great video! Thanks a lot!

[@RoyerAdames]

You make great content

[@jefdevelops.385]

This speed is great my tutor.

[@hitarthagogoi2829]

Man, What's better Gatsby or Next.js

[@Venom-ne4ox]

Both are really good and have their use cases.

[@mehmetbartu7795]

it is so amazing i get it everything thanks

[@BrazilianDev]

Amazing content!

[@PlayWithAyaan]

Bro can u make mern stack website tut with auth please. I know mongodb react express seperatly but I don't know to put them together

[@knivesoutbitch]

use mongoose to connect express to mongo. use axios to connect your react app to your express app. use passport for auth.

[@PlayWithAyaan]

@@knivesoutbitch I've made blog website. I wanna add functionality of displaying name of writer on their blogs after writers have logged in have logged in.

[@knivesoutbitch]

@@PlayWithAyaan you can do all of that with what i mentioned above. mongoose and passport are middlewares for express. passport can be used to handle authentication / authorization; mongoose connects to your mongodb store. the react library is decoupled from a backend, so you need to use a request library like axios and create services so your front end can talk to your express back end. when you have this set up, you can manage users and display data with service requests.

[@NaqqashLatif]

Damn Shaun, really happy to see this on the channel. Any plans for a Udemy course of the same?

[@chawker67]

Yeeees! I'm so glad you did it

[@quiz36O]

Just to clarify, Is Gatsby better than Next? can you please make a video on when to choose what (Vue vs React, Gatsby vs Next ...) ?

[@kloudytics]

Great job!

[@ShashotoANur]

The Great Ninja has summoned us...

[@favenegas6396]

why you are so cool!!... ??? i need to be more fast to learn like you :) thank you

[@fo6456]

with gatsby the browser request for each page or does it get all pages at once like SPA? you said first that "the browser maybe request one of these pages from the browser" but then later stated that "no additional request for other pages are made to the server".

[@ZynthProductions]

hope you do one with nuxt

[@NGAJINGODING]

good explain, but I think this is like vue cli when run commands npm run build? Isn't it?

[@fortunatmutunda4194]

Finally 🙌🏽

[@kimokimo-se3ur]

What the hell shaun !!! Take a break, i am still in your react series , wait for me

[@iqbal5942]

Next js is both static site generation as well as server site generation so why not next js?

[@_guru]

You are a GOD!!

[@flamingodnews5073]

is it difficult to make a dynamic app with Gatsby? like social media apps?

[@LinuxForLife]

Nice, but what the differences with Hugo? Gatsby is better?

[@marwinfb]

Nice one!

[@IAmSamuelCharpentier]

So Sapper for react?

[@Filipp1139]

Love you. Perfect time

[@roopaish]

I am kinda lost. I want to develop a blogging website using react which will have a simple comment section. Which one should I choose gatsby , nextjs or other?? I am a beginner in reactjs.

[@ronaldxaiborweb5374]

hello friend thanks for your work, could you make an example of how to install and use gatsby-source-tmdb I am trying to get tmdb data from nextjs through graphql

[@learnsimple4592]

Nice 👍

[@RandomVideosEveryDay]

How to put meta tags for each page??????

[@unchart_d]

What it takes to be like Shaun?

[@srinathsathyanath7435]

Is it possible to convert angular websites with Gatsby?

[@Fitnesshints]

3:41 misspelled application.

[@mohdalghoul8673]

Finally 😎

[@abdulbari2569]

Please make latest tutorials on Graphql

[@TheDEMMX]

I don't understand why does the first request get a blank HTML page initially in React case? Can somebody please explainj that

[@isidorenwaiwu2793]

It's probably because react is used to create SPA'S (single page applications). When you build a webapp using stuff like react or vue, all of your content is control by javascript on a single html page. So, in a normal static site, you build different html pages for different content (homepage html, about html, contact html etc), however in spa there is only one html file which is empty and javascript then insert stuff into it for certain content, say home. Then the same javascript will remove that content and populate it with content for another "page"...

[@alisaberi4689]

Is there gatesby with Vue js???

[@omermessing9730]

In the first slide you say Static Websites has a speed disadvantage (with no server side rendering), and in the Gatsby slide you say Gatsby has a speed advantage even though it is the same exact process and speed as a static website. So how come one is disadvantaged and the other one isn't? Maybe you're not comparing them directly?

[@GamingZone-ni6rs]

you are awesome

[@TroyBrisbin67]

Web Warrior / Net Ninja ... Yes, cheese is a good thing!

[@the_code_whisperer]

similar to isomorphic react architecture

[@optix212]

Took a look at it. Not entirely sure, but I think there's a solution called nx-console that essentially does this. With the benefit of mono-repo, etc. Still weighing my options. Edit: nvm. They actually work together. If you're working at an enterprise level, I'd recommend a combination

[@jy1772]

Is it based on v4?

[@asmeregryamdai1930]

you are god