Gatsby JS Crash Course

[Music] hey guys being a programmer or web developer or any job at all where you sit all day can do horrible things to your back and your health in general over time so I would definitely suggest looking into a stand set desk and anthro desk has affordable and quality solutions for maximum health and productivity you can choose from different frame widths depending on your needs I actually just got one myself and I love it they also offer accessories like standing converters and floor mats so check out anthro desk com or click the link in the description below hey what's going on guys welcome to my Gatsby j/s crash course if you do not know what Gatsby is it's a static site generator that uses react and it also has a rich data plug-in ecosystem to work with things like headless content management systems api's databases your own file system and much more ok so it has has a slew of plugins that can really extend the functionality of this beyond just a regular static site generator all right it also uses graph QL to query things like files from your file system for instance we're gonna be using markdown to create a blog on our static site and we will be using graph QL to basically query the file nodes and bring those into into our site all right now in web development you have many different tools whether it's a framework a library a CMS whatever it may be and some are practical and some are not okay some are really awesome technologies but they're not very practical when it comes to you know a one-man show a fleet a freelancer that wants to create something of substance for a client and this is something that's very practical for freelancers okay if you want to build like brochure type websites and you don't want to do the old you know HTML files where you're constantly repeating yourself you have the same navbar on every single page this is awesome because you can just create a simple react component a simple navbar or whatever it may be sidebar menu something like that footer and just included in your layout and then you no longer have to worry about that you can just simply create new pages and that will automatically show up so it's very very practical in that sense and it can be very easy if you're making just a brochure website if you're adding a blog or you're adding you know if you're at it if you're dealing with api's and stuff like that it can get a little more complicated you'll see when we create our markdown blog there's quite a bit of configuration it can be a little overwhelming but once you get past that and you already have those files created it's simple you just create your folder with your blog post and it will automatically show up in the list and you can click on it and read you and people can read your blog posts alright so we're just going to jump in and get started it has its own CLI that will generate a site for us with some boilerplate we'll take a look at that we'll create a menu component and we'll work on the blog so we'll do as much as we can within an hour so I like to keep my crash courses around an hour so let's jump in and get started alright guys so we're gonna jump in and get started here now first thing you're gonna want to do is install the Gatsby CLI and you want to install it globally so we're gonna go ahead and do NPM install or NPM I - g4 global and then Gatsby - CLI okay and obviously you need to have no js' installed so you have access to NPM alright so mine went really quick because I actually already have it installed once you do that we'll be able to generate a new application with the gatsby new and then the name of the app so I'm gonna call this gatsby underscore let's do underscore crash underscore course that's fine all right and I'll have all the code for this in the description as well and like I said we're gonna we're gonna give it a shot deploying it to nullify I haven't actually done it yet but we'll we'll try it together so what's happening now is it's just generating all the files for us so now we should be able to CD into gatsby underscore crash underscore course and from here I'm just gonna open up visual studio code or whatever you know whatever text editor you want doesn't have to be vs code I'll upgrade later and now I'm going to use the the internal or the integrated terminal from now on alright so let's take a look at some files here if we look at our package dot Jason we have some dependencies of course Gatsby Gatsby link is so that we can use the link tag like you would do in regular react and then Gatsby plugin react helmet and react helmet is used to basically generate head information for your pages down here we have some scripts gatsby develop as what we'll do to run our server gatsby build will build it out we can also do testing and so on and then it looks like it also includes prettier as a dev dependency okay I'm also using the prettier extension for vyas code so that's the package.json file we have some config files here I'm not really gonna go over these just yet we will be working in these later when we start to implement our blog with markdown but the main the main stuff is in this source folder okay just like with any react application we have a components folder you'll see we have a header JS file we have pages which includes an index j/s a 404 page and a page two and then we have a layouts folder which has an index j/s and an index dot CSS alright so if we were to look at a page let's look at the index page it's basically a functional react component we have an arrow function here called NN it's called index page we just have a div so basically this is the render and we're linking to page two here using link which comes in from Gatsby link and then we're just exporting the page all right so when you want to create a page this is all you have to do this is the second page and this is the 404 page all right now if we look at layouts if we look at index j/s we're bringing in helmet so helmet has to do with the head and so you can see we can have a title which we can get from data sight sight metadata title we can include our own description and keywords and stuff and then we have our header okay so our head our component and then we have some styling and you can use global styling you can use sass there's actually a sass plug-in you can use styled components there's there's plenty of different options when it comes to styling and then down here we just have a standard graph QL query just to get the site metadata and all that alright but basically this is your layout if we look in hetero js' this is our header component just has a bunch of styling and has the site title in it as well okay and that's being passed in here so let's go ahead and run the server by just saying gatsby - develop or not - what am i doing it's gasp gatsby space develop weirdo so what this will do is it'll open our site on localhost 8080 and there it is Gatsby default starter so let's actually put this to the side here and just have these side by side and just to let you know where everything is this this purple area this is the header component you can see the background I can actually change this if I want puts a background and I will say coral save and it actually has hot reloading so as soon as I save this updates there's no need to actually reload the page I don't want coral actually let's use let's use a dark grey there we go and you can change some styling here if you want if you wanted to move your styling to a CSS file that's fine as well here we have just a link which is comes in from Gatsby link this is used instead of an a tag with an href it's gonna be linked with a to attribute and anyone any of you guys that have dealt with react recently you probably know that then we just have the site title now the site title we can change in the layout if I go to index j s and let's see site title or is it not in the site title it's in config so let's change it to will say gatsby crash course and save okay so you know if we change this config file I think we have to restart the server so let's control C and run Gatsby develop again and there we go so if you change the config file you do have to restart the server all right we'll be adding some plugins here later right now we just have the helmet plug in so if we wanted to change let's see let's go to our layout and XJS so if we wanted to add a description here we could say for a description this is a sample website for the gatsby crash course and then for keywords we can put like gatsby react I don't know tutorial whatever you get the point so if we save that we take a look at our source code well actually we can't see it here because we're running our server but if we look at let's see let's go to elements and pull this down and we look at our head you can see right here a description there it is there's our keywords alright so when we build out our site we'll see those and I'm just gonna move this to the bottom alright so let's change the index page up a little bit so in pages index J s we're just gonna say welcome to my website we'll put let's put one paragraph in here and we'll just say this is a sample site for the Gatsby crash course and I don't want this link to go to page two I'm gonna get rid of that and save and there we go so there's our home page nothing special nothing nothing we build here is gonna be is gonna be is gonna look good it's just to get you to understand how to use Gatsby and then you can build your own sites of course you can bring in bootstrap and/or materialize whatever you want to use use the grid however you want to style your site so but we're going to use the default styling so if we want to create a page all right let's say we want to create an about page all we have to do is create a new file in here called about dot j/s and then we need a functional based component I use a an extension in vs code called or is it es7 react Redux graph QL and I can do our FC tab and it just gives me a functional component if I do our CC tab it'll give me a class-based component alright but we just want a simple functional based component and we're gonna just cut the export default and we're gonna say Const about page equals our function and then we'll make sure we export it down here so explored about page alright and then here let's just put let's see what did the index page have an h1 we'll go ahead and just copy this and we'll say about us and let's actually just put some sample text in here I'll say lorem 40 tab and save and then if I just go to slash about there it is alright so if you've worked with next J s which is react on the server it works in kind of the same way you just create your page and it's it's available you don't have to bring in react router you don't have to create any special routes or anything like that you just simply create the page in the pages folder alright let's create one more page static page here so we'll say new and let's call it services I will say services dot J s and I'm just gonna copy what we did in the about paste that in we'll change this to service services page and we'll say our services I'll go ahead and make this two paragraphs and change the export to services page and save and now all we have to do is go to services and there it is alright now we'll probably want a menu because we want to be able to get around so let's create a menu component so what I'll do I'm just gonna close these out all these files and we're gonna go into our components folder and create a new file called menu dot J s alright now from here we're going to import shell just to my RFC tab make it a little easier and we're going to cut out the export default we're gonna say Const menu equals and then we'll export it down here okay now I'm gonna add some inline styling here for our menu so let's go let's see well you know what we don't want the return did that get added to our pages it did we don't actually need this what we can do is get rid of the curly braces since we're using an arrow function we can get rid of the curly braces and we can get rid of the actual return so we can go like that alright and if I save that we should still be able to go to about without any problems okay same thing with services just to make it a little cleaner so we'll get rid of that bring that up there get rid of the curly brace and there we go good so in our menu let's do the same thing we'll get rid of the return and the curly braces and then what I want to do is I want to add a little bit of styling so we're gonna put a div here and we can say style equals and then we want double curly braces and in here I'm gonna say background let's do background and we'll do light gray so we'll do f4 three times let's do padding top okay and this isn't standard CSS you want to make sure you use camel case don't don't do padding - top okay so let's see that's our div and then inside here will have a UL and inside here let's do style and we're gonna do a list style of none we're going to display flex because I want it to I want it to be displayed horizontal and then I'm just going to add in here justify content and we're gonna set that to spaced evenly alright so that should do it for styling now we'll go ahead and add our list items so let's do I will say Li and let's put 4 so I'll do Li times for using Emmet and then in each one will have a link of such a V capital L so link 2 equals okay so link to this will be slash and it's gonna be home alright let's make sure we bring in link so we're gonna say import link from Gatsby - link so that's our home I'm just gonna copy this so we'll have home we'll have about and we'll have services and then we're also gonna have a blog but I'm actually I'm not gonna put this in just yet so for now we'll just have our static pages like that and let's save this alright so now it's not going to show up yet even if I reload it's not gonna show up because we haven't inserted it into into our layout okay and that's what we want to do so let's go to our layout index jas and just like they brought in the header here we're going to bring in the menu so components menu and then we're just gonna put this let's see let's put this right below the header which is right here so we'll say menu like that and save reference none is not defined okay that's because I forgot my quotes guys probably noticed that and save and there we go so there's our menu I don't like this space right here so let's see let's go to our header or it has margin bottom I'm gonna set that to zero and there we go cool so if I click on home brings us home services about it's not it's not the best-looking thing in the world but you can see what I'm doing here I'm creating separate components and they're gonna show on this is gonna show on every page rather than just building a regular HTML site where you'll have to include this on every in every file not to mention you have all the benefits of react now we have this inline style you don't need to do this but I just figured since the the header has it I just added it to the menu but let's say I want to get rid of these underlines and change the color of the links here I'm gonna go to layouts index CSS and this is the global CSS file so let's go to write to the a tag here and let's just say color will do color 333 and we'll say text text decoration equals none and save and there we go alright so that's basically how you can create like a justice regular static site just a brochure informational site you can do anything you can do with react pretty much now what I want to show you is how to implement a blog now it doesn't have to be a blog it could be like let's say events maybe you have a list of events or something like that maybe you have a list of I don't know maybe it's like a school type website and you have a list of homework just any kind of data but we're gonna just use a blog for simplicity so first thing we'll do before we do any configuration let's create a couple blog posts okay and I'll just show you what what you would do to create those posts we're gonna make it so that you just go into the pages folder and let's say let's create a new folder and you can call this whatever you want this is gonna be our first blog post you probably want to put the date that's what I've seen that as a convention so we'll put like 2018 and we'll say oh four - oh nine and we'll call it post - we'll say post - one all right and then inside here we're gonna create a file called index dot MD okay it's gonna be a markdown file and with vs code I have an extension installed that will give us a preview of any markdown file we open now in this markdown file we're going to have our post which will be the content then we also have something called frontmatter okay so our frontmatter is gonna go in between two triple hyphens okay or dashes and we're gonna have a couple fields here so we're gonna have a path we're gonna specify this as whatever that the path the URL we want for this post I'm gonna say post - one okay so that's gonna be our path and let's define a date and by the way you can put whatever you want in here you don't have to put this stuff aside from the path and I guess a title but I'm gonna put a date we'll say the same date as the folder will say 2018 - oh four - oh nine and then we'll have a title okay so for the title we'll say my first Gatsby post and let's also do an author okay again not required but I just want to put one so I'm going to just put my name all right so that's our frontmatter I'm actually going to get rid of that preview it's not even working well actually it is working it just it's not gonna display the frontmatter so under here is where we actually create our content so I'm just gonna say this is my very first blog post in Gatsby alright so that's it that's a blog post we'll save it and this is I mean once you get your everything configured and you create your clients website you simply tell them to do this to create a blog post is it as convenient as logging into WordPress and doing it from there maybe not but you know it gives them an easy way to add content they don't have to add any HTML you can show them a simple markdown cheat sheet or better yet direct them to my markdown crash course and if you wanted to make like something bold you could just surround it in asterisks or that's that's actually italic it's double for bold but things like that so you can use that instead of HTML tags but let's save this and let's create one more post so we're gonna create another folder in pages called 2018 - oh for - 10 - post - - ok and then we'll create another index dot MD file and I'm just gonna copy the first one we did paste that in there we'll change the path to post - we'll change the date we'll change this to let's say my second Gatsby post we'll change the author to John Doe and we'll say this is my second post in Gatsby alright so now we have two blog posts now just doing this isn't going to do anything whatsoever there's no way for us to get to these pages what we'll have to do is we need to install a couple plugins ok so what I'm gonna do is I'm actually gonna make this bigger and I'm gonna stop our server with control C and looks like by clearing isn't working again so just open up a new terminal alright so there's there's basically three plugins that I want to install so we're gonna say NPM I the first one is called Gatsby - source - file system I can't talk and type at the same time sometimes system so what this does is it allows us to work with data from our computer's file system and we need this to be able to query our blog posts from our file system now since we're using markdown we're also gonna need Gatsby - transformer - remark and this will allow us to basically transform blog posts that are written in markdown MD files like the index MD files we created on the local disk into HTML for rendering that's what this is gonna do and then we also want Gatsby - plugin - catch - links and what this will do is it'll intercept local links for markdown and other non react pages and does a client side push State to avoid the browser having to refresh the page so we want to install these three plugins here let me just make sure I spelled everything right cuz I was talkin all right so let's run this have gotten permission issues installing these on windows before so hopefully that doesn't happen all right good so it looks like that worked if we look at our package dot JSON file you can see that we have our plugins here all right now after we install these plugins we need to configure them okay so we have to go to our gatsby config dot j s you can see we have an area for our plugins we already have the helmet plugin so we need to add some stuff here now in this array let's put this on a new line we're going to put in a comma and let's put in here gatsby and we'll do our dash plugin - catch - links okay now the next one here we want to put in our file source filesystem plug-in but we have some options as well so we're actually going to put in a set of curly braces and we're gonna say resolve and then the name of the plug-in which is gatsby - source - file system alright and then we also want to put in options which is going to be an object and we want the path so here we're going to use back ticks because we're going to use a template literal we want to put in this syntax which allows us to put a variable and we're just gonna do double underscored our name meaning the current directory and then in the source folder and then in the pages folder so basically we're just showing where we want to look and it's in the pages folder that's where we're putting our blog posts that's what we want to put right here and then we just also want to put a name of the folder which is pages ok so that will configure that then we want to put a comma right here and we want to add our last plug-in which is the transformer remark so Gatsby - transformer - remark having a lot of trouble talking and tight typing at the same time today so that should be it as far as this goes as far as adding our plugins to this file so let's save this and let's it let's at least make sure we can run our site so we'll say gatsby develop make sure we don't have any errors at least alright I'll go ahead and open this and let's just reload it alright so this is still working that's that's a good sign we can close the config file now before we get into this we need to add to this gatsby node.js file we also need to create a template for our blog post but before we get into that let's go back to our browser and since we're using graph QL we have a tool called graphical available to us and if you've used graph QL before if you've watched my five-part graph QL server series then you've worked with this but we want to do localhost 8080 well alright and then this is this allows us to basically just write queries and this is an actual query to get all of our files within the pages folder if I go ahead and press run here I don't know if this will automatically show up on yours it might be on mine because I've already ran it I think it might have been my last query if not just go ahead and put that in there and I'm not going to go over graph QL in-depth here it's basically a query language and it's formatted like the data is formatted so if we go ahead and we run this you'll see it's going to give us back this data object that has all file and edges edges is basically going to be an array of our nodes and our nodes are our files okay and you can see we're getting the eye d which is the complete path and file name of each file so our 404 about page to index and we also have our blog pages here as well so basically what we're doing is we're getting the edges we're getting the array of nodes or files and we're just requesting the ID and it's giving us all that data all right now when we make our query to get our markdown files we're going to use the markdown transformer so let's put a different query in here let's get rid of this and instead we're gonna put in some curly braces hopefully you guys can see that I guess I can make this bigger you know what let's let's just make this big all right so let's say all right here it even pops up all markdown remark and if we wanted to do sorting and stuff like that we could put that in parentheses right here but I'm not going to get into that and then let's do edges let's do node and then let's get our frontmatter now remember frontmatter if we look at one of our posts is going to be this data here so we can get any of this data that we want so let's go well I can't see with that in the way can I so frontmatter and then we can pick and choose what we want so let's get everything we'll get the path we'll get the title and there's no don't put a comma if you haven't you worked with graph QL it might look a little funny without a comma but we don't do that in our query so date and author oops date author and let's see if that works so if I run that and there we go you can see that we're actually querying querying our markdown files and we're getting the frontmatter now if we want the actual post we could get that it's not part of the frontmatter so we're gonna go underneath and we can get excerpt so let's run that and now you can see we get the actual content in excerpt so we're using graph QL to grab our markdown files and that's basically what we're gonna do from within our blogpost template all right so just remember this this type of query so let's go back up let me bring this back down let's go back to our browser let's get rid of close the post up and let's work on let's do an end a blog index page first which will just show the listing of posts and then we'll get into the actual individual post pages which are these so I'm gonna create a new page or a new file called blog dot J s all right and we're just gonna grab let's grab the index file here and copy it and then we'll just change this to vlog page we'll change this to blog page all right and then what I'm gonna do is in the h1 will just say latest posts and then we need to query our posts just like we did in the graphical interface so to do that we're gonna go down here below the or I'm sorry above the export and we're gonna create a variable here we're going to export Const and let's call this page query and we're gonna say equals graph QL and then to make a graph QL query we need our back techs like this ok so our query will go in here so we'll say query and we're gonna say blog index query and then we can actually copy what we just did in graphical so this right here because what we want is this stuff right so I'm going to paste that in and we actually don't need the excerpt you don't need to include that we do want all this frontmatter and let's see i also want to get the ID which is outside of the frontmatter and the reason I want the idea is because when we when we loop through the pit through the posts we need to have a key if you're if you have any experience with react when you map through anything you want to have a key or you're gonna get that little warning in the console so I want to use the ID as the key so will requite where we will request that as well all right now what we'll do is go back up here and in order to get this data we need to pass in curly braces and data ok like that and let's see we want to map through it so we can say data and then dot markdown remark and we want the edges which is basically the array okay remember it's edges and then we have the nodes inside but we want to map through the edges we want to map through this array and we're gonna say post for each one and we'll set an arrow here and then for each post let's let's create a div and then this is where we're gonna have to add our key so we're gonna say key equals post dot node dot ID and then in here let's put an h3 let's say post dot node and then we want the title and remember the title is in the front matter so we want to say front matter dot title okay underneath that I'm gonna put a small tag and I'm gonna say posted by and then we can say here post dot node dot frontmatter dot author okay because remember we included the author I believe if I see yeah if I save this it's gonna get rid of the spaces anyway so what might as well not do that so posted by the author and that's let's say on and then here we'll say post dot node dot frontmatter dot date because that's included as well all right and then under the small tag I'm gonna put two line breaks like I said this is not gonna be styled very nicely and then we want a link to go to the actual post okay remember in the front matter we have that path very that path value so we're going to use our link we're gonna say link to actually we don't want quotes here we want link to post dot no dot frontmatter dot path and here let's just say read more okay and then under the link I'm gonna put two more line breaks and let's also put an HR to separate each post all right so let's save that looks like we're getting an error here expected name found hold on a second did I do this wrong oh yeah I have an extra set of curly braces this shouldn't be here so this one let's get rid of that and that and save let's go down to the bottom here okay so it looks like it compiled successfully now what I'm gonna do is add to our menu component let's add the blog okay save and yeah let's cross our fingers where's my browser one second all right so we have our blog let's click on it and there there we go latest posts my first Gatsby post posted by Brad Travis e on this date and we have our second Gatsby post so that's our index page now if I click read more we're gonna get a 404 because we still have quite a bit to do in order for this to actually register as that post ok as the posts supposed to so let's go back and we're gonna have to create a template for our blog post so we're gonna create a folder in the source called templates okay and you can call this whatever you want I'm gonna call it blog - post dot J s okay so this is gonna be our template let's go ahead and import I will say import react from react now the way they have prettier set up is not to use semicolons if I save it gets rid of the semicolon which is funny because my prettier extension I have it envious code I haven't set if I forget a semicolon it adds it because I prefer to use them but apparently you know some platforms like like like Gatsby like view J s they encourage not using semicolons but it's all preference so here we're going to let's say sports default function templates and it's going to get passed in data and what we want to do is create a variable called post and we want to get this from our markdown remark so we can get that from data dot markdown remark oops don't want to do that so let's see underneath that we're going to have our return and we'll put in a div here and I want to have a like a back button this member this is for the individual post so I'm gonna have link which I actually need to bring in so lets import link from oops gatsby - link so right here will say link - and let's set this to slash blog because that's the index page for the blog and in here we'll just say go back ok and then I'm just gonna put an HR underneath again this isn't going to be pretty and then we'll have an h1 which will have the title so we can say post dot frontmatter dot title ok we don't have to include the node now because we're dealing with single posts we're not dealing with we're not mapping through the edges array alright and then under that I'm gonna have an h4 and we're gonna say posted by so same it's basically going to be the same stuff that the index page has except it's gonna have the actual content so let's say posted by post dot frontmatter and by the way we haven't created the query yet to actually get this we'll do that below on post dot frontmatter dot date and then to actually set our HTML we're gonna have a div and we're going to use reacts dangerously set inner HTML so dangerously set in our HTML and we want to set that to double curly braces and we want to do double underscore HTML and set it to post dot HTML okay and this is just standard react this is going to allow us to actually have HTML markup inside of this alright so that takes care of our template it's very simple now we need our query so let's go down here yeah we'll go down to the bottom here and let's say export Const Post query and we're gonna set it to graph QL put in our back tix and let's say query and we'll say blog post by path and we're gonna pass in money sign path which is gonna be a string and then instead of using all markdown remark because we use that before because we're getting all of our posts now we're getting a single one so we just want to use markdown remark alright and then we pass in here inside these curly braces this is gonna look a little weird so we're gonna say frontmatter and then set some curly braces and we're gonna say where the path and then another set of curly braces is equal to EQ is equal to the path that's brought in so money sign path I know that looks a little weird and we want to get the HTML and then we also want to give us no comma we want to get the front matter okay we can define what front matter we want which is basically everything we want the path the title the author and the date okay now remember you this doesn't have to be a blog you could have other stuff here like event location or something like that but we're using a blog so these are these are relevant pieces of data all right so let's go ahead and save that now this still isn't gonna work in fact let's let's restart our server control C Gatsby developed all right so let's go back here and reload and let's click read more now we're still getting a 404 page the reason for that is basically even though we created our template in our query it doesn't know what this is it doesn't know to that this post one should actually go to that that particular post so we have to do one more thing or edit one more file I believe and that is Gatsby - no js' alright so we're going to get rid of everything here and this may seem a little confusing but we basically need to we need to use the create page API ok and that that's it does exactly that it's going to make it so that we can have post one post two and any other pages so that we can create those so we're gonna bring in the path say require path which is just a standard nodejs module and then say sports dots create pages and gatsby you it's gonna it uses redux which has action creators and it kind of kind of is happening it happens in the background but we need to pass in here bound action creators okay this is probably the most confusing file of all I don't even understand some of this stuff but we want to pass in that and then graph QL we're basically registering it so registering our post so that we can use those URLs alright so now we're gonna just set an arrow function and we're gonna say Const we're gonna use destructuring here and we're gonna pull out create page from bound action creators like that all right and then what we need to do is define our template so we're gonna say const post template and we're gonna use the path module and just say path resolve and the post template is gonna be in the source folder it's gonna be in templates and it's gonna be called or it is called blog - post dot JSK remember that's that's the actual template for the page alright now we want to do is return a graph QL query so we want our back ticks here I'm sorry we want to go like that and then have our backticks oops backticks and then in here we'll put in some curly braces again we want to do all I can probably just copy this from from our blog page this right here let's see where does this end this ends here right so we'll grab that and paste that in here I think yeah we want edges node we want the course we want the HTML we want the ID the front matter so that should be good now this will actually give us a promise so we're gonna go down to this closing parenthesis and we're gonna say dot then and then pass in our response we want to check for errors so we're gonna say if res dot errors then we want to return and we're just going to return a promise reject so promise dot reject and pass in res dot errors okay now if there are no errors so we'll keep going down here then we want to say res dot data and we want to call all mark down remark dot edges and we want to loop through these so we're going to use a for each loop and in here we want to put in some parentheses and then our node object are no data and we're going to create an arrow function here oops it should be here like that and then we just want to call create page okay an inside create page we pass in an object with the path and we can say no dot frontmatter and we want to get the path for that particular post and then for a component we want to say post template which is just our variable that's up here that includes our actual template all right so that should do it hopefully unless I mess something up but it's we're basically just registering it using the create pages API that's included with gatsby to be able to have post one go to the actual post have slept post to go to the actual post so basically look at whatever this path is and have that register okay so hopefully that makes sense I think that this file oops this file is the most confusing of all to me at least but let's try it so well we will have to restart the server and hopefully it works all right so it looks like we have an error here something to do with our promise cannot read path of undefined front oh I forgot a tee in matter I love when the error is that easy all right I'm just gonna restart this again okay so hopefully it looks like it's gonna compile successfully good let's go back and there it is we're already on it post one now works go back click on read more for the second post and there it is so we can now continuously to create blog posts over here in our pages okay so you can instruct your clients to just simply create a folder with the date it doesn't mean eh this doesn't matter the name of the folder doesn't really matter what matters is the path but no matter what path you choose it's gonna now be put on the blog in fact let's test it out let's add one more post so we'll say new folder 20 1804 - 11 - post - 3 and we'll create a new file called index dot MD and we'll just grab just grab this close that up paste that in there we'll call this post three for the path change the date I third Gatsby post third and let's save it and let's reload did I stop the server you must set the path when creating a page alright let's just restart this Gatsby develop and hopefully the up there it is my third Gatsby post-its click on it and there we go alright awesome so we have a static site with a blog and I know that that there was this quite a bit of configuration if you haven't used graph QL before that probably confuse the out of you but graph QL is is an awesome technology I would suggest watching my my five-part course where we create a graph QL and Express server or just any video it doesn't have to be mine but it's definitely a technology you're gonna want to get into if you are you know if you're looking to stay current in in the world of web development alright so I think that's gonna be it for building the the actual site like I said it's nothing special to look at but it should gave you some good insight on how Gatsby works so now what I want to do is try to push this to gonna push it to github and then we're going to try to deploy it with nullify all right so let's deploy this bad boy so we're going to go to github.com and I'm going to create a new repository I'm gonna call it Gatsby crash course will say sample websites built with Gatsby alright so let's go down to our command line I'm gonna stop the server and actually it's open up a new terminal here and I'm gonna say get in it so we're gonna initialize a git repository then we're gonna do git add all so get add dot and then we're going to get actually hold on oh yeah ok so it already has a good ignore file good so now let's do get commit - a.m. and we're gonna say we'll just say initial commit okay now we're going to grab the remote link right here or there I'm sorry the remote command and paste that in and then we're going to push to our remote git repository I just got to put my stuff in here oops something happened where I think my SSH keys are gone or something I don't know why I have to do that all right so let's reload our repository and there it is I'll probably change the the readme later on but that's fine for now now what we want to do is go to net liffe I notified comm say get started for free we want to choose github and sign in with github you might get like something that that says you know is it okay to sign up with github just click OK let's say new site from git we're gonna choose github we're going to authorize net Liffe I put in your password okay so we want to choose C got a lot of repositories here I want Gatsby crash course let's see so it's gonna run Gatsby build remember that's part of the package Jason script be at Gatsby build it's gonna build into public and I think that's that's pretty much all we need to do we don't need to change anything here I don't believe so let's say deploy site alright so deploying your site looks like it's still going that in what's awesome about net will fly is of course you can add your custom domain you can do that with with any service and you can add HTTP really easily okay basically in one click it says so that's really cool there's also contact forms so you don't have to build your own back-end just just to have a contact form it's a really really awesome service and they give you a lot for free actually alright so it still says site deploy in progress alright so it looks like your site is deployed now you could keep on going and set up a custom domain I'm not going to go through all that it's very self-explanatory but let's check our site so it gives you a a custom URL which is this right here it's just gonna make up something weird dotnet Liffe I let's click on that and there's our site we're now deployed to the Internet let's try the about services the blog let's click on a blog post and everything works perfectly and it's very fast it's that's one thing I didn't really talk about about Gatsby is it's incredibly fast everything is just instant alright and I'll go ahead and leave this up too as well if you guys want to check it out I'll put it up with the link in the description but hopefully you enjoyed this and hopefully you'll look more into Gatsby there's a lot more you can do you can integrate with different api's you could integrate with WordPress it's it's it's a really cool technology and I think it's something that's very practical which is it's kind of rare these days to find something that you can actually use you know on your own without a big company without spending incredible amounts of time to create something you can just whip up some nice static sites some really fast static sites for your clients so thanks for watching guys if you like this crash course please leave a like if you're not subscribed and you like this content please consider subscribing please consider following me on social media supporting me through patreon anything you guys can do just just the like is is appreciated so thanks for watching and I'll see you next time hey guys being a programmer or web developer or any job at all where you sit all day can do horrible things to your back and your health in general overtime so I would definitely suggest looking into a stand sit desk and anthro desk has affordable and quality solutions for maximum health and productivity you can choose from different frame widths depending on your needs I actually just got one myself and I love it they also offer accessories like standing converters and floor mats so check out anthro desks comm or click the link in the description below

Channel: Traversy Media

Views: 210,682

Rating: 4.9419794 out of 5

Keywords: gatsby, gatsbyjs, gatsby js, gatsby react, graphql, react, gatsby blog, static site generator, netlify, gatsby netlify

Id: 6YhqQ2ZW1sc

Length: 64min 33sec (3873 seconds)

Published: Thu Apr 12 2018