Gatsby Crash Course - Build yourself a blog.

hey guys and welcome back to the channel now in this video you guessed it we're going to be tackling gatsby now if you've never touched gatsby before but have been interested in it this crash course is definitely for you so by the end of the video you're going to be able to feel comfortable using graphql gatsby how to transform markdown files into html and much more now bear in mind this is not about styling but it does allow you to feel comfortable with gatsby graphql and markdown files so here we are in a very empty and sad looking project folder and all i have is a project json file that has nothing in currently so we do need to do some npm installs here to get everything ready um so let's go ahead and install gatsby let's go ahead and install react react dom react helmet and that will be a good start so once they've installed we can come back and start coding okay so we've created our npm packages they've been installed and we're ready to start coding so to begin with let's create a folder called source and then inside of that folder let's create another folder called pages and this is going to house any pages that you might want to create in the future um and then we'll create one file inside of here called index.js now this induct.js is going to be our homepage and we're actually going to house the whole blog here today instead of creating a separate page now obviously you can change this and modify it as you please once you've finished the course and make a blog a separate page and i will create a header in here that will have home blog about and contact us that you can extend and create those pages and then use it on your own so to begin with we've created this page so let's create our gatsby so let's do an import react from react and then let's do uh const and we'll call this home and we'll add equals here and we'll do an export default home and inside of here we can just do a return and inside of this return we can just do a div and the div will contain uh an h1 and this h1 is going to be the classic hello world so let's save that and now we've created our first page for gatsby so now that we have that we need to actually add something in here to our scripts so that we can actually run something so call it div or whatever you want to call it and then all you need to do is type gatsby and develop now that means that when you do this gatsby develop will run and it will build hot reloads and more so let's test this out and see if it works so do run task npm and run dev as you can see gatsby develop is being launched it's building the development bundle and after a few seconds we should have a option here to select localhost 8000 or if we have graphql we can go here and start working in graphql so let's go ahead and open this page up and see what it looks like and there we go hello world simple so now you are a gatsby developer go ahead put it on your resume um it's good to go so this doesn't really do a lot it just returns hello world nothing crazy uh we can certainly do a lot more so now that we have this functionality we should extend it out and start creating content for our blog in markdown files and then use those to create our blog posts so to do that we actually need to install a few more plug-ins because i know how much everybody loves to wait around for our plugins so let's go ahead and do that so you're going to do npm install you're going to do gatsby plug-in dash mdx and then you're going to m at mdx dash js at mdx i'm sorry mdx dash js slash mx and then at mdx dash js slash react and finally gatsby source file system so once these are installed we can talk about what we're going to do next so now we've installed those plugins it's now time to actually start really using gatsby so the first thing we want to do here is create a new file and that new file is going to be called gatsby dash config so you just do gatsby dash config.js now inside of here is where you can state some obvious things such as site metadata title and description plugins such as the plugin mdx that we just installed the source file system which tells gatsby where to access files so to begin with let's start by creating a site metadata and also everything that comes with that so you're going to type the words module dot exports and then an equals and then open a set of parentheses now we can type site metadata a colon and then open parentheses again so now what we can do is do something like title and we'll call this gatsby crash course and then we can create an author here and the author obviously is going to be me so you can do a name here james and a summary and the summary can be whatever you want so i'll just type the youtuber that you are watching assuming that you're watching and not listening so now you can do a description and inside of this description you can do uh another thing such as a simple crash course or gatsby and then we can do the site url now this would change if you were deploying this but for us we can just do uh 8 localhost which is the default then we can do a social here and the social is if you want it if you're sharing around on twitter for example and you want your blog post to be able to uh know who you are and also it works quite well uh if you want to have a link at the bottom you can sort of use this as well so we just type the word twitter and then just type in your twitter handle which mine is j underscore r underscore perkins and so for that now our site method data is done so what we've done is we've just basically have now this title that we can pass around pages we have the author so you can pass that around as well the description the site url and the socials so we have this part done but this isn't really utilizing all of the plugins so we need plugins to be able to read the mdx files and then transform them into html and the way that this works is gatsby has a plugin for this and essentially it reads that file and then passes it back to us and then we can display it to the users so to do that you just type the word plugins and then open an array and this is where you can put all your plugins so what we'll do is we'll type resolve and then do gatsby plugin dash mdx and then we're going to do options here and inside the options we're going to state what extensions the gas we should expect when we do this so for this we're going to do dot md and dot mdx which are two types of markdown files one uh is a bit more complex and one is a simple markdown file so you just type the word extensions and then an array and then we use backticks and then it's mdx comma md so that takes care of handling our mdx files but we also need to tell gatsby where to actually look for these files in the directories so you can do that using the source file system that we just installed and what we can do is just say hey this directory name slash something is where i keep all of my blog posts so to do that open another set of parentheses here and type resolve just like you did previously and then in this one it's gatsby dash source file system then you can do options here and then the path is the directory that we're going to use so you're going to use a door sign here open a set of parentheses two underscores do name slash block and that will take care of our blog so as long as we have files somewhere in this directory called slash blog in the root so in this big root section as long as we have something in there gatsby will look in there and say hey there's a bunch of mdx files let me go ahead and take those and then we can give it a good name so for this we're going to use the word blog and that is it for now now in the future we are going to use something else to handle our images and we'll come back into this configuration file and start using it but for now we're good to go so now what you can do is actually create this folder structure ready for your blog so you can just type the word blog and that will create our blog folder and then create a new folder in here and the structure i like to use is the year of your blog posts um and then inside of that you can create a folder for each of the blog posts so we'll do 2020 and if you so wish if you had some old blog posts thrown around you could do 2019 but i'm going to keep it like this because it makes this folder structure easier for you to read so now we have that and create another new folder with the date as the beginning part so we'll do 2012 2020 1201 and we'll call this first post now inside of this folder create a new file and that new file is just going to be index.md and then on top of that you can then insert any images as well if you had some but what we're going to do is going to create another folder here and that folder is also just going to be another one with a different date and second post and we'll do a third post and a fourth post so just copy and paste those folders over and over again and change the date from uh zero one to zero two zero three zero four whatever you wanna use is the date and then once you've done that we can come back and talk about how markdown files work and talk about how you can edit them and how each part of that actually works so you've created these folders i've done four and each one of them has an index.mdx file that hasn't really been touched so what i'm going to do here is i'm going to write three dashes on each side and then some gap here so let's talk about front matter and then let's talk about the rest so the front matter is actually what we're going to use to decide on things such as the title the date the description or the excerpt you might want to call it and then underneath that is our actual blog post so the front matter is not the blog post it's the part that you can use to sort of create uh the structure and the pieces that you want such as is it published is it not and the way that this works is quite simple i'm going to write the word title here we're also going to write the date we're also going to write a description and then we're going to do published and we're going to set this to true because i want to see it immediately so the title here we can just write first post and the date we can just do 2020 uh 12 01 and the description here i'm just going to write some uh some filler in here so we'll just take some lauren ipsum and we'll just drop that in here so as you can see from this what we have is basically what i would consider uh sort of seo maybe uh or something similar to that that you would use throughout so you have now have a title you have a date description published is true so underneath here is actually where your blog post is going to go now if you've never used markdown 4 i'll make sure to drop a link below that describes all the different types of markdown but for this we're going to use an h2 here and i'll just write the word lorem ipsum as filler and we'll also do maybe a list here uh one dog two dogs three dogs four dogs so we have a couple different things here we'll also add a paragraph of text which i'll just copy and paste from uh lorem ipsum as well so you can get an idea of what this is going to look like um so that's a basic blog post it uses markdown and obviously markdown has a lot of stuff but essentially it just becomes uh the basics of writing text so for this we have an this is an h2 then we have a paragraph of text and then maybe we'll add an h3 here and we'll call this a list and then we have our dog list here and that's it so we can go ahead and save this and what i'm going to do is i'm just going to fill these in with some random text that you won't see but imagine that all four of your posts do have some sort of text or some sort of information inside of it so i'm going to do that and then we can start talking about how we can actually use this in our index file here and show somebody a bunch of posts okay so i've created all these files and they have some post data in them so that we can use them in the future and hopefully you've done the same now at this point we're actually going to start digging into graphql and how it works so go ahead and open your web browser and what you're going to do is you're going to navigate to a new uh local host here you're going to type the word 8000 a slash and then a couple underscores and graphql and when you do that what you can actually get is this and what this is is graphql and it's basically a way of being able to visualize and create custom queries easily by clicking around so first let me clear this out and let's talk about what we have over here now if you remember from the beginning we have mdx files which we created that contain our blog posts and we also have the site which included things like the metadata so if you look at this site and when you click into something you'll see that the query over here uh actually adds in now if i say cite here and then click site metadata so we're site and then site metadata and if we click description and title which are two things we might want to use and we hit this play button here you can see that this description a simple crash course for gatsby gatsby crash course and if we minimize this and go into our config you can see that that is what i put here a simple crash course for gatsby so i'm actually querying the data from gatsby using graphql and you can see why it's quite flexible and powerful because you can sort of use the uh the localhost 8000 graph ql uh feature to create the query that you want and make sure the data is actually returned before you start coding up and then spend hours and hours trying to figure out why it doesn't work so what we can do now is sort of use that to our advantage and create something in here to to show some stuff off so underneath the export home we're actually going to create a a query here so what you can do is do export const page query and then equal that to graphql and then use two backticks here to be able to actually make a query so at the top of the page you do need to import a couple of things from gatsby first let's import graphql and then that will come from gatsby so now we have this uh we can make a query here and return something to our page so what we'll do is i'm going to create a crew here and it's just going to be the same one as the one we just had on the website now if you forgot what it is let's flip back and look at it and then let's add that into our crew here so here's the query and if you forgot what it was and now you have it so what you can actually do is take these from the parentheses and actually just copy this and go back to visual studio code here and drop this in and hit save and what will happen is it will actually make that query for us and what should be returned is that data but it's all well and good having that data but how do you use it so inside of our function here you can just go ahead and put in what data here then you can do a query on this so let's just do in fact let's just log it out to the console so let's do console.log data dot site which should return our data from their site which is part of this query right here so let's go ahead and go back to our website and go and see if our console log actually works okay so here we are we have a hello world and you can actually see the site metadata is part of our console and inside of it is the description as well as the title so we're successfully pulling that data from graphql and being able to use it in our gatsby website so this part is quite simple in the sense that we now know that we have the ability to use the title and description but we also need other things like the actual posts so let's increase this difficulty using the graphql visual first and make a new query and then use that to pull in the blog posts so that we can display them on the page so here we are in the visual graphql and what we're going to use is this all mdx on the left hand side to grab all our data so go ahead and select that one and the query will begin then what you want to do is select the sort because we actually want to sort these so that the date is in descending order so go ahead and hit that and then click the order button and then select descending and this is the beginning of our query obviously we need to add something in here to tell it which fields to use but for now that's fine so what we're going to do is add in our fields here that we want to sort on so we're going to do the word fields and then a square brackets and then you're going to do front matter under underscore date and what will happen here is this will give us the ability to sort by that date and then order by something else so we can just go ahead and delete these two brackets here because we're actually using the same and hit a comma and that will begin the beginning of our extraction using graphql then what we need to do is select nodes because we actually need the node and then inside of here you might actually start to see some things that you recognize um such as the excerpt maybe you've used the slug previously we're also going to need the front matter we're going to need the date and we'll also use the title and we'll also use the description and if you forgot what these were this front matter was in our mdx files at the top so we can actually utilize that and create something nice now one thing that we can do here for the date is format the string and what i'm going to do is i'm actually going to format this as d o m m year year year like that and then if we run this query on the left hand i mean on the right hand side you'll actually see this that we have the excerpt the slug which is the url that we want to use the date the title the description so we're getting everything that we need to actually create some sort of card or some sort of way of displaying this to the users so let's take this query and put it inside of the query already created and then use that to sort of display something to a user so go ahead and copy all of this from the all mdx all the way down excluding these two parentheses and flip back to your code and i'll meet you there and we can talk about what we're going to do so back in the code back in the craft ql you can see that we have this site and then we have these closing braces so underneath this second brace here go ahead and paste in this query and go ahead and hit save and now we are ready to actually use the query we just built to get some data from our graphql so i'm up here is i'm going to delete this console log and i'm going to create a couple things so first thing i'm going to create is a site title and i'm also going to create a site description and i'm also going to create one called posts so for posts we're going to do data dot all mdx dot notes and you're probably wondering how do i know what that is well the answer is quite simple it's because that was what was in our graphql so if you look here it's data and then all mdx so obviously at that point we know that we need this uh data and then we can pass our way through this so now we have that we should be able to use this to get our data so let's make these site descriptions something useful so you're going to data dot site dot site metadata dot description and again in case you're confused you can look at this query too and see site site metadata description and then we're going to get the title and make that our title so we can just copy and paste the beginning of this and say equals this and then add the title and hit save so at this point we actually are ready to sort of use this posts so underneath this hello world first let's change this to blog posts and hit save then underneath we can actually uh map over these posts to see what we can see so if you've never done a map before you're going to write the word posts which takes this and say post dot map then open a set of parentheses and then another set of parentheses type the word post then an arrow function and then open a set of parentheses and then you can actually do something so you can say something like const title equals post dot front matter dot title or posts fields slug so this is just to make sure that if we don't have a title we'll use this as the title so it's just sort of a catch here just in case so now you can actually return something so what we'll do here is we'll return um a div and inside of that div we'll return the data that we have so let's do an h1 here and say title and then we'll also have the date so we'll do a p here and the p will be post post dot front matter and underneath that will have another p and that p will be post dot front matter dot description so that will give us essentially all the important information that we have here so now we can use that to actually create something on the front end so let's jump in and look at our website and see what this looks like okay so here we are on our website and as you can see we now have our posts fourth post third post second post and first post so we're actually grabbing that dr from graphql and saying hey i want to map through it which is essentially like looping through something and let's print it all out on the page uh this you know functions but it doesn't look very good and also i can't actually see the data so let's make a nice little card that shows this data um add a header and then we can start talking about the complexities of actually linking these to an actual page using gatsby so we're back in the code and what we're going to do now is create a new file here called gatsby browser so you just do gatsby dash browser.js and what you can actually do here is basically import whatever css files you want or whatever you want to use to style your blog so i'm just going to terminate the table uh the terminal here so that we don't have any errors and what i'm going to do is create a new set of folders inside of this source called css and inside of that source folder is going to be a style.css so now we have a star.css we can now import this in our browser so to do that you just type the word import and then just wherever you've put it so for us it's source css and then style.css so now this is available globally you can use it anywhere it's sort of like the app part of next.js you can sort of uh import stuff there so now we have that let's talk about actually making this kind of look uh reasonably okay and something that is easier to read so we've already wrapped it in this div here we do have an h1 a p and another p so we kind of have that data but let's add a few classes here so let's call this card and then we'll call this class name equal to card title and then this class name will be equal to card dot date and make sure that the class name has a capital n otherwise it is not read correctly and then this final one will be class name equal to card dash description so now we all have that we can then do a little bit of css styling here to make this work the way that we want so inside of your css let's create first a little bit of reset so just do star and then open this up and just do a font family and this is going to be our default for the whole thing so i'm going to use open sans and if your computer doesn't support that we'll use sans serif then we need a margin zero padding zero border zero and this is to make sure that our styles don't get messed up and they conform correctly as we request them so now we have that we actually need to use some css to make this sort of uh card functionality that we've created here actually looks semi-reasonable so inside the card we'll just add some padding here of to rem uh we'll just set list style to none we're going to use display grid and we're going to use grid template columns auto and 1fr we're going to add a grid gap here and we're going to set that to 20 pixels uh margin on the top of two rim and text decoration of none for when we have any links and then we'll also have a transition here because we're going to make it do something cool we'll just do 350 milliseconds so now we have the card now we can do dot card dot hover so when someone's hovering over it we can make the cursor into a pointer and text decoration we'll make sure that that's still set to none because this whole card is going to be a link by the end and we just don't want it to do anything and then what i'll do is i'll add a border on the left hand side and we can just do uh 60 a1 e7 which is what i've used previously which is just a um like a blue color and then we need to do transform and we're going to do translate x 2 pixels and then we'll just add a border on the bottom as well and it'll be the same as this one so we'll just change this to border bottom let's get rid of this big old space here and then what i am going to do is add um a first type of so the first type of type it's going to have a margin at the top of just a foreign and that's just to put kind of push it away from that from the top and then we have a title and i'm kind of burying the lead here but as i've said this is going to be a link so i'm going to do card title card title to an a as well as card link and then the card link will also do that to an a and we'll say margin zero pixels font weight we'll set that to i don't know say 600 let's just fix anything here before we make any more mistakes we need a dot there there we go and then we'll set some font sizes here also just so that it's a bit bigger and this is not really important i'm just showing you this just so it's easier for us to sort of read in the future and if you're following along that's fine um obviously you could use something like uh tailwind to do this or or anything else um but i'm just gonna do straight css today instead of using something else then we have our card date and the card date we'll just set a margin of one rem uh we'll do a font size one rem and then we just need to do our description here and the description we're actually just going to change the font color really um and we'll just add a margin here too so we'll just do margin top uh one rim and we'll just make this gray so color can be uh 77 e70 and then we can do a font size we'll just do 1.2 ram it's a little bigger than the date and we should be good so at this point we should be good to go we have all of these done and so let's go ahead and run our task here and we'll see what it looks like okay so it kind of sort of works um our biggest issue right now is i think that obviously we don't have any container here so let's go ahead and make a container to sort of contain all of this in one place so back in the code we're gonna create a new folder here called components and we're going to make two components today um we're going to make a header component and also a container component i guess we should make one more and that's an seo component but we'll get to that in a second so let's look at this container first what we're going to do is import react from react and we'll also import the uh header from header and just so it doesn't complain we'll just go in here and do import react from react and then we can just do const header and then we'll just do return and we'll just do a div that says header and then we'll export default header and now we can use this to say const container equals and what we're going to do is pass in children so essentially what we're going to do is wrap a whole thing around in this container and then anything that's inside this will get passed in and then we can manipulate it so what we'll do is we'll turn and we're going to do a div here and then a div with a class name and we'll call this container and inside of that container will contain the header that we just imported at the top and then main and the class name here will be main and then we're going to pass in the children and then we can just do an export default container and then we are pretty much good to go so we can just hit save here and now we actually need to make two classes here in our css file so we'll do one called container and then one of main so the styles for our container is going to just be flex so we're gonna use display flex we're gonna do flex direction of column and justify the content so justify content and center and then in the main we're going to do justify content to center then we're going to align the items to flex start so it'll be on the left then we're going to have a margin here of auto 4m auto so that should be in the middle with a bottom we're going to set the width width to 100 and then finally the max width i'll set that to 1080 pixels i mean that could be any number but i just prefer that one so now we have this container we need to actually use it so go into your index file and you can then import the component here by doing container from components slash container and then you can take this container and wrap our instead of having a div we can just have a container like so and then if we go back to our page now and take a look it should look a little neater so back in our website i've zoomed out a little bit it's pretty hard to read but now you can actually see that these are in the center of the page and we have a nice little margin on each side so this is kind of looking a little better we now kind of have this hover effect um these don't click right now um and we have a a sort of stand-in header as i'd call it so let's finish creating the header and then we can start creating the links and everything that goes along with that popped inside of our header here and let's actually create something that makes sense so inside of the return here let's do a div and we'll give it a class name and we're going to make a sticky header uh so let's do sticky nav and if you don't know what sticky header is it's one that scrolls down the page so you can always access it um just because it's easier than trying to create anything else then we'll create a few a's in here and we'll call the class name equal to uh sticky nav button and what i'm going to do is create invisible buttons now these invisible buttons uh you'll be able to use and essentially what will happen is instead of being seeing the button um you won't see it but if you click on it it acts like a button so i've created four different things here um and what we'll do is create another div here and keep these separate and then we can rename them something like blog and this is just for for uh visual purposes and then you can extend these out and create new pages and then add them in here and you'll be able to use it so contact and then this one will be about us let's hit save here so now we have this we'll give this div a class name also and this class name will be sticky nav stack now we have all that let's just quickly create some css to handle uh putting this on our page and handling the sticky nav transformation so creating our sticky nav here we're going to also use flex uh we're going to set the flex direction to row we're going to justify our content to center we're also going to align the items in the center and then we'll add a font size here of say 1.2 ram we'll do a width of 100 and then we'll also do a padding of uh one rim just to make it stand out a little bit uh we'll do position and we'll set that to sticky we'll add a z index also of something like 10 so it's always on the top we'll set top margin of zero and then we'll use something called backdrop filter and then we're going to do saturate 180 and then we'll blur at 20 pixels now if you're wondering what this is doing it's essentially telling uh when we transition through we'll actually sort of blur it and also so make it saturated so it kind of looks funky and cool and then we'll just do background color one and then ease in and out so now we have that now we just need to create our ghost buttons and they're much easier than you probably expect so let's set the text color to black let's set the background to transparent uh let's set the border around it to uh one pixel solid transparent it's not really needed but me feel better uh we'll add a border radius to five percent and the reason i'm doing this is that i want to make the buttons uh rounded on the edges um so when they click on them they'll actually see that we'll add a padding and margin on the right of one rim so that they kind of space out a bit more or align the text in the middle to center display is going to be inline book text decoration we'll set that to none and then that should be it and then we just need to handle when it hovers or when it's active so we'll just do dot sticky dash nav button on hover and then dot sticky nav button on active and we'll set those to color black and background set to ef ef ef all right so now if we flip back to our website we should see something completely different okay so here we have a sticky nav at the top and as you can see as we hover over them they turn silvery gray and if we scroll down you get this nice blur effect uh to the blog posts so at this point you've created essentially 70 of the work the last part is that we actually need this to do something when i click this button i want to go to that page and i want to see the blog so let's go ahead and create the links for that and then take those links and actually create the blog part of this piece so someone can actually read what you've written inside of your index.js file let's go ahead and import the link from gatsby and then what we can do is actually create the link to the post so the way that we're going to do this is i'm actually going to wrap this whole thing outside of the card so anything inside here is going to be a link and all you do is do link and we'll do a class name here of card link because it's going to apply all text decorations of a normal link so we'll need to remove those we can do two equals open set parentheses and do post dot slug and that will look for this postdoc slug and make this whole thing a link so we can do that and one thing that we do need to do is actually add a key here and this is a requirement to stop uh react from complaining and what we'll do is do post dot slug and that will be our key because they should always be unique you can't have a slug that's the same for everything so now we have that we hit save we should now have a link so let's go back to our website and take a look at it so as you can see now we sort of have this working everything is scrolling and when we click on a link it doesn't work and the reason behind this is is we haven't actually told gatsby how to use all of these urls we just told it that urls that exist and just go ahead and go to it it doesn't exist right now because we're not transforming the mdx into an actual blog post so let's go ahead and use some powerful features of gatsby to create these blog post pages and then we should be able to click on them and see the page so here we are back in the code and what we need to create is another folder and this folder is going to be called templates and inside of here we're going to create a new file called blog posts.js so inside of this blog post.js template file we're actually going to tell it how to handle the creation of a page so we're actually going to use is something at build time we'll create all of our pages and we'll be able to use them but it needs a template to know how to create them so go ahead and import graphql and also link from gatsby and import the mdx renderer and that's going to come from the gatsby plug-in mdx that we installed previously we also need e to import react from react and we also need to import the container that we created and that's in our components files which is dot dot slash component slash container and now we can create our blog post so const blog post equals and for now we'll just make this empty and then we'll export blog posts and then that should take care of our uh blog posts but now we actually need to create a graphql so i'm actually gonna hand type this one and talk about it as we go instead of using the visual so i can describe exactly what we're doing because it's fairly similar to one we already wrote so in the same fashion you're going to do const query equals graphql and then a set of back ticks and then inside of here we're actually going to create something so first let me just disconnect our server so it doesn't error out and we're going to write the word query posts by slug so we're actually going to look for all the posts by slug that we pass in so then you can do dollar sign slug colon and then string exclamation point and then inside of here we're going to do mdx fields slug equals dollar slug and before we continue let me just talk about what this is doing so inside of here actually is going to be all the things we want returned but this is the actual query so what we're doing is we're saying that we're going to pass in a string that's going to be the slug so we're going to pass that in and then we want to find the mdx which is the markdown file that has the field slug equal to the slug that we're passing in so essentially we're just doing a match and if they match that's what we want returned so what we can do now is say in here we want the body we want the front meta and we want the title and then we want the date in that format string that we did previously so it's format string colon d o m m m y y y y just like that and then this query will actually get anything that's passed in as long as it matches so let's hit save here so we can save our work so now what we can do is actually extend this blog post out so we can do data which is the data returned and we're also going to do page context so now we can take in our and destructure it here so we can say front matter comma date comma body and that's going to come from data.mdx which is what we're returning great here there's the front matter and there's the body then we can use the page context to tell us whether or not there is any additional pages left so essentially what we're creating here is ability to go back or forward through our blog posts so you can do previous comma next and that's from the page context and then we can do our return functionality here so first let's wrap this in our container component and that will take care of that then we can do an h1 and that's going to be the front matter dot title and then we can do a p underneath and that will be our front frontmatter.date dot date and then underneath that we can do an article and an article is just a way of saying that this is a blog post we can use mdx renderer and inside of here we can just pass in the body and at that point this is actually uh ready to display the blog posts and let's just talk about this mdx renderer it's a plugin from gatsby and essentially what it does is it allows you to render this mdx file as html so it takes care of like if this is an h1 and converts it to an h1 and html and vice versa so now you have that we can make a conditional query here and say if previous equals false or null then we can make a little fragment here and say [Music] previous and so that guarantees that it's available and then we can just say link which is using the gatsby link again to previous dot fields dot slug so we actually have the access to that slug and then we can use a button here and say um previous dot front matter dot title and then we can pass into this button the previous title name so when the user's browsing the site they'll be able to tell uh what the blog post is called and if they're interested they'll go ahead and use it else they won't so now we have this we can actually copy and paste this function right here and paste it down here and change the word previous to next and that will allow us to navigate both the previous and the new uh blog post so you can go to the old blog post or you can go to a new blog post depending on how you feel so now let's make sure that this is all set so this should be good and then move this inside of our return function and hit save and there we go so now at this point we should be ready to go it's set from a couple things so first we don't actually know how to create this blog post we've made this template but gatsby doesn't actually know how to create them or when it should create them so now we're going to take care of that using something called gatsby node and then we should be able to go to this site and check it out so create a new file in the root of your directory called gatsbynode.js now inside this gatsby node.js we're going to do quite a bit of work around using graphql and also using that template that we just created so first let's import everything that we're going to need so we're going to create file path and that is require and that's going to be the gatsby source file system then we're also going to need path which is require path and then we're going to use something called export.create pages and inside of here this is what we're going to do all of our work so open up this and we're going to write the word actions and graphql we're going to do an arrow function and then we're going to open these out and this word is exports not export then we're going to do something called const create page and that's coming from the actions and we'll get into that in a second and then const blog post template which equals the path.resolve which is why we need a path because we're actually going to tell it hey we've created this cool template and it's in dot source dot templates slash blog post dot js now we can tell it like hey like we have this template why don't you go ahead and use that and then they can use that to create our pages so now we have that we actually need to do a bit more graphql so in here you're going to do a return and it's going to be graph ql as we've done previously a set of backticks and i'll add an extra space in here to make it easier we're going to open a set of parentheses and start with all mdx which is the old one that we had in fact we're going to sort it the same way as well so the word sort and do fields open a set of square braces here and do the word front matter underscore underscore date comma order is descending and then we're actually going to filter based upon front matter and then published now remember i had that published before well we don't want to show something if it doesn't equal true so we'll do published and then do eek colon true so if it is indeed true when we set it in the front metadata which i will show you here on this one as long as this is set to true we will create the page if it's not set to true and you're still drafting it up we will not create that page so now we have that now we're going to create something here and say nodes fields and we want the slug and we also want the front matter title we can hit save there so that's a graphql and essentially what we're doing here before we move on is saying look through all the mdx files that we have sort them first by descending also filter out any that aren't set to true and then return these fields slug and title then we're going to do a dot then and inside of this dot then we're going to do a result and we need to actually wrap this in one more parentheses like that there we go and then we can do this and say if the results dot error then we can just throw an error right so we can just do the word throw and then result dot error then if that's not true we can do a const and say posts equal result dot data dot all mdx dot nodes so get all the nodes and then say post dot for each we're gonna use a for each here and say post comma index and say const previous so we're talking about that previous that we had in the before and say equals index equals equals equals post dot length negative one so if the length is negative one null else posts index plus one and then for next it's going to be equal to index equals equals zero question mark null so instead of post dot length minus one we're going to do is zero and then we can do posts index negative one instead of plus one and then we can do a create page and then inside this create page we can do path posts dot fields dot slug component is going to be our template that we just created so blog posts template context is what we we have for context so we're going to do slug post dot fields dot slug previous next and now when i hit save we get all of this niceness so what's happening here before we move on because it's quite a lot of stuff happening all at once essentially what we're doing is figuring out if there is another one in front of this blog post or behind it if there is these will then be available then we're saying the path is the post dot fields slug the component we're going to use is our template that we create here and then we're going to give it some context the slug and the previous and the next so at that point we can then use this template to actually create something then finally we're going to do exports oncreate node equal to node actions and get no then do an arrow here and say const create node field those are the wrong kinds of brackets there we need a set of parentheses like this and say equals actions and say if node.internal dot type equals mdx which is what we're using for our markdown files dot mdx const value equals create file path node comma get node and then we can actually create this node field so we just do create node field name is going to be slug and then node comma value that is a big file a lot happened there so let's recap so what we did was we created our our template here and then we have this create page action and what we're doing is we're getting this graphql that essentially is just returning anything that is published in the same sort that we had before and we're returning the slugs and the front matter if there is an error for some reason we just throw that right out and then in our posts we get that from these nodes we say if this post uh has a previous or a next post go ahead and pass those along and create it from our template then we have this oncreate node here and what we're basically saying here is if uh the node internal type is mdx create this file path essentially just create this file path so that we can get the data and then we are good to go let's go ahead and save that and at this point we should be able to test this out so let's go ahead build our terminal by running dev and then let's test the website out okay so we're back in our website here and we have our full blog post we go ahead and click one and there we go we do have a site here and this is a button and if you click this we get a first uh second post we can click second post and go to the third post and we go to the fourth post and we can go back and forth so it's all kind of working but it looks horrible um you can barely read anything everything's kind of all jammed together um so let's let's work on fixing that and making it look like a presentable blog post but at this point you're pretty much done um your blog post works it's set from images don't seem to work very well this image is not working so we should fix that and we should talk about how that works in gatsby and then on top of that it just doesn't look very good so let's go ahead and fix all of that so back in the css and if you remember correctly we added a few class names to our blog template so we have post heading post dash date and then we also have post body and then we can create something here to make them look reasonable so we'll just do a text a line of center we'll also do margin at the top of two ram we'll do a margin at the bottom for two ram also and then we'll do a font size of three rem so we'll make it pretty big compared to the rest of our text then the post date we can just do text align and set that to center and then we'll font size uh this to one rim and then we'll also add a margin at the bottom so that it pushes these away from the general text and we'll add 4m here so then on the post body itself we're going to add in a margin of 0 auto for m and auto so that it centers everything and adds uh margin on the bottom so now we have that we need to talk about something here too so one issue that you will see if we save this and go back to our site this part looks great but what's happening here is it's not adding any spaces in or anything else it's just all kind of crammed in there so if i zoom out a little bit here to give you a better look at what it actually looks like you can see that here here here here here here there's no like margin between the two so what i'm gonna do is just gonna basically create a post dot body and then any h1s any p's uh ordered list or unordered list i'm just gonna add a margin at the top and the bottom of one rim so you don't actually have to to worry about this too much but i'll go ahead and copy and paste it and then we'll also deal with this i think this should be indented so that these numbers don't push out this way and then we'll make sure that the h2s maybe are a little bigger and then we'll work on these buttons so to create these essential uh margins at the top of the bottom you can just do post dash body and then h1 through h4 add those in as well as order list and unordered lists so it'll look something like this and then we'll do one final one post body p and then we'll open our parentheses and make sure that we have a dash here and say margin dot margin dash top one rim and then on the margin dot bottom we'll add two rams so that takes care of the spacing issues and then what we can do is do a dot post body here and we'll do h2 and we'll set font size a little bigger than uh most of the file so we'll just do two ram here and then dot post body oh well and we'll also do comma dot post body ul we'll do margin dash left and we'll do two ram and at this point that should take care of everything so let's just quickly flip back and take a look so now that looks much better everything's kind of spaced out nicely we still don't have images working at all so we need to fix that and we also need to fix these buttons so let's fix the buttons and then let's talk about images so the css for the previous dash next button is going to be a font size of 1.25 rims we'll make the font color black and we'll add a background here of uh ef ef ef which is silver we'll add a border here of one pixel solid and we'll also make that uh ef ef ef we'll add a border radius of five percent and you can change that as you wish and then we'll add a padding of one ram around the whole thing a margin on the right hand side and this will help space them out of a rem we'll make sure that the text inside the button is in the center we want to display this we actually want this to be the word text align and we'll display is inline block the text decoration will be none because we don't want it to show as a link the min width is going to be 25 and that's just in case like some of them are very short named and then if it's longer we won't have to worry so let's flip back again and take a look at this so there we go so now we have these big old buttons that you can click around and obviously you can style them however you want but it gives you the right idea so the final piece of this puzzle is how do we make images show up and how do we use images in our mdx files so let's flip back to the code one more time and make some changes to our config file and also add images so that we can test them out so we're back in the code and we need to install just a few more plugins to make this all work correctly so do npm install and we're gonna do gatsby plug-in dash sharp gatsby plug in actually it's remark images we're also going to do the gatsby transformer dash sharp and that's it so go ahead and hit enter here okay they're all installed and i'm back inside our config file here so what we're going to do is we're going to add some more to this config to handle our images so underneath the file source we're going to add gatsby plug-in sharp and also gatsby dash remark dash images and then inside of here we're going to do resolve and what we're going to do is ask it to resolve the gatsby plugin mdx and then we're going to say comma options and inside of these options we're going to say gatsby remark plugins then an array and inside of that ray we're going to say resolve gatsby remark images comma options and then we can set the max width of our images so max with 1200 comma and then we can hit save here and that's it so now in theory i've added a few images here uh to our pages so let's go ahead and run our dev server and see what happens okay so we're back in our website here and you can see all our posts and when we click on one we actually get our nice image loading through and you can see on each post we have images and then on the last one here's a separate image so all our images are now available and everything is working as expected the last piece to this tiny puzzle is seo so i'm going to quickly create an seo file that we can use as a component and pass in things like description or title or the site or any of that kind of stuff and use that as a way of uh being able to share this and it looking good on twitter or wherever you're doing so let's go ahead and create that last file and then our course will be complete so here's our empty seo file that we created at the beginning of our component and let's create a react import and let's also import something called use static query and graphql as we've used previously from gatsby and then we'll also import helmet and that's coming from react helmet and that's a way to manipulate the head so we're going to do cons seo is equal to open and a set of parentheses here and write the word description and lang meta and title and these are things we can pass in we're going to have defaults but you can also pass it in from the page so we're going to do const and then we're going to destructure and use the word site here and say use static query and then we're going to do graph ql and then inside of our back ticks here we're going to create our query which is just going to be query site site metadata and then we want the title description and we'll also i guess get the social which was the twitter handle and at that point we have everything we need from the query so we can save that and it's going to bundle this up but we're not actually going to use it right now then what we can do is create a const meta description equal to description or we'll take it from site dot site meta data dot description and that means that we can either pass it in and we'll use it or we can just use the default and then the same for the default title we'll call it default title is equal to site.sitemetadata.title and then if we don't have one we can use it as the default so now we can do a return function here and we're just going to write the word helmet and then we're going to do html attributes equal to lang and then we need the title and we'll set that to title and then title template so the way title template works is we're going to set it to the default title and then we'll say uh backtick here a percent s and then default title and this is just how it's going to look at the top of our page or null and then we need our metadata or the meta tags so in here you're going to create an array and inside of that ray you're going to create an object and inside of that object you're going to create a bunch of different things so each object is going to be part of the method data structure and if you've never done it before it's things like description og title og description etc so you're going to do name and then description and then you can hear a comma and then content and the content will be for this one meta description so essentially what we're going to do now is create one for the og part of it and the og is the way it gets displayed when you share it around so you're just gonna type property and then og title comma content title and then we can just copy one of these and we'll just paste it to make life a little easier so we only have to change two pieces of information so this one is going to be descriptions you just do description and then this will be the meta description that we used previously then we can hit comma hit paste and then this one will be og type and the type that we're using here is website because it's a website then we can paste this and then the property here will be twitter card and then we're gonna set this to summary but there's a variety of different ones you can have summary large summary um there's plenty of options just pick the one that you want to use then we need to use twitter creator so i'll just paste this in to save a little time and the creator is going to be either site dot site metadata dot social twitter so essentially if this is available we'll take that or we'll just leave it blank so then we need the twitter title so we just do twitter title and then we can delete this part and just type the word title and then we just need the description which is exactly the same description as we used previously which is the metadata description so you just do meta description and then what we're going to do is right here we're going to do a dot concatenate and then meta and then we'll close out the helmet and then what i'm going to do is i'm going to do some default properties down here to take care of anything that we may not pass in so you just do lang is english meta is just an empty array and the description will be an empty string and then we're going to export default seo and if we hit a little comma here hit save so that's all finished and we can actually use this now on another page so let's take this seo and let's drop it on the index page as an example um so go to your index.js file at the top import seo from components seo and then what we can do is inside the container right here we can just import the seo file and say title equals site title which is this and then description is equal to site description and there we go so now we have seo setup and everything is good to go so we're at the end of the video and you've created this blog through gatsby used all sorts of features including graphql and seo images mdx files and more so if you did enjoy this video make sure to drop it a like tell your friends subscribe for more content around the jam stack and until next time see ya

Channel: James Perkins

Views: 4,360

Keywords: gatsby crash course, gatsby crash course 2020, gatsby js, gatsby blog, gatsby blog markdown, gatsbyjs tutorial, gatsby blog tutorial, gatsby react, gatsby tutorial, gatsbyjs blog, gatsby js tutorial, gatsby react helmet, gatsby react tutorial, Gatsby Crash Course - Build yourself a blog., gatsby react js, gatsby react blog, static site react, gatsby tutorial markdown, gatsby js crash course, gatsby blog posts, gatsby blog page, gatsby blog mdx, gatsby react website

Id: ujq0DaSa58Y

Length: 85min 8sec (5108 seconds)

Published: Thu Dec 03 2020