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.

  • We don't get this red screen of death.

  • I want to come over here to this index, and I'm just gonna copy all of the code from in here, and I'll just pace the end of this new page.

  • That way we don't have to write it out.

  • We can just have it.

  • And I'm just going to get rid of some of this stuff.

  • And on this new page will just say that this is Page two.

  • And so now our link should actually work.

  • So when I click this page to link, it will bring me to this page on our website and see that it does Another thing we could do would be create another link on this page and we'll link back to the home page.

  • So I'm gonna copy the link that we have over here and I'll bring it here into page two.

  • And now, instead of linking to page to weaken, just link to the home page, which is just a Ford Sasha and we can say go home.

  • So now we have this go home link and we can link back to the home page.

  • So these links are now operational, and we can link between the pages on our side.

  • So you could I mean, if you created, like, a bunch of different pages on your site, then you could create the links for them.

  • Another thing I want to point out is we can also put pages inside of subdirectory.

  • So if I created a folder, let's call this folder.

  • Do one.

  • And inside of dir, one will make a new file, and we'll just call it Paige hyphen three.

  • And that's gonna be another job script file.

  • And again, I'm just gonna copy this code and we'll put it inside of page three.

  • And so from the home page now, we can also, in addition to linking to page two, we can link to page three.

  • Except now, when we put our path, we're gonna wanna put dear one forward slash page three and they should link us to page three.

  • So, you know, organizing your content inside of this page is directory is something that you wanna, you know, actually do.

  • And really, the pages directory is kind of like the root directory of your Web server.

  • And so, you know, index dot Js and page two or both at the root directory, right?

  • And then page three is inside of this subdirectory one.

  • So you really want to pay attention to how you're ordering your content.

  • And that's kind of how you can do it in Gatsby.

  • In this tutorial, we're gonna talk about making Your Gatsby pages interactive.

  • One of the cool things about Gatsby is it's Bill using this framework called React Js and react Js was built by Facebook and so, you know, it's like a powerhouse framework.

  • One of the cool things about react is that it allows us to make our websites really interactive, so the user can actually like interact with the website and Web site will respond to the user.

  • And I'm gonna show you how we can build a page that just implements like a simple little counter so you'll press like a plus button and the counter will incriminate.

  • And then your plus, you'll press on minus button and the counter will document.

  • So the first thing I want to do is come over here into this Pages folder and I'm gonna create a new file.

  • We're just gonna call this counter dot Js So inside of this counter file, we are going to make our counter and in our index file, I just want oh, create a link so that we can easily get to this counter page, so this will just link us to the counter.

  • So actually, even put a break in here.

  • So now when we click this link, it'll bring us over to our counter page.

  • Now, there is some, like, default code that I want to put inside this counter dot Js file, and I'm just gonna paste it in, and then I'm gonna explain what the code is doing, and then you can just copy it in on your own.

  • And that way you can practise kind of like writing this stuff out, so you'll notice I just pace it in a bunch of code.

  • And this code actually looks a little bit different than the code that we had in our index dot Js file.

  • That's because this code is different.

  • So, again, this is just Java script code and its code.

  • That's for the react framework.

  • And I just kind of walking through what's in here.

  • So appear we're just importing react.

  • And now we're creating a class called Counter, and it's extending the react dot component.

  • So basically, this is gonna be a react component, which is basically just like, um a little component inside a reactor that can do certain things.

  • So and then we have this render function right here, and basically anything that goes inside of this render function is gonna get displayed on the page.

  • And so here we're returning all of this stuff that's going to get displayed.

  • So we're just returning whatever is in here and so inside of this class, we can put a bunch of code that's gonna help to make our react component dynamic, sort of help to make our page dynamic.

  • And so now on this counter page, we just have basically just do that says that it's the class component and now I want to start adding in some code.

  • So the first thing I'm gonna do is add in some, uh, html elements, and this will kind of like be the setup for our counter or so inside of these dibs.

  • I'm just gonna paste in this code and you'll notice here we have a bunch of code, so we have a header that says Counter.

  • We have a paragraph that says the current count, which zero, and then we have two buttons, a plus button and a minus button.

  • So eventually what we want to happen is when the user clicks this plus button, we want this counter to increment.

  • And when the user clicks this minus button, we want the counter to Decker Mint.

  • So over here on our page, we just have the plus and minus buttons and you'll notice that nothing happens right now.

  • But all we have to do is just add in a little bit of logic into this react class into this Gatsby class, and it will start working.

  • So the first thing I'm gonna do is add in what's called a constructor.

  • So up here, I'm just gonna paste in some more code.

  • So it's gonna look like this.

  • Actually, this isn't formatted very well, but this is a constructor function.

  • So basically, what this is doing is that this gets called whenever we create this class or whatever we like reload the page and it's setting this variable called state and so state is a variable that basically represents the state of the component.

  • And I'm not gonna get too much into what State does.

  • But for all you need to know for now is just that inside of this state variable weaken store a variable called count.

  • So basically weaken store the current count inside of this state object so we can start account right there and then I also want to add in some other code and it's actually going to go in the counter.

  • So I'm just gonna put this right here and you'll notice that now, instead of just having zero here when we're trying to access the current count, we have something that says this dot state dot count What this is doing is it's accessing this state variable up here.

  • So basically, instead of just displaying zero, we want to display the value of the count inside of this state.

  • And then there's one more thing we need to do, which is get the buttons working right?

  • In other words, we want somethingto happen when we click the button because right now, when we cook these buttons, nothing happens, right?

  • If I click the plus button in the minus button, the count just stays where it is.

  • So what we need to do is add in a little function in here to this button tag, and again, I'm just gonna pace it in and I'll show you what it's doing.

  • So what it looks like here is we have button and then it says on click equals And then we have these open curly rackets and then two pregnancies.

  • And what we're doing here is we're setting the state.

  • So it says this dot set state and then inside of here it just says count.

  • And so basically what this is doing is it's Declan menting the counter it.

  • So it's subtracting one from the counter.

  • Actually, I think I could probably form at this a little bit better so you guys can see it, right?

  • So this is basically just what it's gonna look like right here.

  • And actually this should be the minus.

  • But because we're documenting, so then I can take this same type of code and use it for the plus button.

  • But instead of documenting it, So instead of subtracting one over here, we can just add one.

  • So I'm going to do the same thing, and I'm just gonna paste it in here.

  • And so now when I refresh this page, what should happen is when I click the minus button, the current couch should document when I click the plus button.

  • The current countered increment and you see I'm clicking the plus button and the counters implementing and I'm clicking the minus button and its death lamenting.

  • So that's kind of how you can make your page is dynamic.

  • And so, basically, I'm just using this on click Function down here, and it's setting the state variable, which we set up here in the constructor.

  • And it's either incremental ng that count or it's Decker menting that count.

  • Now it's kind of how, yeah, that's one way that you can make your pages interactive.

  • Obviously, the more you learn about react Js the more you will be able to use these reactor components to make your website Maur interactive and more dynamic in this tutorial, I'm gonna show you how you can build your Gatsby website.

  • So let's say that you have a bunch of different files and folders and resource is on your website, and now you want to serve it up on a Web server, right?

  • Well, how can we access all of those files?

  • In other words, up until now we've been testing our website on this local host development server, But what happens when you want to take those files and put him up on a server of your own.

  • Well, we can actually use a build command in order to build our Gatsby website.

  • So basically, we can execute a certain command and then gas, we will go out and build all of our pages together into static pages that we can then copy and paste or FTP or whatever over onto our web server.

  • So I'm gonna show you how to do that really quick.

  • So I just wantto cd into my directory.

  • And once I'm inside of my project directory, I can run a simple command, which is just npm run build.

  • And basically, this is just gonna tell Gatsby like, Hey, we want to build our site, Click enter, and this is gonna go off and do a bunch of stuff.

  • It's gonna build up our entire website.

  • So once that's done building, I want to head over to my file tree.

  • You see, here we have this folder called Public, and this is where Gatsby spit out all of our static files.

  • So inside of this public fool that I was gonna open it up and you'll notice that there's a bunch of files and there's a bunch of, like, JavaScript files in here and stuff like that.

  • But basically this is our entire site.

  • So there's actually a lot of these different files, and that's kind of what it's gonna be like.

  • But you also notice up here we have, like directory one.

  • And then there's this Page three and page two, and there's this static folder and this counter folder.

  • So this is actually all of the resource is that we need to include on our Web server if we want to run our site.

  • So all I would have to do would be, like, copy and paste this stuff onto my Web server, and it would start working where you could serve up all of this stuff using like some sort of ah deployment apelike Netley fire or something like that.

  • But basically, all you need to know is that this public folder has all the files that you need for your website.

  • So any time that you make a change to your website and you want to regenerate the files, you can actually just run that NPM run build command again, and it'll build all these files and it'll sort of like override overwrite the public folder and do everything that you needed to do inside of there.

  • In this tutorial, I'm just gonna give you a quick overview of using components and react.

  • Now, I could make an entire course just talking about using components and react.

  • And if you're not familiar with how react works and how components work, then this will just kind of give you a brief overview of how these components work and really just sort of help you to wrap your mind around what we're doing here.

  • So a component in react is basically just a collection of Js axe or a collection of HTML that has maybe some styling, maybe some logic, and it sort of contained in this one class or this one container.

  • And what we can do that is import that into other finals on our website and sort of use it.

  • And the best way for me to explain this is just to kind of show you so earlier in this tutorial, we created this counter dot Js class and if I go over here my website, I can click and you see This is the counter, and basically all it does is just increments and Decker mints a counter when you click these buttons.

  • Now, this is what's called a react component.

  • And so you'll notice that the whole component is just this thing right here has some some of this JSX from this Each team l A style stuff in here, right?

  • And then it also has this constructor function up here, and it has these functions like this on click function inside of this button.

  • There's a lot going on inside of this component.

  • Now, imagine that I wanted to take this counter and I wanted to insert it on another page in my website.

  • Right.

  • So here on the home page, how about instead of just linking to counter?

  • So instead of just having this counter link, imagine I wanted to actually physically put the counter on the page.

  • Well, the way that we can do that is by inserting our component or including our component inside of our index file, and I'll show you how we can do that.

  • Personally, I want to do is come up here and we're just gonna tell you import.

  • And then I want to take the name of the reactor component that I want to import.

  • So in our case, it's gonna be counter and then I'm gonna say from and here we just want to put the path to the file and this is gonna be the path of the file starting at the root directory of our website.

  • So it's gonna be dot slash and then it's just called counter dot Js.

  • Actually, I don't think we need the Js.

  • So we've imported this counter and now we can actually use it so I can come down here in my JSX.

  • And let's say that instead of just linking, we want to now actually include the counter.

  • So I'll get rid of this and I'm gonna add in this counter tag.

  • So this is the name of the components were gonna refer to it just like this.

  • And then I can just do afford slash and will close off this tag.

  • And so now when we say this page, the counter shows up over here.

  • And so instead of just having that counter on its own page, right, So if we go over to this counter page the counters here But now we can just include that counter on our own page.

  • And that's basically how you're gonna be building your pages using in Gatsby, right?

  • You want to be using these components, and it takes a little while to kind of get used to using these components.

  • But it's a really great way to develop, and that's basically the whole point of reactors to break up your website into these different components.

  • Now there's another thing that you could do with these reacting opponents, and you can actually pass them information.

  • So in here I could pass this counter, for example, like a color so I could say color is equal Thio and would just pass in blue, and I can actually access this color variable from inside my component.

  • So I'm here in my counter component, and if I wanted to access the color, I could basically just type out something like this so I can do open and closed curly brackets, and then I could take this dot props, and then I want to take the name of the variable that we passed it.

  • So it's just gonna be color in our case, and this will print out the color.

  • So over here you can see it's printing out Blue and I could actually use this color to style this component so I could come up here to this dead and we could make a style.

  • And then inside the style tags, I could say color and I could set it equal to this Stop prop stopped color.

  • So now this component is gonna be colored blue.

  • What's cool is I can change the color of this from in this file.

  • So if I wanted to make this like green, for example, I could just pass in green, and now the counter is gonna be green.

  • So that's kind of how you can use these components to make your website more powerful.

  • And obviously you can create more than just a counter so I can create, you know, a couple of dozen of these components and add the men on my website like I could create a component for, like, a navigation list.

  • I can create a pony, a component for the header of my web site.

  • I could create a component for a button, Really Doesn't matter.

  • You can create components for anything, and then you can sort of just use them on your Web pages in order to build your user interface.

  • In this tutorial, I want to talk to you about using plug ins in Gatsby.

  • One of the cool things about Gatsby is it allows you to install and use external plug ins inside of your project.

  • In these external plug ins can do a bunch of cool things.

  • They can add elements to your website, and they can make your website more powerful.

  • So you definitely want to consider using plug ins.

  • If you're building a Gatsby site, I'm over here in my Web browser.

  • On this page right here, it's Gatsby Js dot org's Ford slashed ox Ford sash plug ins.

  • This is sort of like the official plug ins page for Gatsby.

  • And so if we just scroll down on this page, you'll see there's this huge list of official Gatsby plug ins that you can use.

  • And a lot of these plug ins were just developed by Gatsby, and there's also a bunch of plug ins that were developed by the community and these plug ins d'oh, wide variety of things, all sorts of stuff, and they can really just make your website a lot more powerful.

  • So what you should do is just kind of click through these plug ins and see if any catcher I see, if any you know you might be useful on your website.

  • For example, here's one for Google Analytics in for a lot of these plug ins, the ones that are official plug ins.

  • There's like they have their own page on Gatsby's website, so you'll see.

  • Like this.

  • Pelican has its own page, and there's, like, installation instructions, and it tells you how to use them.

  • A lot of these plug ins will require, like, a little bit of configuration to really get them going.

  • And then a lot of these community plug ins will just link you to get out page and you can, you know, same thing.

  • Just read the read meet up mark down file and they give you the installation instructions and stuff like that.

  • So I want to talk to you in this video about, you know, in downloading and installing your own plug in, and in this video we're actually gonna install a plug in for typography, Js and typography.

  • Js is like a CSS framework that we can use inside of our website to kind of just make it look better and style it a little bit better by default.

  • So imagine something like bootstrap, which stiles your website.

  • That's kind of like the plug in that we're gonna be using.

  • So the way that you install these plug ins and the first thing that you always have to do is install the plug in using the node package manager.

  • So I'm just gonna go down in my terminal, and I'm just gonna type out the following command.

  • I'm gonna take NPM installed dash, dash save, and the plug in that I'm gonna be installing is this Gatsby plug in typography.

  • And what this will do is it'll install everything we need to run that typography Js on our Gatsby websites.

  • I'm just gonna click enter and no package manager will go out, do its thing, get everything it needs to run typography.

  • Once that's finished running and you get a success, then there's one more thing that we have to do, which is we basically just have to tell Gatsby that we want to use that plug in.

  • So we have to let gas.

  • Me?

  • No.

  • Like, Hey, we install this plug in and we want to use it on our website.

  • That way we can do that is by telling Got to be inside of this Gatsby convict Js file.

  • Now, this isn't a file that's gonna be inside of your directory by default.

  • And so you want to create this file?

  • You want to create this file at the root directory of your sight?

  • So in my case, it would be inside of this G A site folder.

  • So this Gatsby conflict foul should be in the same directory as the source holder in the public folder inside of this Gatsby conflict dot Js file.

  • We want to type a few things.

  • The first thing we're gonna type is module dot exports, and this is gonna be equal to two currently brackets and then inside of here, I just wanna make it array.

  • So it's gonna be plug ins, and inside of this plug ins array, we're just going to type out all the plug ins that we want to use.

  • So in my case, I'm using The Gatsby plug in type.

  • Once you have this in here, basically, this is just telling Gatsby like, Hey, we wanna use this plug in and this Gatsby is gonna read this conflict file every time it builds your site.

  • So what we want to do is just a restart.

  • Our website so restarted a Web server, and I just haven't running done here.

  • So I'm just gonna got to be developed and we'll restart our Web server.

  • And actually, I think I spell module wrong.

  • Yes, that's why that's not working.

  • So now that that's finished running, I want to go over to my website and right here you'll notice that the text has actually changed style.

  • So before the text was like not really style very well and now it actually looks pretty good.

  • And so what actually happened was this typography plugin got used by Gatsby, and it changed the way that our text look right.

  • So the typography is like a CSS framework.

  • So it's changing the look in the field of our site.

  • And if I inspect this page and I go up here in the head of our website, you'll see that there's this new element here.

  • It's this style tag and it says ideas, typography, Js and So, actually, what happened was got to be used that typography plug in to add this topography code inside of our Gatsby site.

  • So all we had to do was just configure the plug in and our website is automatically styled with this cool typography team.

  • So you know, what you should do is go over to this plug ins website and play around with different plug ins.

  • You know, see how they work on your Web site.

  • See if you like them, See if you don't like them and, you know, just basically use them to make your sight better anyway that you can.

  • In this tutorial, I want to talk to you about using the layouts in Gatsby.

  • Layouts are basically special types of files that will act as a template for all the pages on our website.

  • So imagine there is a scenario where we were creating a website and for every single page on the Web site, we wanted to have, like, the same layout, right?

  • So on every page we wanted to have the same header and we wanted to have the same footer.

  • Maybe we wanted to have, like, the same navigational list and we wanted it to be the same for all the pages on our website.

  • One way we could do that would just be to copy and paste that header footer code onto every single page in our website.

  • Right?

  • So if we had 100 pages, we would copy and paste it 100 times on all of those pages.

  • But a better way to do that would be to just define some overall layout for our site and then have all the pages on our site inherit from that layout.

  • So all the pages on our site would use that layout as their template or as their skeleton of HTML code, and then they could just whatever content is inside that given paid, would just be inserted inside that layout.

  • I'm gonna show you howto build layouts inside of Gatsby.

  • The way that we do that is by first coming over to this source folder, and I want to create a new folder inside of here, and I'm just gonna call it layouts.

  • And then inside of this Layoffs folder, we can create a new file, and we'll just call this index dot Js and index dot Js is gonna be the default layout that all of the pages on our site are going to use in here.

  • I'm just gonna paste in some code and I'll talk about what we have here.

  • So I just have import react from react and then export default.

  • And then you need this parentheses with curly brackets inside and Children.

  • And then here we have the actual layout of our website.

  • So as long as you have something that looks like this, then you should be able to implement this layout.

  • Now there's this special tag right here, its Children.

  • It's basically like a Children function that it's calling, and it's inside of these curly brackets, and what this will represent is the content of the page that we're currently on.

  • So just to demonstrate this, I will type out some text.

  • So we're going to say layout and well, stately out.

  • And when I go over to my website and actually before we do that, whenever you make a new layout, you need to restart your development server.

  • So I'm gonna restart my Gatsby server just like that.

  • And once that's done restarting when I refresh this page, you'll notice that now, instead of just having how the world and this is a paragraph, we have these layouts of here.

  • And so layout is surrounding the content of my page, and I actually have a couple other pages here.

  • I also have Page two, and I have, ah, Page three.

  • So if I go over to Ford's slash page two, it's the same thing.

  • So on this page two, it's using the same layout that our home page views.

  • And if I go to page three, it's the same thing.

  • So Page three is also using this layout.

  • So by default, all the pages are on our website are gonna be using this layout, and these layouts are awesome because over here, for example, I could define like a header for my page.

  • And this will just be a really simple header.

  • And then I could also define like a foot or down here, and that head on that foot are gonna show up on every single page inside of our website.

  • So this makes it really easy to define a layout for all the pages under site so you could have your header up here and your foot down there And whenever you want, change the way that the head of the footer looks, You only have to change it right here on this layouts page are on this index file inside the layouts folder.

  • You don't have to change on any of the other pages, and that just makes your sight more modular and more scalable.

  • So played around with these layouts.

  • And you know, you can basically just structure your whole site inside of this layout, and then all of your content will just get injected into the layout from this Children function.

  • In this tutorial, I'm gonna talk to you about using Data and Gatsby, and this is just gonna be like a quick introduction into how we can store some external data about our website and then access that data inside of our pages.

  • So imagine that I wanted to store some information about my sight.

  • Maybe I wanted to store like the title of my website and the author of the website, and I wanted to be able to access that information inside of multiple pages on my site.

  • Well, one way I could do that would be to just write out that information and each one of my pages so I could create a header in each page and put in the site title.

  • Right?

  • But here's the problem.

  • If I wanted, then change that title.

  • I'll have to go through every single page of my sight and manually change the title of that to do some sort of like a find replace.

  • And that could be really messy.

  • And it could be potentially dangerous.

  • If not everything is like, spelled the same or whatever.

  • An easier way would just be the store, the title of my website, inside of a variable somewhere.

  • And then have all of my pages fetch that data and use that variable.

  • Right that way, if I wanted to change the title, I would only have to change it in one spot, and it would automatically update on all the pages in my sight.

  • So in this tutorial, I'm gonna show you how you can do something exactly like that.

  • Gatsby, we want to open up this Gadsby Conficker javascript file.

  • And if you don't have this file, it's located at the root directory of your project.

  • So in my case, it's right here in this G A site folder, and if you don't have it, you can just create it.

  • So this is basically, like the main settings configuration for our Gatsby app.

  • So in here you can put all sorts of important things that will help Gatsby to configure itself and to just do what it has to do.

  • So inside of this module dot exports function and her object you want to add this in, we're gonna put a an attribute.

  • It's gonna be called site metadata, and this is gonna be an object.

  • And inside of this site, metadata object.

  • We can put any variables that we want access about our site so I could put like, title, and we could give our website a title so you could say, like, draft Academy's Web site.

  • I could also give this something, maybe, like an author, and we could just say the author's me, Mike.

  • So obviously this is just some very simple data, but I'm storing it about my website now.

  • What I can do is I can configure each one of my pages to go out and grab this information, and so my pages will be able to display the website title and the website author.

  • And if I ever want to change those, I only have to change them in this conflict file.

  • I don't have to touch the pages that they're pulling this data.

  • So I'm gonna head over to one of my pages.

  • We'll just go to index dot Js This is the home page.

  • And in here, what I want to do is make some simple modifications which will allow me to grab the data that is coming from this Gatsby conflict Js file.

  • So the first thing I want to do is add what's called a graph Que el query and graphic you Elyse querying language that was developed by Facebook and it was designed to be used with react.

  • And basically you can use graphic you well, in order to grab information from external sources, in our case, we are grabbing information from this Gatsby conflict dot Js file.

  • So graphic you Eliza querying language A lot like SQL.

  • If you've ever used SQL before, we can use graphic you out too, right queries to get information and that's what I'm going to do down here.

  • I'm actually have some code that I'm gonna paste in here. 00:50:42.680 --> 00:50:44

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

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

ギャツビー - 初心者のための完全なチュートリアル (Gatsby - Full Tutorial for Beginners)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語