Placeholder Image

字幕表 動画を再生する

  • Hey, when the draft academy, my name's Mike.

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

  • Each team now.

  • One thing that you need to keep in mind when you're writing content inside of these files as you can't have two HT mile elements that air at the same level.

  • So if I was to come over here and create a paragraph, and I created this paragraph at the same level of this dip, so I had these air like called sibling Elements.

  • When I save the page, you'll notice that I get an error, and that's because it says you haven't Jason JSX elements.

  • And so, really, although this looks like we're writing in each team, l were actually writing in a special JavaScript, each team out like hybrid language called JSX, and it's basically like a way that you can write html inside of a job, a script file.

  • But one of the rules is that you can't have two sibling elements just like this.

  • So everything has to be wrapped inside of, like, a single element.

  • Like if I put this inside of this Div than this area should go away and it should just show up.

  • So that's just the thing to keep in mind when you're writing content inside of something like this.

  • And inside of this JSX we can also makesem styling.

  • So I could, like style this, Dave and the way that we would style this would be style and then equals.

  • And then inside these double currently brackets, we can put Cem CSS so I could say like color and I could do a colon.

  • And then I need to put this inside of quotation marks.

  • But I could say like blue.

  • And now this will change all of the text to blue, Or I could change it to tomato, and it would change it to tomato so you can use CSS sort of in line just like this.

  • And if I wanted to add, for example, like another attribute here so I could say, like, background color.

  • We could set this equal to blue, and it will set the background to blue So you can add in different CSS stylings inside of these JSX elements just very similar to how you wouldn't html If you're familiar with CSS, they don't notice that this is a little bit different, but the same concepts apply.

  • Another thing we could do would be linked to an image.

  • So I could say like I am G.

  • And I just have this image of this keep cat because we're on the Internet.

  • So paste this in here and then we could just close off this image tag.

  • And now this image should show up in our website.

  • So, yeah, there's the image of the cat.

  • It's like, way too big.

  • But you can see that it shows up less so That's kind of like the basics of, you know, adding in content into these JavaScript files, and you can see that it's actually pretty easy, and it's very similar to just writing normal ht mount.

  • So you're not familiar with J S X and how that works and how it kind of is used in react.

  • Then you might want to look that up.

  • But for the most part, you know, as long as you're just writing normal HTML, you're pretty much safe.

  • And it's probably gonna work, like, 90% of the time.

  • Yeah, so that's kind of the basics of adding content to these files and any of these Js files that we store over here in this pages folder you can basically do this with.

  • So you can just put all your sort of each team out text and HTML tags over here, and it'll just display on the website.

  • Normally, in this tutorial, we're gonna talk about linking between the pages on our website and Gatsby.

  • So up to this point in the editorial, we just have this one page, which is index dot Js.

  • But in any good website, you're gonna have more than one page.

  • So eventually you're gonna want to be able to link between the different pages on your website.

  • I'm gonna show you exactly how to do that.

  • The first thing we want to do if we're gonna link between pages on our site as we want to go up here and we wanna add in another import statement.

  • So I'm just gonna say, import.

  • And instead of saying react well, say link from and then inside of quotation marks, we're just gonna tell you, Gatsby, hyphen link.

  • What this is going to do is it's gonna allow us to use a react component, and that react component is called Link.

  • And basically all you need to know is that we can use a the link component or the link tag in order to create a link between the pages on our site.

  • So I want to come down here into this HTML and I'm just gonna use this link tax.

  • So now that we imported it, we can use a tag called Link and then I'm gonna say link to And then I knew I want to take the address of the page that I want a link Thio.

  • If you're familiar with normal html, then you'll know about the like a normal link, which is just the A tag and normally we would just type like a and then a treff, and then inside of here, we could put the path of the page that we wanted to visit.

  • But since this is God's being, since we're using react, we have to do it this way so we can use this link and then inside here, I'm just gonna put this whole linked to like page two and then I can put some text in here so we'll say like page Thio.

  • And then we can close off this link just like that.

  • So what this will do is create a link to page two on our website.

  • Now, if I had over here, you'll see that we have this link.

  • And when I click this link, you notice that we get this development for a four page.

  • So basically, for a four page not found right, this page isn't on our website, and that's kind of a problem.

  • So let's come over here into this Pages folder and we'll make a new file and I'm just gonna call it page hyphen, too dot Js, This is gonna be another job script file, and I wanna just actually, I'm just gonna go back here.