Gatsby - Full Tutorial for Beginners

hey welcome to draft Academy my name is Mike in this course I'm gonna teach you everything that you need to know to get started using Gatsby j/s Gatsby j/s is a relatively new static site generator that's built on top of nodejs and it uses react in order to help you build an awesome fast and scalable of static website 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 can be served extremely fast on your web server so 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 serve 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 then we're gonna get a little more advanced so we're going to talk about making your pages interactive and we're gonna look at how you can use graph QL in order to access different types of data about your site so we're going to 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 site 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 Gatsby's not going anywhere and therefore you can feel safe investing some of your web infrastructure in it 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 and 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 nodejs so all we have to do is install nodejs on your windows or our mac computer and then using nodejs 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 js' 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 js' installed in your computer I'm gonna show you exactly how to do that right now so all you want to do is go over to this website here it's no js' org /en forward slash download and there's three options here that we can click for our download windows mac or the source code so you just want to pick whichever operating your says 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 nodejs installer so all we want to do here is just click continue and accept anything we need to accept and then we can install nodejs 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 - - version and that should spit out a version and then we can also type NPM - - version and that should spit out another version so we're using nodejs and then in order to install gath we're going to use NPM which is the node package manager and that's basically just a program that we can use to install other programs so we're going to use it to install Gatsby so once you validated that node is installed correctly on your computer we just have to use this node manager to install it so I'm just gonna type NPM install - - global and then I just want to type Gatsby - CLI and that just stands for Gatsby command-line interface so this is how we're gonna communicate with Gatsby we're gonna use this command line interface we'll be able to give Gatsby commands and tell it to do different things for us so I'm gonna click 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 is installed correctly we can just type Gatsby - - version and this should spit out a version of Gatsby so as 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 going to 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 gatsby 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 new 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 site my case would just do GA underscore site for draft County 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 github and all we have to do to access that is just type in this URL so it's github comm forward slash gatsby j s forward slash catsby starter hello world so just enter this in after that Gatsby nuke yeah that gets me new command and will 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 click enter and Gatsby should go out and basically go out to github get that project template and then start installing it onto our machine so this could take anywhere from like one to three 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 to 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 GA 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 did things are inside of here it 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 type the following commands I'm well first off I just want to 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 localhost that we can test our website out and it's sort of use it to develop so this is like mostly what you're going to 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 at localhost 8000 is like a local web server that's on your computer so if we go over to localhost 8080 logo has 8,000 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 things in here related to node J s 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 nodejs 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 you know as far as like having to modify anything in there you probably most likely won't have to next we have this public folder and you'll 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 your finished static website so 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 set that we can then serve on to the web and all of your like static web pages and your finished static site is gonna go inside of this public folder so this is basically just what our site would look like now and we can put these files on a web server and it would be our site the next folder 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 going to store all of the pages for our website so if you're building like a blog site you'd store all of your blog pages in here if we build a normal website again all your pages are gonna go in here and you'll see we have this pages folder by default and then we have this index dot JSP now because gatsby is built on nodejs and more specifically gatsby uses react j/s all of our files are actually just going to be JavaScript files so the content files that we write and a lot of like the files will be right for our components are going to be JavaScript you can also use other formats like markdown 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 JSP so really the source folder like I said is is the most important folder and 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 get ignore file this is just a file that's used with git and then we have these package JSON files and this is another file that's used with nodejs and there will be a couple instances where we're gonna have to modify this but for the most part the package JSON file basically just manages all the dependencies and all sort of like the overall settings of your nodejs app which is what we have right here so package j/s package JSON file is important but for like the normal use cases you probably won't have to touch it that much so like I said for the most part this source folder is going to be really important that's a basic overview of the folder structure in Gatsby and we also got our site up and running on localhost so now you're ready to go out and start adding content to your site and really start digging deep into Gatsby in this tutorial we're going to 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 HTML element so 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 in pages we have this index dot JSP and if you look over here on my website I'm actually viewing this index file so this index dot JSP Lizz 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 JavaScript but it's using react and so if this doesn't look super familiar to you it's actually basically just using this framework called react j/s 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 JavaScript and it's for this react framework 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 div and then inside of it we have hello world and what's cool is that by default gatsby is a hot reloading framework so if I make a change over here to this div it'll automatically get updated over here on our website so I could say like hello world it's me and when I save this page it automatically gets updated so without me having to refresh the browser it will automatically save over here so kind of makes it really easy for you to develop your site you know it really makes a development cycle a lot quicker you don't have to like 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 an 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 a header and then I can have maybe like a paragraph as well and when that loads up you'll see it loads up just like normal HTML 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 HTML elements that are 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 div so I either like what are called sibling elements when I save the page you'll notice that I get an error and that's because it says you have a jason JSX elements and so really although this looks like we're writing in HTML we're actually writing in a special javascript HTML like hybrid language called JSX and it's basically like a way that you can write HTML inside of a javascript 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 then this error should go away and it should just show up so that's just something to keep in mind when you're writing content inside of something like this and inside of this JSX we can also make some styling so I could like style this div and the way that we would style this would we be style and then equals and then inside these double curly brackets we can put some 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 inline 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'll set the background to blue so you can add in different CSS stylings inside of these JSX elements just very similar to how you would an HTML if you if you're familiar with CSS then you'll notice that this is a little bit different but the same concepts apply another thing we could do would be link to an image so I could say like IMG and I just have this image of this cute cat because we're on the Internet so I'll paste this in here and then we can 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 nonetheless 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 HTML and so if you're not familiar with JSX and how that works and how it kind of is used and 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 but yeah so that's kind of the basics of adding content to these files and any of these j/s 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 HTML text and HTML tags over here and it will just display on the website normally in this tutorial we're going to talk about linking between the pages on our website in Gatsby so up to this point in the tutorial we just have this one page which is index.jsp 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 so I'm going to show you exactly how to do that the first thing we want to do if we're gonna link between pages on our site is we want to go up here and we want to add in another import statement so I'm just gonna say import and instead of saying react we'll say link from and then inside of quotation marks we're just gonna type Gatsby - link what this is gonna 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 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 tag 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 type the address of the page that I want to link to 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 href and then inside of here we would put the path of the page that we wanted to visit but since this is God's P and 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 link to like page two and then I can put some text in here so we'll say like page two 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 so now if I head over here you'll see that we have this link and when I click this link you'll notice that we get this development 404 page so basically a 404 page not found right this page isn't on our website and that's kind of a problem so come over here into this pages folder and we'll make a new file and I'm just gonna call it page - 2 . j s so this is gonna be another javascript 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 paste 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 gonna get rid of some of this stuff and on this new page we'll just say that this is page 2 and so now our link should actually work so when I click this page to link it'll bring me to this page on our website you can 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 2 we can just link to the home page which is just a forward slash 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 site so you can see 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 sub directories so if I created a folder let's call this folder Derwin and inside of Derwin we'll make a new file and we'll just call it page - 3 and that's gonna be another javascript file and again I'm just gonna copy this code and we'll put it inside of page 3 and so from the home page now we can also in addition to linking to page 2 we can link to page 3 except now when we put our path we're gonna want to put dyrone forward slash page 3 and this should link us to page three so you know organizing your content inside of this pages directory is something that you want to 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 JSP h2 or both at the root directory right and then page three is inside of this subdirectory dyrone 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 built using this framework called react Jas and react Jas 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 the website 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 increment and then you'll plus you'll press a minus button and the counter will decrement so the first thing I want to do is come over here into this pages folder and I'm going to create a new file we're just gonna call this counter Jas so inside of this counter file we are going to make our counter and then in our index file I just want to create a link so that we can easily get to this counter page and so this will just link us to the counter so actually I'm gonna 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 Jas 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 practice kind of like writing this stuff out so you'll notice I just pasted it in a bunch of code and this code actually looks a little bit different than the code that we had in our index j s5 that's because this code is different so again this is just JavaScript code and it's code that's for the react framework and I'll just kind of walk you through what's in here so up here 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 going to be a react component which is basically just like a little component inside a react that can do certain things so and then we have this render function right here and basically anything that goes inside of the render function is going to get displayed on the page and so here we're returning all of the 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 so it'll help to make our page dynamic and so now on this counter page we just have basically just a div 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 HTML elements and this will kind of like be the setup for our counter so inside of these divs 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 is 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 decrement so over here on our page we just have the plus and the 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'll start working so the first thing I'm going to 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 and actually this isn't formatted very well but this is a constructor function and 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 we can store a variable called count so basically we can store the current inside of this state object so we can store the camera right there and then I also want to add in some other code and it's actually going to go in the counter and so I'm just gonna put this right here and you'll notice that now instead of just having a 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 its accessing this state variable up here so basically instead of just displaying zero we want to display the value of the count inside of the state and then there's one more thing we need to do which is get the buttons working right in other words we want something to happen when we click the buttons because right now when we click these buttons nothing happens right if I click the plus button and 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 paste it in and then 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 brackets and then two parentheses 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 decrementing the counter right so it's subtracting one from the counter and actually I think I could probably format this a little bit better so you guys can see it right so this is basically just what its gonna look like right here and actually this should be the minus button because we're decrementing so then I can take this same type of code and use it for the plus button but instead of decrementing it so instead of subtracting one over here we can just add one so I'm gonna 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 cow should decrement when I click the plus button the current cow should and you'll see I'm clicking the plus button and the counter is incremented and I'm clicking the minus button and it's decrementing so that's kind of how you can make your pages 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 incrementing that count or it's decrementing that count and 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 j/s the more you'll be able to use these react components to make your website more 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 resources 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 localhost development server but what happens when you want to take those files and put them up on a server of your own well we can actually use a build command in order to build our Gatsby website and so basically we can execute a certain command and then Gatsby 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 just gonna show you how to do that really quick so I just want to 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 so I'm gonna 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 and you'll 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 folder i'm just 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 its gonna be like but you'll also notice up here we have like directory 1 and then there's this page 3 and page 2 and there's this static folder and this counter folder so this is actually all of the resources 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 or you could serve up all of this stuff using like some sort of a deployment app like natla 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 so anytime 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 over I overwrite the public folder and do everything that you need it to do inside of there in this tutorial I'm just gonna give you a quick overview of using components in react now I could make an entire course just talking about using components in 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 a react is basically just a collection of JSX 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 then is import that into other files 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 j/s class and if I go over here my website I can click and you'll see this is the counter and basically all it does is just increments and decrements 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 and it has some some of this JSX some of this HTML 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 so 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 first thing we want to do is come up here and I'm just going to type import and then I want to type the name of the react 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 going to be the path of the file starting at the directory of our website so it's gonna be dot slash and then it's just called counter dot J s and actually I don't think we need the Jas 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 component so we're gonna refer to it just like this and then I can just do a forward slash and we'll close off this tag and so now when we save 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 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 react is to break up your website into these different components now there's another thing that you can do with these react components 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 to and we'll 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 can type this dot props and then I want to type the name of the variable that we passed in 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 can actually use this color to style this component so I can come up here to this div and we can make a style and then inside these style tags I could say color and I could set it equal to this stop props color so now this component is going to 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 can 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 them in on my website like I could create a component for like a navigation list I can create a component for the header of my website 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 plugins in Gatsby one of the cool things about Gatsby is it allows you to install and use external plugins inside of your project and these external plugins can do a bunch of cool things they can add elements to your website or they can make your website more powerful so you definitely want to consider using plugins if you're building a Gatsby site I'm over here in my web browser on this page right here it's Gatsby j/s org forward slash Docs four slash plugins this is sort of like the official plugins page for Gatsby and so if we just scroll down on this page you'll see there's this huge list of official Gatsby plugins that you can use and a lot of these plugins were just developed by Gatsby and there's also a bunch of plugins that were developed by the community and these plugins do you know wide variety of things you know 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 plugins and see if any catch your eyes see if any you know you might be useful on your website for example here's one for Google Analytics and for a lot of these plugins the ones that are official plugins there's like a they have their own page on Gatsby's websites so you'll see like this plug-in has its own page and there's like installation instructions and it tells you how to use them a lot of these plugins will require like a little bit of configuration to really get them going and then a lot of these community plugins will just link you to a github page and you can you know same thing just read the readme dot markdown 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 plugin and in this video we're actually gonna install a plugin for typography Jas and typography Jas 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 you know styles your website that's kind of like the plugin that we're gonna be using so the way that you install these plugins 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 just gonna type NPM installed - - save and the plug-in that I'm gonna be installing is this Gatsby plugin typography and what this will do is it'll install everything we need to run that typography J ass on our Gatsby website so I'm just gonna click enter and no package manager will go out and do its thing and 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 plugin so we have to let Gatz me know like hey we install this plugin and we want to use it at our website the way we can do that is by telling Gatsby inside of this Gatsby config jas file now this isn't a file that's going to 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 site so in my case it would be inside of this GA site folder so this gatsby config file should be you know in the same directory as the source folder in the public folder inside of this gatsby config dot JS file we want to type a few things the first thing we're just going to type is module dot exports and this is going to be equal to two curly brackets and then inside of here I just want to make an array so it's gonna be plugins and inside of this plugins array we're just gonna type out all the plugins that we want to use so in my case I'm using the Gatsby plug-in typography once you have this in here basically this is just telling Gatsby like hey we want to use this plug-in and this Gatsby is gonna read this config file every time it builds your site so what we want to do is just restart our website so restart our web server and I just have it running down here so I'm just gonna gatsby develop and we'll restart our web server and actually I think I the 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 styled 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 looked right so the typography is like a CSS framework so it's changing the look in the feel 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 ID is typography j/s and so actually what happened was got to be used that typography plug-in to add this typography 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 theme so you know what you should do is go over to this plugins website and play around with different plugins you know see how they work on your website see if you like them see if you don't like them and you know just basically use them to make your site better any way 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 was a scenario where we were creating a website and for every single page on the website 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 now one way we could do that would just be to copy and paste that header or footer code onto every single page and our website right so if we had a hundred pages we would copy and paste it a hundred times onto 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 and hair it 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 a content is inside that given page will just be inserted inside that layout so I'm gonna show you how to 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 layouts folder we can create a new file and we'll just call this index is an index dot JSON so 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 parenthesis with curly brackets inside and children and then here we have the actual layout of our website and 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 it's 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 demonstrate this I will type out some text so we're gonna say lay out and we'll say lay 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 a hello world and this is a paragraph we have these layouts up 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 a page three so if I go over to forward slash page - it's the same thing so on this page - it's using the same layout that our homepage used 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 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 can also define like a footer down here and that header in that footer 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 on your site so you could have your header up here and your footer down there and whenever you want change the way that the header or the footer looks you only have to change it right here on this layouts page or on this index file inside the layouts folder you don't have to change it on any of the other pages and that just makes your site more modular and more scalable so play 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 site 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 at 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 want to then change that title I would have to go through to every single page on my site and manually change the title I'd have 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 to 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 site so in this tutorial I'm gonna show you how you can do something exactly like that in Gatsby we want to open up this gatsby config 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 GA 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 our object you want to add this in we're gonna put a attribute it's gonna be called site metadata and this is going to be an object and inside of this site metadata object we can put any variables that we want to access about our site so I could put like title and we could give our website a title so say like traffic at amis website I could also give this something maybe like an author and we can 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 config file I don't have to touch the pages that are pulling this data so I'm gonna head over to one of my pages we'll just go to index J s 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 config dot J's file so the first thing I want to do is add what's called a graph QL query and graph QL is a querying language that was developed by Facebook and it was designed to be used with react and basically you can use graph QL in order to grab information from external sources in our case we are grabbing information from this gatsby config jas file so graph QL is a querying language a lot like SQL if you've ever used SQL before we can use graph QL to write queries to get information and that's what I'm gonna do down here I actually have some code that I'm gonna paste in here and then I'm gonna explain what it does so this code that I just pasted in is actually a graph QL query and what this is doing is it's going out to that config file and it's grabbing the title and the author so you can see it's just export Const query is equal to graph QL and then we have this single quote and then there's another single quote down here and then we have the query which is just the name of the query up here and then we want to grab information about the site and the site metadata and the title and the author so you what you want to do is just paste this down into your file so any files that you want access the site metadata you want to paste one of these graphed QL queries into there and as long as you have this graph QL query in here will actually be able to access the information that's inside the site metadata so once you have this query inside of your file you want to come up here and I'm here at this export default and inside of these parentheses you just want to put two curly brackets and we're just going to type out data and what this is gonna do is it's gonna inject the data from this query into our JSX and so now we can actually access the data from the query inside of our JSX code here so if i wanted to do that i could just come over here and we could actually print out either the website title or the author so why don't we do that inside of this header one instead of saying hello world why don't we print out the title of the website so inside of some curly brackets i'm just gonna type out data dot site dot site metadata and then i want to type out the name of the variable that I want to access then even the attribute I don't want to access so it's just gonna be titled so if I save this page and just a quick note whenever you modify your Gadsby config file you have to restart your gatsby development servers and you can see that the text over here is updated so now instead of saying hello world it says draft Academy's website and I can also access the author so let's put the author down here in this paragraph we'll just say and now we should be able to see the author of the page which is Mike so basically what we did was we stored information about our website some global variables inside of this config gatsby file so we stored a title and an author and then we were able to access that title on that author by running this graph QL query okay and then that graph QL query grabbed the data for us and injected it into our react function here and then we're able to access them inside of the JSX so that's sort of the flow of the data there's one more thing I want to show you which is a really cool feature that we can use with Gatsby which is called graphed iql and graph iql is something that i have open right here and the way you access it is by going to localhost 8004 word slash three underscores and then graph QL and you actually don't need this query part right here and this is a sort of a user interface a GUI for testing out graph QL queries so inside of here you could test out and write different queries that you might be writing obviously the query that we wrote over here this is a pretty simple query but if you have more complex queries then you're gonna want to be able to test them out so if I wanted to I could actually test out a query here so I can say like we could test out the query that we're writing on this page so I could say site and then site metadata and then inside of here I could try to access the title and the author and you'll notice what I wrote here is basically just what I have down here so I'm testing out this query and then I can run it and we'll see what returns back so without actually putting this inside my website I can test out the query and make sure that I'm getting the correct data back so this graft iql feature of gatsby can be really useful for helping you to test out your queries and really just supercharging your workflow in this tutorial I want to talk to you about using data in Gatsby now in the last tutorial if you're following along with the course we looked at grabbing data about the site so inside of our Gatsby config j/s file we had this site metadata in here and we stored two values about our website title and author and then on this index dot JSP we ran a graph QL query and then we were able to access that information from inside of our JSX so over here we have this website that's pulling the title of the website and it's pulling the author of the website this is a great way to use data and store data about your website but it's kind of limited right in other words you're only able to pull the data that you can store inside of this site metadata object so using gatsby we can actually access other types of data and one type of data that we can access is data about the files in our website so one thing that you might be curious if you're building a website is what are the other pages like how can we get information about all of the pages on our site in this tutorial I'm gonna show you exactly how you can do that we'll be able to use graph QL queries to figure out information about the different pages on our site therefore using that you can build things like directories or you can figure out you know what pages are in what directories and what pages are doing what it's really powerful so the first thing that we want to do in order to do something like that is we need to install a Gatsby plug-in and this plug-in is called Gatsby source file system and basically what this plugin is gonna do is it's gonna allow us to access information about our file system so I'm just gonna paste this in down here into my terminal and you can go ahead and copy this it's just npm install - - save gatsby - source - file system so we want to run that and we're gonna let node package manager install that on to our computer once that's installed now we just have to tell gatsby about it so i'm gonna come over here into my godspeed config jas file and inside of here I want to create a new attribute in here and you might already have something like this but it's gonna be plugins and so it's just gonna say plugins colon and then this is gonna be an array and so this is just an array of the different plugins on our site and I want to add in the plug-in that we just installed so you want to put this code in here and it's basically just saying that we want to use the gatsby source file system and then we're passing it some different options so we're passing it the name is source and then we're passing it the directory name forward slash source so this is basically just telling gatsby where all of the files on our website are located and then it can go there and you know figure out what we have available once you update your Gatsby convict JS file you want to restart your development server so I'm just gonna do that and now that this is restarted we can actually start using this gatsby source file system so I'm gonna come over here into my web browser and I'm gonna open up this graft ql' URL so it's localhost colon 8080 thousand forward slash three underscores and then graph QL and this is called graph iql and it's basically just a user interface for running graph QL queries so we can test out graph QL queries inside of here what I want to type out is just open and close curly brackets and if you type in like start typing in a then you should see this all file attribute should come up and if you type in F you should see that file come up comes up so this file in this all file these both have to do with the sort that with the plugin that we just installed and so because we installed that plug-in we're now able to see these two guys so I'm just gonna click on all file and then what you can actually do is just click if you're on a Mac you can click command enter if you're on Windows you can click control enter and that's gonna automatically fill out this query for us and so you can see it's all file edges node and then right here we're looking at ID so right now what we're doing is this query is grabbing the ID of all the pages on our website so if we look over here you can see that it's pretty much doing that so the ID is basically just the path so we have this index J s file we have this counter dot J's file we have this other index j s file this page to file and page 3 and those are all the pages that I have over here on my website so this is just looping through the file system for my website and just printing it out and in addition to printing out the ID so you can print out ID here and you can also print out a bunch of other stuff so if you just click control-space then this will give you an option for it'll give you like a drop-down with all the options so we could search for the parent children pages internal source instance name absolute path relative path extension so why don't we search for extension and we'll search for relative path so this will give us the extension of all the files and the relative path of all the files and I'll run this query and you can see that most of these are like JS files and then we have the relative paths for all the pages so a query like this can be really useful because not only does it allow us to loop through all the pages on our site but it allows us to access different information about all the pages on our site like you can see we have all these things here so if you were building like breadcrumbs navigation for example you could use this parent or this children attribute in order to do that you can use these absolute and relative paths to build links so you can build like a table of contents or something like that so using these all file queries is a really great way to and you know make your website more powerful so I'm actually going to give you a demonstration of building something like a navigation list I'm gonna go over here to my index dot JSP and this is just like the home page of my website and I'm gonna be kind of pasting some different code in here so you can just kind of follow along with what I'm doing sort of implement your own version of this so the first thing I want to do is just make sure that I have this data attribute set up here so I want to pass the data into my website and I'm just going to get rid of these two guys and I want to change up this query so right now this query is accessing the title and the author of the site metadata but we want to change it up so we actually want it to be the query that we're similar to the query that we ran over here and the query I'm gonna be using is gonna look like this so I'm just gonna paste this in and you can see it's just what we did over there and that I grew up in that graph QL but now we're accessing relative path pretty sighs extension and birth time so this will give us some interesting information about all the pages on our site and then up here in our JSX we can actually grab that information and use it so once again I'm just gonna be pasting some code in here and I'm gonna go ahead and do that and basically what I tasted was a table and this is just a basic sort of JSX table up here I have the table head and we have these table headers which are basically just displaying all of those attributes and then inside the table I'm accessing all of these attributes so I'm actually what I'm doing is I'm looping through the results of the all files query so that all files query we look over here on the graph QL you'll notice that it returned an array so returned in an array of all the different pages on our website so what I'm doing over here is I'm looping through all of the elements in that array and I'm mapping them to basically table rows so rolls row rows in the table so each one of these like note relative path each time through the loop that's gonna represent a different relative path of a different page on the website so if I save this file and I head back over here to my normal website you'll notice that we have a table that's just listing out all of the pages and our website and this isn't formatted perfectly but you can you kind of get the idea right it's giving the relative path of each of the pages on our website the extension how long ago it was made and then the pretty size so basically like how big the file is and this is just one example of being able to loop through all of these pages so when you're able to access all this information about the pages on your file system it really makes it a lot easier to build out certain navigational elements of your website and also just to have information about the different pages on your website in this tutorial I want to talk to you about accessing markdown data in Gatsby now if you've been following along with this course you'll know that we've been learning how to grab data and bring it into our Gatsby files so I can go out and I can grab information about the Gatsby website and I can also get information about the overall file system that we're using so if you look over here on this page right here I'm basically have a table that's listing out all of the pages that are inside of my website but here's a question like imagine that instead of just listing out pages you actually wanted to access information inside of those pages so this is all information about the pages right we have the relative path the size the extension when it was created but this isn't actually giving us it's only giving us information about the page it's not giving us like what's inside of the page itself and if you're trying to build like a blog or something and especially if you're trying to work with markdown you're gonna want to be able to access more information about the page you're gonna want to be able to like figure out okay what information is actually inside of these markdown files that I'm creating and be able to use that information to display those pages better so in order to do that we need to actually install another plugin and before I install the plug-in I just want to make a new markdown file so inside of my pages directory I'm just gonna make a markdown file called my first post and this will just sort of represent like a markdown file post that we can access and inside of this post I want to start by writing something called front matter and frontmatter is basically information that you can write about the different pages or the different markdown pages on your website so up here in between these three dashes I can actually write some variables so I could define a title and we can just say that this is like my and then I could also define something else like an author so I can you know define like who's writing this or get to say to me so this is called frontmatter and this is basically just data that you're defining a the data in this file so it's metadata and then we can just put some content so this is the content in my markdown so what I want to be able to do is run a query to be able to access this markdown and first thing I'll point out is if you notice over here the table that we're looking at here is actually updated and so now it's including my first post out markdown and over here I'm using the source file system plug-in in order to display this stuff and so automatically when I create this new markdown file it gets added into our table here but instead of just being able to figure out that we have a markdown file I actually want to be able to access the information inside of this file so I want to be able to access the actual markdown content right here and then I want to be able to access these frontmatter variables up here and if I can do that then I can create a listing on my page that will list out all of these files or all of these markdown files and the way that I do that is opening up my terminal and I actually want to install something and this is gonna be a nother Gatsby plugin and I'm just gonna paste this down here and you'll notice it's just NPM install - - save gatsby transformer remark so this is gonna be a plug-in that's gonna allow us to do some stuff with those markdown files so I'm just gonna click enter and NPM is gonna go off and do its thing and once that's done running we can actually go over to our Gatsby config file and tell gatsby that we want to use it so over in this gatsby config file down here inside of this plugins array I'm just gonna add another entry and we're just gonna type out the name of the plug-in that we just downloaded so it's just gonna be gatsby transform or remark just like that so once we have that in here I just want to restart my gatsby development server and now that this is running I want to head over to this graph iql user interface and we can start trying to access the information in this markdown file since you just added that new plugin we now have access to a couple new attributes inside of this graph QL and you want to just start typing out all and what you should see is all markdown remark and you can also just start typing markdown and you'll see that these two new options have appeared so markdown remark and all markdown remark and these are now things that we can use to query the markdown files in our file system so I'm just gonna do all markdown remark and I'm just going to click ctrl enter or command enter and this will start up a default query for us so this is just going to query through all of the markdown files on our site so if I play this query you'll notice over here we have the basically like the ID of the path so it's just pages my first post dot markdown and if I added in some other markdown files then more entries would show up here so let's do that let's add another markdown file we'll just call it markdown too I can give this some frontmatter as well so we'll just give this a title so over here now when I replay this the new markdown file should show up and so here we have that markdown to file showing up in addition to just accessing the ID there's also a lot of other things we can access so if you click control space then this list is gonna pop up and this will give you everything that you can access about the markdown file so one cool thing is this HTML right here and this HTML will basically just spit out the actual HTML of the markdown file so you can use this HTML attribute in order to insert the content of the markdown file into one of your web pages we can also access that information that was inside of the frontmatter so if I just type out frontmatter you'll notice by default it's China query for date and parent but since we only have title we want to just query for the title and you'll notice that it's giving us the title of both of these from matter or both of these markdown pages so you can use these markdown queries in order to access information about the markdown files that are in your site hey thanks for watching if you enjoyed the video please leave a like and subscribe

Channel: freeCodeCamp.org

Views: 52,766

Rating: 4.8218184 out of 5

Keywords: gatsby, gatsby course, gatsby tutorial for beginners, gatsbyjs, gatsby js, gatsby react, gatsby tutorial, graphql, react, gatsby blog, static site generator, netlify, gatsby netlify, markdown

Id: mHFAM0CXviE

Length: 71min 16sec (4276 seconds)

Published: Tue Oct 23 2018