In this course, I'm gonna teach you everything that you need to know to get started using Gatsby Js Gatsby Js is a relatively new static side generator that's built on top of know Js.

And it uses react in order to help you build an awesome, fast and scalable static Web site.

One of the things I love about Gatsby is that you build your static sites using react.

And so you have all the power, modularity and scalability of react while still being able to generate static Web pages which could be served extremely fast on your Web server.

Do you write all of your pages and react?

You can access data and you can make your pages interactive and do all sorts of cool things.

And then you just generate a bunch of static pages and served them up on your Web server.

In this course, we're gonna talk about the basics.

So we're gonna get into installing Gatsby, building your first Gatsby site, fleshing out all the pages on your site, and we're gonna get a little more advanced.

We're gonna talk about making your pages interactive and we're gonna look ATT how you can use Graphic UL in order to access different types of data about your site.

So we're gonna be able to access metadata about the site.

We'll be able to access information about the different files, and we'll also be able to parse through markdown files on our site and display them in an awesome way.

So if you're looking for a static side generator, you might want to consider using Gatsby.

Not only is it backed by the awesome power of react, but it's also a new project, which means it's constantly being added to and developed.

Got so he's not going anywhere.

And therefore you can feel safe investing some of your Web infrastructure in Check out this draft academy course.

We're gonna give you everything you need to know to get started, and I'm excited to see what you guys learn in this tutorial.

I'm gonna show you everything that you need to do to get Gatsby up and running on your computer.

One of the cool things about Gatsby is the way you install it on Windows, and Mac is actually the same.

So Gatsby relies on this program, called know Js.

So all we have to do is install know Js on your windows or our Mac computer and then using know Js and something called the Node package Manager, we can install Gatsby and get it up and running and ready to go.

So if you already have no J s and the node package manager installed on your computer, then all you have to do is just skip to the end of the video and you'll see the part where I actually install Gatsby.

But if you don't have no Jax installed in your computer, I'm gonna show you exactly how to do that.

Right now all you want to do is go over to this website here.

It's no Js dot or GE Ford sash E N Ford Sash download.

And there's three options here that we can click for our download Windows, Mac or the source code.

So you just wanna pick whichever operating yourself Whichever operating system you're on, I'm on Mac, So I'm just gonna click Mac.

And once that's downloaded, I'm just gonna go over to my downloads folder and I'm just gonna double click on this and what they should do is open up this node.js installer.

So all we wanna do here is just click continue and accept anything we need to accept, and then we can install know Js on our computer.

So once that's done installing, we want to check and just make sure that everything is installed correctly.

So I'm gonna open up a terminal, and I just want to type in the following code.

We're just gonna type node, dash, dash version, and that should spit out a version.

And then we can also type NPM dash dash version, and that should spit out another version.

So we're using no J s.

And then in order to install gas, we were gonna use N p m.

Which is the node package manager.

That's basically just a program that we can use to install other programs.

So we're gonna use it to install Gatsby.

So once you validated, that note is installed correctly on your computer.

We just have to use this note package manager to install it.

So I'm just gonna tell you and P m install Dash, dash Global.

And then I just want to tell you, Gatsby hyphen cli not just dance for Gatsby command line interface.

So this is how we're gonna communicate with Gatsby.

We're going to use this command line interface will be able to give Gatsby commands and tell it to do different things for us.

So enter and this should go off and start installing everything that we need for Gatsby.

And you can see here that it installed everything we needed.

And it's just a bunch of different files.

So in order to just validate that everything's installed correctly.

We can just tell you, Gatsby Dash, Dash version.

And they should spit out a version of Gatsby.

So long as you can get that version to come out like this.

Then Gatsby is officially installed on your computer and you're ready to start building your First Gatsby website.

In this tutorial, we're gonna talk about creating your First Gatsby site.

So we're gonna create our Gatsby site and then we're gonna look at some of the default folders and files that got to be creates for us when we make that new site.

And then we're gonna serve our site onto the Internet and we'll be able to see our site running on our local server.

So let's get started.

This is gonna be an awesome tutorial.

First thing I want to do to create my Gatsby site is open up a new terminal window.

In my case, I just have one down here in my text editor.

And in order to create our Gatsby site, we need to enter in some commands into this terminal.

So I just want to type Gatsby knew.

And now I want to type in the name of the website that I want to create.

So this will be like the name of your Gatsby sight.

My case would just do g a underscore site for draft academy site.

And now what we want to do is enter in the address of a project template that we can use.

So Gatsby actually has a sort of like a hello world introductory project set up on get hub and all we have to do to access that is just type in this.

You are Allison.

It's get hub dot com forward slash Gatsby Js ford slash Gatsby starter.

Hello, world.

So just enter this in after that.

Gatsby New.

Yeah, that Gatsby New command.

And we'll be able to get that Gatsby starter project that we can use, and that's what I'm gonna be using in this tutorial.

So we're gonna enter and Gatsby should go out and basically go out to get home, get that project template and then start installing it onto our machine so this could take anywhere from like 1 to 3 minutes.

It really just depends, but it's probably not gonna be, like super fast.

So that's done installing and for me, it took about a minute for that Thio install everything that it needed to install.

And once that's done, we come up here into our file Explorer.

You'll notice that I have this new folder that was created inside my documents folder called G A Site.

So this is the folder that got to be created for our project.

So I'm just gonna open this up, and I want to sort of talk you through what all of these different things are inside of here might be a little intimidating if you haven't worked with something that looks like this Before I do that, though, I just want to show you how we can actually build our site and see it online.

So the way that we can do that is by coming back down here into our terminal.

And I want to tell you the following commands.

Well, first off, I just wanna change directory into that new site and then I want to type npm run, develop.

And what this is going to do is it's going to start up a Gatsby development server on our local hosts that we can test our website out and sort of use it to develop.

So this is like mostly what you're gonna be using when you're testing your site.

So that's finished running and you'll see that we get all these success messages.

I do just want to point out some of the stuff down here.

You'll notice that this site is running it local host 8000.

So local host is like a local Web server that's on your computer.

So if we go over to local host 8000 we should be able to see our website up and running.

And I just have this open here in my Web browser.

Comes gonna refresh and you'll see.

Logo has 8000 is now hosting our site.

It's a really simple site.

It just says hello world.

So this isn't like anything crazy, but this is actually our site running.

And so any changes that we make to our site will show up here on this development server.

As long as that server is running to back over in the text editor again, I just want to talk you guys through sort of the default files that you'll see now.

There are a couple of things in here related to know Js, and one of those things is this Node Modules folder and you'll notice if you click down in this folder, there's like a bunch of other folders inside of here.

This is just something that's used for know Js.

You're really not gonna have to worry about this too much.

Now you're gonna need it so you don't want to delete it.

But a sw far is like having to modify anything in there.

You probably most likely won't have to.

Next we have this public folder.

You notice that there's really not too much stuff here in this public folder, and this public folder is basically the folder that represents, like you're finished static website you'll see later in this course we can build our website, which means we can compile all of the Gatsby pages that we write together into our finished static site that we can that we can then serve onto the Web and all of your like, static Web pages and you're finished.

Static site is going to go inside of this public folder.

So this is basically just what our site would look like Now we could put these files on a Web server and it would be our site the next full.

There is probably the most important folder, and it's the folder that you're gonna be using the most.

It's this source folder and this is where we're gonna store all of the pages for our website.

So if you're building like a blog's cited store all of your blood pages in here We're building a normal website again.

All your pagers, they're gonna go in here and you'll see we have this pages folded by default.

And then we have this index dot Js file now, because Gatsby is built on know Js and more specifically, Gatsby uses react Js All of our files are actually just gonna be Java script files.

And so the content files that we write and a lot of like the files were right for our components are gonna be Java script.

You can also use other formats, like mark down and stuff like that too.

But for now, in this default structure, we just have this pages folder and then we have this index dot Js file.

So really, the source folder, like I said, is the most important folder it's gonna It's gonna be where you're spending most of your time.

There's also some other files down here this dot getting nor file.

This is just a file that's used with git.

And then we have these package dot Jason files and this is another file that's used with no Js and there will be a couple instances where we're gonna have to modify this.

But for the most part, the package dot Jason file basically just manages all the dependencies and all sort of like the overall settings of your no J s app, which is what we have right here.

So package yes, package that Jason file is important, But for like the normally use cases, you probably won't have to touch it that much So, like I said, for the most part, this source full there is gonna be really important.

That's a basic overview of the full destruction and Gatsby.

And we also got our site up and running on that local host.

So now you're ready to go out and start adding content to your site and really start digging deep into Gatsby.

And this is Uriel.

We're gonna talk about adding content to your Gatsby files.

So basically, we're just gonna take that default index file that Gatsby gives us, and we're gonna add in some different HTM out elements.

We're gonna talk about how you can start building your pages.

So over here I just have this basic Gatsby default layout and inside the source folder and pages, we have this index dot Js file.

And if you look over here on my website, I'm actually viewing this index file.

So this index dot Js file is like the root directory.

It's like the home page of our website and you'll see in here that there's a bunch of react code.

Actually, it's Java script, but is using react.

And so this doesn't look super familiar to you.

It's actually basically just using this framework called React Js and you don't need to know too much about react to use Gatsby.

But it does help to be like a little bit familiar with it.

But for now, just know that, like all this fancy code over here is Java script, and it's for this react framework.

But you can see here is we have a bunch of stuff that looks like HTML and and it's very similar to HTML and it works the same way.

So we just have this dim and then inside of it, we have hello world.

And what's cool is that by default, Gatsby is ah, hot reloading framework.

So if I make a change over here to this did, it will automatically get updated over here on our website So I could say like, Hello world, it's me.

And when I say this page, it automatically gets updated.

So without me having to refresh the browser, it will automatically same over here.

So kind of makes it really easy for you.

Thio, develop your site, you know, really makes a development cycle a lot quicker.

You don't have to let go over and physically refresh the page every time.

Whenever you make a change, it's just automatically appearing over here.

So that's just like a little thing that makes Gatsby pretty cool.

In addition to having like, for example, a div, we could also have other HTML elements, so I could put like a header in here, right?

We could say, like, Here's the header And then I could have maybe like, a paragraph is well, and when that loads up, you'll see it loads up just like normal.