Static Markdown Blog | Gatsby React JavaScript

hey guys today we're going to be building a blog in gatsby where the blog posts are generated for markdown files so we currently have three markdown files and obviously they get rendered on our home page and represented as individual blog posts as they should be the actual images are fluid images which is the reason why i don't know if you saw that but they fade in because a low quality image is loaded first and then when the normal quality images are ready to be loaded they go in to replace the low quality images and they'll have a little animation between the transition and that just greatly increases the loading of our web pages and as you can see it does it though as well and yeah so all these are generated automatically or the blog posts uh just from a single template file for the individual blog post and as you can see i'll show you another one and yeah because the markdown files we can include bold text and underline and links etc as you can see there's a link and there's italics and also it's not really that relevant to this tutorial but the design is responsive as you can see just in case you're wondering so if learning how to create this interest you then keep watching so here we are in a new mt project folder i'll go to the gatsby hello world starter to install a new gatsby project based off of this hello world starter which is very simple starter it's the one that gives us the most freedom and in a new terminal in this project folder i'll copy the command to install the hello world project and i'll replace the name of the project for dots that it installs in this exact folder okay once it's finished installing i'll launch up my source code edits of choice in this project folder i'll be using vs code for this tutorial obviously you can use what you want and the first thing that i would do before i do anything else i will go to the package.json file and i'll give it an actual name we'll say gatsby markdown blog you can close this now next we'll go to the source directory and we'll create a new directory we will host our images here and normally we'll host our images on static and those files will just get hosted uh we'll get sent straight to the browser but because we want our images to be fluid images we do it in the source directory which is where everything gets compiled ultimately where we or when we run um get uh it's like gatsby develop and i've already got the images so i'll just uh reveal it in file explorer and then i'll just paste it in there so this should now appear with this we'll need to create a layout component and this will wrap every single page of application and as i've said it's a component so we'll create the components folder like that inside will create it's called layout.js and i use object code snippet which is an extension by the way in case you're wondering how i just did that that's like that's an extension and all it would do is just display uh its children's everything uh in between it's opening and closing uh tags all that will be displayed uh inside of this element and another reason why we're creating this well really the only reason is because you want to create some global styling that will be added to this layout component which internal wrap every single page so that every single page will have the styling in this layout component so i will create the styles folder right now inside the source folder and we'll just call it global and the first thing that we will do inside the global styling we will need to go to google fonts we'll get the pop-ins font and then we'll copy this import i will input both the regular version which is the one which is that one and we'll also import the bold version which is uh it's got ways to 700 we'll import it like so and once you've imported we can actually use it so in the asterix which is stars or applied to every single element well increase consistency between all the elements uh like so and then we will apply this poppin's font unless of course it fails to load in which case we use sans serif as a backing as a as a alternate font just in case uh the pop-ins doesn't work some reason next look at hey we'll create this container class which will just center things in the middle of the page inside a container so i'm pretty sure these types of classes are in every single css framework framework like bootstrap etc we're just creating our own version right now and in addition to that we'll also remove the default styling that browsers automatically add to links ourselves for example you know it automatically makes it underline and makes it blue well we don't want that so we'll set the text decoration to none so it won't be underlined anymore and we'll set the color to inherit it from its parent okay so i'll now go to the layout component and as promised we will actually import that styles so styles global.css and that's all we need to do we'll just import it like so and then in the layout site in the index page which is obviously you know the default page which is on the home route we will import [Music] that layout component and we need to get it from components currently is the only one that's been created so we all wrap all of our content event with its opening and closing faces site tags opening and closing tags and inside would say hello world and we'll know that this is working based on whether this text is in poppins and not the default font which is our garamond i think so inside a new terminal we will say gatsby develop to build all of our static sites and press enter on completion we'll get to localhost urls we'll get the first one the non-graphql one i'll paste in there and yeah we get hello world so as you can see this is in poppins i can just tell based on because i know poppins so we know things are working in this case okay what we'll now do we'll now uh create the markdown files it may seem a bit early to do this but just for the brevity of this tutorial i will create it now so that before you can get on to doing the styling and stuff you've actually got some content to render out again i've already created these markdown files beforehand just to save time so copy them in there and i'll show you the structure of them so the structure of them is we've got this front metadata this title is the title is the truncated title uh it's truncated because it would be too much to actually display on the card which lists all the blogs in order by date again the date is a what's called a unix timestamp and again i'll just show you but how you can create that you just go on a website pretty much any of these will work because it will give you a unix timestamp and you just type in your enter date and time and then you can press convert and it gives you this number you can paste it in there and this number is useful because we can order the uh posts by this number and then that will simply list it uh list the post in order of date because obviously the lower this number uh the older it is and i'll show you later on how you can convert this number into an actual date that's readable and then the image is a relative path so two full stops and then forward slash so that goes up a folder finds the image folder and then the image of choice that's related to this article that we want to show the slug is just the file name without the md and we'll use this later on in the article template to target the uh markdown file that we just clicked on and that we want to read in full and obviously the description is the text that gets displayed below um below the truncated title and the post listing and it's simply just a snippet from the actual document uh from the actual article which is everything down here and this is all markdown again i won't go into markdown syntax size syntax right now but these are links etc markdown syntax can be found out on your own just that very simply and this is bold i believe and this is underlined because remember markdown syntax although there is no dedicated underline syntax in markdown files it doesn't really matter because all markdown files support html and that's actually what we'll be rendering them as eventually anyway which is how we'll get them rendered out as an actual website because we just pass it into html and yeah so this is italics i believe one star so anyway that's the format of the markdown file just post uh in the comments box below if you didn't understand that but hopefully you did what we now need to do is add uh all the markdown files and all of the images um into into gatsby's content mesh so that we can actually uh query all the data and read all the data in our actual compiled static pages when eventually comes time to compiling them so what we'll do we'll close down our local server by closing down the uh terminal that run git develop alternatively we could have just quit out of it by pressing control plus c and then we will install uh this gatsby source file system which allows us to add uh files to github's cons sorry gatsby's content mesh which we can query we can query everything contained in the content mesh uh using graphql and what we'll now need to do in our gatsby config file which is the reason why we close down our local server where our static files our static pages uh were being hosted it's because we can't uh where every time we change this config file we need to restart the gatsby develop um command to rebuild everything and then host it again and what we'll do we'll create an instance we need to create these instances to tell the file system uh where our which files we want to add to the to the content mesh so this one will be blogs and that will be uh obviously in the blogs folder so add everything all the markdown files uh in this folder or just all the files in general but obviously you've only got markdown files here to add all the files uh there into to the to the content mesh and then we'll create another one as well for the images because we also want to add them to the content mesh as well so we'll add it like that and just adding these files to the content mesh isn't enough we actually need to be able to pass the markdown files as html code and to do that sorry that's the long one we'll get to get speed transformer mark and we will install it because this allows us to pass the content to markdown files as html which is what we want so we'll install this and once installed we can simply copy the configuration that we need to add we'll copy it like so i can close this make sure that you get everything copied correctly and also whilst we're at it we will get the gatsby image what the i think they're called source plugins what these are and the yeah that's not it so i think it's called um again all the links to these will be posted in the description box below yeah so it's this one so we copied there's quite a lot to install here but these are all for um the fluid images you know the ones where it blurs in uh to increase also i decrease the time for our static websites to load so we'll install it like that but i've already installed it uh just to test it out beforehand so i don't need to install it again but you will obviously you'll need to install that and then we'll copy we will actually copy this here the configuration that we need we can just copy it straight in like that no objects needed and what we will now do is we will restart our well will we build everything we got to be developed because we've changed that configuration file but we now finished uh changing it so we can rebuild and we host everything on our local server again and instead of going to our home page uh static page we'll instead get the graphql url and we'll copy that here so we should now have thanks to the gatsby transformer source plugin we should now have the or markdown remark uh query available to us and this will allow us to query all of our markdown files which we should have access to because we linked uh it up in an instance so we said you know get out i'll get all the files uh it has nodes uh in in the gatsby uh content site in gatsby's content mesh so that we can query it with graphql and to order it by date uh as we promised that we would so we'll go to uh sort instead of filter and then we'll say fields what field that we want to order by will we actually have access to the date front matter field and then we'll say order that will be in ascending order and as for the actual markdown files like they could they're called nodes the individual files uh in gatsby's content mesh they're called nodes the html is the body of the um of the markdown file and that will be rendered as html as promised and as uh signified by the actual name of the field and then front matter these are all our fields if you remember slug title they didn't come from nowhere these are actually the name of all the different fields in the front matter and so is image uh but image obviously is directory which is why uh it's displayed as something a bit different from all the other ones which are literally which are the standard strings and it's we have access to the chart image sharp which is thanks to the fluid image source plugin and this one will render it as a fluid image so that's how we'll get it like that and obviously we can the actual image that we get back we can change all sorts of things like aspect ratio uh you know whether it's in grayscale et cetera or that kind of stuff but for now we'll just make a query here and we should get back the content of our markdown files in html along with image information and or slugs select the full title slug title everything that we created you should recognize all this information if not then you'll need to go back into the markdown files but i won't hold your hand you know you can figure out where this comes from on your own the purpose of this was to test things out to see if they work and from the results that we're getting back here they do seem to be working so what we need to do on the index page is we need to import uh graphql from gatsby and we import it uh typing in the name for actually we'll close down first of all we'll close down the develop server with control c as you can see we're now alter that now uh and we'll just delete the terminal actually uh because it's gonna cause errors if we do this with the local server being hosted because a member gatsby needs to recompile everything even if we make even slightest of changes so with that uh imported we will make a graphql at query like so [Music] and we make a query using what's called tag template literals which are actually string methods again i've got time to explain it now uh but these are this is legitimate javascript syntax and actually what i forgot to do was i forgot to copy the query but i've already got it here anyway so let me just explain uh so basically it's the same as the query that we had before that i already showed you on on actual on actually graphql uh but essentially we say query fetch or block this doesn't really matter um because we're not using query variables uh so we don't actually need technically we could actually get rid of this uh you know i would just get rid of it actually just for the sake of but what i'm saying is um you can actually give it a name if you want to but you don't have to unless you're using query variables which we're not currently and i said before we're filtering it based on ascending order we're getting everything back the only thing that's different from what i showed you in the graphql query is that we've actually had a parameter inside this method which gets back a fluid image and we're saying placeholder blurred because by default it doesn't blur uh the images don't blur into focus when the images are fully loaded but which is the reason why we use this property to make uh it have that behavior and now that we've made this file sorry this graphql query and we've exported it we can go back to the um functional component that's in the same file and it will automatically be assigned to this uh components data property so we can get access to it like so and what we'll do is we will extract all the necessary data so uh we'll get access to all the nodes i remember that's where the properties come from because that's the first one and that's the second one and then everything that we need as you can see just by this highlighting everything that we need is sandwiched within nodes so that's where that comes from and we're not gonna do anything fancy in terms of styling whether she's just gonna render things out just so that you get a feel uh just let you know that things are actually working as they should what would do whoops what we'll just say um we'll say blogs actually we can't really render out the html content uh for the moment because we can't just render it out like you know just by writing out but what we can do is we can get the front matter and we can get we'll say get the full title so we loop for every single one and then we render out the full title uh okay i can't put semicolon there but anyway that's just an experiment to see if things are working or not and to see if they are we all run the gatsby develop command okay once everything has been built again we can get the let me go to port 8000 again and okay we're getting on a handle at one time oh yeah because it should be blocked sorry because the individual one and then yeah so that okay that's where that comes from but anyway we are now getting this back uh okay we're getting uh some stuff here but as you can see it is actually working these are actually the uh the correct four titles that we created in the actual markdown files so we know this is working now uh this is good sorry for that mistake so now that we are able to retrieve the markdown uh data we will style things up a bit so that they are so that will actually we can actually list out uh the individual blog post in a presentable way and the way that we do this we will do this using css modules so that we can keep things encapsulated and this is for a page so we'll create it in a pages subfolder add the styles um in css modules they have that module uh prefix or their module anyway in in the actual file name because remember uh even though uh gatsby is uh static files um or it uses a static file generation to actually uh render out the website it does what once the monster static file has been fully loaded including all the scripting for the react it will actually operate and navigate as a single page application which means that we we still need to use um we still need to use uh css modules if we want to keep styling for for the different pages are encapsulated from each other so that one page's styling doesn't affect the other pages well any video creates two classes inside here actually one will be for the for the header which just says luke's blog or whatever and the other one will just be what add-ons the container class that we can make the container class at flex because it's not flex by default so i'll give it some margin but there's more margin on the top than there is on the bottom and no margin and then the other sides increase the font size a bit so that needs to be 2.5 another class as well because remember they all need to be classes when we use css modules and then we'll say wrap so that things will move on to another row if there's not enough room on the column and then 16 pixels margin bottom again and remember the way that we actually apply this we set import all as styles so we give the import an alias and then we can get access to it like so and then so to actually apply it we'll have to say class name styles.header and that will auto generate its own class that's unique uh to where this uh css module is is being used and we'll actually deal with all of this uh in a section and then we'll close off after the loop has actually ended and then we'll say not only will we give this um yes what we need to do is we'll need to get both give it a container class and also the blogs class and we do it like so and then to join us away together to a single string we use the eponymous join method with a space to separate them out so that we can apply multiple classes because remember multiple classes need to be separated by a space so as you can see this is now actually in a container class whoops this is actually in a container class so it's looking a lot better obviously that's not even close to being what it's intended to be what the final result is meant to be which is the reason why we're going to create a new component but we do it in a folder so that we can encapsulate it's like you can associate a stylesheet with it as well and then we say blogpost.js this will be the actual component file we use a code snippet to create it like so and then we do the same for the css module and then we'll import we'll do the same trick [Music] just from the css file and this will this file uh will render out all of the markdown uh post listings so i have you know the picture the title and a bit of a description and then when you click on these blog posts things it will take you to the actual uh place where you can actually read the article in full and back in the index file we will import the blog post so we can render it out instead of the east that we can render it out instead of what we're currently rendering out in in the loop so again pretty simple how that works and we'll pass in so first of all because it's being rendered out in a loop we need to give it a key that's unique for each item that's being rendered out so we just pass it an index it will be unique and in addition to that we will simply pass in the iterator so the current item that that is being leaked through and we'll get access to that property like so uh it's like data uh yeah that was what it was so we get access to it very easily and what we'll do we'll style some of this uh post container we need to create this class obviously and it's a width we'll say we want what we want is there to be three columns per o it's obviously you know 100 divided by three is uh 33.3 occurring well we can't get recurring but we'll get pretty close to it so i won't really make a difference up to that level i mean there it is and then we'll create uh the actual post and this will be uh sort of another container class uh we'll just apply it now you know so we'll say again it's quite tedious doing this but it's a good uh learning experience if you're a beginner obviously if you're an expert then you can skip these parts but if you're a beginner then learning how to do basic styling like this could be it's quite could be quite beneficial and uh what border radius does is that it rounds the edges off to make them smoother and i'll give it a box shadow as well again these are all good design uh choices it's free pixels uh horizontal offset three pixels vertical offset and then three pixels black and then the actual color itself will be black uh with 0.3 opacity which is the reason why we use rgb ah [Music] rgba method because the a stands for alpha and the background color is a very light gray padding we'll have 10 pixels all around and then create some more classes the post image will be obviously self explanatory i should also mention now that uh again all these classes are written in camera case that we could actually use them on the styles input because remember you won't be able to use uh high funds because you can't have iphones and variable names in uh or property names or anything like that in javascript so it's the reason why i use camera case instead of because oftentimes classes in css are yeah they've written uh with high funds just like these property names are ctx transform it's actually called um kebab case i believe we don't use that for the reasons that i just mentioned it's a margin 0.5 ram on the vertical and yet so we use cursor pointer i never think that we'll have a uh a link wrapped in it because by default gatsby links uh you'll see more in a second but gatsby links are actually their own components and they don't have that effect by default so we need to add that effect which is added to uh links and that's where obviously the cursor changes to um [Music] yes the cursor changes to to the correct to the pointer to indicates the user that they can actually click on this link what we're doing here is we're just increasing responsiveness so instead of having so instead of having three columns per row when we get to uh smaller screens medium size screens we're only having two uh columns per row but the rows themselves can obviously retains the same width and then when we get to really small we'll just have one column per row like so so because otherwise things would be far too squished if we had more more than one column on on a screen with uh as slim as that so what we now need to do as mentioned before we'll be using gatsby links so that we can link to the pages and other pages will load in uh in the single page application style or the page doesn't actually reload so we'll import the link component like so and where will the links actually go to well we want that to be uh an individual link for each article that's being rendered out and it will start with blogs that will be the parts of the link that's the same for or for each blog article the part that won't be the same is what will concatenate on the end of that and that'll be the slug so that's the part that will make uh the link unique for each uh blog post that we actually have and inside uh another thing that i actually need to import because to render out the um fluid images we'll need to do it in a component and remember we are getting like the images of fluid images as i showed you beforehand um so we imports like that so we get uh intellisense autocompletion because that's quite what's very easy to make careless mistakes there when you're writing that out so we write out like so and then what image do we want to display we do that with the image property so we get it from the front matter and then image and then child image sharp because remember use that method and then get by image data very important that buy isn't capital uh capital isn't a capital b in addition to that we will include some alt on that as well some some old data and we'll say data whoops title and that would just be some metadata essentially doesn't really make a whole lot of difference oh yeah one more thing actually as well we'll need to uh give it a class name and it will take in our post img class like so i don't know what's going on there so i shouldn't be messing with this now because you've already uh waited for quite a while and so yeah that's what needs to go there uh actually we don't need sorry this this doesn't actually require a closing tag it could be self closing like so after the link what we need to do is we will write out the date so we'll say uh data dot front matter dot date and then below that will create another link uh and that will actually be exactly the same in terms of where it will go to so we'll just copy this here because you can either go to to read the actual blog post by either clicking on uh this header which we need to create or by clicking on the image so as for the header we will get create the relevant class like so why not create but we'll use it post title well again there is there and then another one paragraph and then we'll give this the relevant and obviously this will be the description so again this should be good now uh what we'll do oh yeah we're already rendering out so what we'll do we will is it already i think it's already under develop actually but it should have crashed a couple of times because of the changes that we made so it seems to be working now so we'll just go back as you can see we're getting everything back the problem with this is this date isn't formatted but other than that things are looking uh pretty good as you can see if it has actually uh paid off what we'll do to solve this is we will create a function called format dates and this will turn that number the uni uh the unix uh timestamp into something that we can actually read that's uh human readable so we'll create a new date based off of what we passed into it but times by a thousand because this date uh object and javascript needs to take in uh milliseconds not seconds and that's what the uh date currently represents it's the seconds after january the first 1970 but this needs to be the milliseconds uh after january the first 1970 that's just a unicode uh standard site not the unicode that's something else the unix standard side and then we use the two date string method to turn it into something that's uh human readable and then after this we will just simply return new date like so and then with this we will we actually we can actually use this method so we'll copy this and we'll use that method so format date and then we'll just paste it in like so and with that hold on we'll get a narrower actually no sorry it wasn't never sorry that was just because the method name is wrong again easy mistake sorry oh yeah i'm also getting this as well i don't know what i don't know where that came from i've got honestly no idea your guess is as good as mine but yeah that's looking good now uh this is what the two um two-day string method returns automatically and it's fine but we want to get rid of of the uh the day of the week so like wednesday whatever we don't want that's what we'll do we'll split it up uh like so we'll split up every space every white space that we meet and what we will instead return we will return i believe the month first and then the space and then we'll return uh no i think it's the day yeah the day and then the month and then the year i think that's the format that we're going with obviously this is all down to your choice but that's what it will look like yeah and then as you can see it's the format and it's yes so not only is it ordered based on time but it's also ordered but it's we can also read it as well that's good obviously clicking on these will take us to an error page a four or four error page because obviously these weeks have been created but as you can see we're also getting the images to load in as well which is good so we made progress on a lot of this we now need to use a template to generate out all of the actual blogs or the static files for the all of the blogs that i'll link to here so when we click on the blog postings we can actually go to a page where we can read the blog in in full so to do this well first of all we need to close down our develop because otherwise because we're going back to configuration so we can't have this running uh whilst we're configuring things and what we'll do we will create a file just in our route and we will call it gatsby node.js and it's called that because uh this will actually run in node.js environment during build time so that we can do things uh that change the way that gatsby's uh actually building out the um static pages that he uses so the first thing that we'll do we'll create this method and we'll export it so it's actually used and it's an asynchronous method because we'll be making a graphql query in it and we do that with um graphql uh property that gets passed uh to this methods argument and we also have access to actions actions allows us to do things like create pages and stuff you'll see more about that later on so the first thing that we'll do extract data from a graphic url query that will make and this one actually does uses uh it's a normal method inside writes a string and that string will be a query we use the or mark down remark [Music] query like we always do to get access to all of the markdown files as represented by nodes and the only thing that will get back is the slug property of each markdown file like so and that will not be assigned to data because you've awaited to it so with this um so with data we will loop through uh the array which should be contained in node node sorry yeah this needs to be node not node because that doesn't make sense we're looping through nodes uh so we're getting back each node for each for each iteration of the loop and so now for each iteration we will use the create page not create pages that's something i don't know why it says create pages because that's actually not the method name and we'll use createpage method and what page we actually create while the path will be blogs slash because remember uh actually that needs to be slash essentially we're just copying the format that we used here so slash blog and then what came late after the slug so we have access to the slug through through data which we're now we're now leaping through the nodes of data so actually wait so yeah this needs to just do to change actually yeah it says block here so that would cause an error so that's very good actually that i got that that i could ever because otherwise that would just be an inconvenience later on it actually didn't match even i said that it did but it does now um and then the component so we haven't actually created this component yet but we will do and the component needs to be linked to be an absolute path not a relative path so the way that we can easily construct an absolute path is we import using a common uh common js syntax because that's what node.js uses we import this path our dependency that comes in node.js just by default and then we call this all method on it so it's inside the source inside the root directory which the path uh method the resolve method will automatically uh give us one link to source and then templates it will be found in blog template.js and we'll just create this now just in case this confuses you so inside source we'll create this now just in case this confuses you because we haven't actually created this file yet so we'll create it now and this will be the page uh that will render out it will change changes actually this will be the page that renders out each article in turn and after that what we want to give this page we want to give this page uh the slug so that it can make its own query um [Music] it can make its own query to find the markdown file that it's meant to be rendering out that it can display the article in full and that's it for this file um well i'll just write out some dummy data inside this uh template see things are working or not and again when gatsby develop just as we always do okay we could go back to our local host see if this is working or refresh and now if you click yes we're getting we're actually getting back now so as you can see because it's working because generated out the three uh routes that i need based on the slugs if you go to something else as you could see it won't work because that doesn't correspond to a slug in any of our markdown files so that's the reason why it's not working as you can see what we need what we now need to do is simply bend about the actual markdown so it's not too complicated uh oh actually i should probably mention that because this is a page we will need to use [Music] that layout component that we need because we said that it needs to wrap all of our pages to give us some global styling so we will wrap it in that now and whilst it will create the local uh it's like the the module uh for this uh template file so the css module so we'll create it like so and then we will link to it very simple as as we always do imports off as styles firm styles and then templates and then yeah like so and what we'll do uh in this file what we'll need to do is we will actually make the uh the graphql query um to get back the data for the markdown file that we are meant to be rendering out uh so obviously we need to import graphql and master at it also import link because we'll need it uh later on and we'll actually remove that we'll make it in line so just like it's nicer so that we can make the query down below and i'm just going to copy this in because for this video already way too long and you should already understand it so remember before i said that we don't need to name our query what we do now because we're we are using uh quote uh query variables as specified by a slug and it uses the syntax it uses the dollar sign and it's of type string and you might be wondering where we get this firm sorry where we got this from well we got it from here context we see we gave it slug so slug will have the value of the uh the the actual slug from the front matter which is the data at the start of the markdown files and then the actual instead of instead of using all markdown and mark we are just simply using markdown remark to get back a single uh markdown file instead of all marked down a mark which where we get nodes and nodes is an array that we loop through well mark down the mark it doesn't have that it doesn't have nodes because it's only it's used for just getting back one markdown file and the way that we filter out is very simple we filter out it out by front matter the front matter slug field has to equal which is what eq stands for slug so get back to the markdown file when that condition is met and then as for what we should get back that's what all this is for get back everything the image has some extra properties compared to what we used before placeholders the same it's blurred transform options means fill which means uh fill its container uh and match these widths these uh widths and height will be the width and height of the container which is the reason why they're the ones that we're using and as with before we get access to uh the data like so through its data property and again also like before we will extract the uh dates that we need like so because we don't you know everything's contained inside the markdown mark and just to test things out see they do work we say blog.fun mata title uh like so because remember we both had title and full title and we'll check to see if i think it's working uh well we did get two hours but they were the warnings so hopefully we'll see as you can see we're getting individual titles based on what we're actually going on so this seems to be working in this case great it's now time to style everything so and present everything uh as as how they should be presented this will simply be um a back button um so it takes the user back to the home page which the reason why we have a link and then as for the p so as for the text inside that will be as such uh and we'll give it a class which we haven't created yet but we'll create shortly uh okay i don't know why i didn't get [Music] i was a bit weird i don't know why i didn't get uh auto closing tag but it seems to be working uh now and as with before we will import to get the fluid image um to get the fluid image being displayed we'll need to import the relevant component so that's gatsby image like so and remember i won't make the same mistake as before hopefully not anyway i can't promise anything where i did uh i didn't make it self-closing and you know i'll just copy this because this video is already i am aware of how long this video already is but remember i would explain that before how that works along with this we will set the alt the alt is uh we'll set it to be the title along with this we use the styles main img again haven't created that style yet um [Music] and we'll also create another see i've got a closing tag there that's weird i'm not entirely sure what's going on there remember the container comes in the global styles which is uh the reason why we're not using the uh the module to style that um this will be the full title not the actual title which was just for the actual listing to make sure that it actually fitted within the um make sure that actually fitted within the blog post listing look at that style as well and we'll leave out the actual rendering of the markdown file for now uh so we see what this looks like hopefully it hasn't crashed we'll just yeah so as you can see we are getting stuff displayed but yeah it's not exactly amazing so we'll start all this real quick again you uh can skip all this if you already if you already think that you are a css acumen then pops to you because css is consistently ranked by developers as the hardest thing to use well at least in webdev anywhere i don't know about anything else well i mean hopefully i know about other things hopefully i know about the renaissance or ancient rome whatever you know you would hope that but basically i don't know anything else sorry i don't know what i'm talking about to be honest talking absolutely this is what we have to do and [Music] uh this is what we have to do and web it kind of drives you insane because it's just uh very uh fast moving and uh there's just a lot of stuff to learn and again it's not easy web dev but you never you didn't sign up for this i hope you didn't anyway i hope you know what you're signing up for before you embarked until if you're watching a um gatsby tutorial i mean gatsby to even start learning gatsby you already have to know react and next uh sorry get sorry react and um graphql so it's not like you're a beginner i mean you might be a beginner but you won't be a uh just starting out learning html css and javascript anyway and by the way this is how we get a very thin line break we remove the border and set it to be one pixels um and we will leave it uh this for now actually you know we want we'll just paste this in because we've already taken too long so we set this to be 300 pixels image container and that's just to i'll just show you real quick so as you can see 300 pixels media query is about here and that's just to shrink the image just to make things look good as you can see not exactly very uh not exactly a very complicated design as for rendering out um the actual uh article content itself um [Music] we'll do that with this div here the div that i just created uh and then the actual this is actually a react property uh dangerously set in html just ignore dangerously part it doesn't really matter in our case because gatsby makes things quite secure yeah so what what so where will you get the html content we'll get that from blog of course and the html like so and as for okay we need to style this obviously so we will do just real quick so if we go back uh yeah so we normally get an hour as you can see we're getting text displayed here now uh the text that is being displayed isn't line isn't i have it it doesn't have line breaks and that's because i don't know if you saw at the start but basically line breaks and markdown are represented by backslash n like that uh and that doesn't correlate to html that has no relevance in html so what we'll need to do is we we need to create we need to essentially replace uh each of those instances of backslash n using javascript's own replace method which is invented javascript which is why we can use it straight away and we will use a regular expression g flag to find every single one of them not just the first instance of backslash n and what we we replace it with we'll place it with vr an actual line break and so now we'll use html instead boom quickly get that in as you can see we're now getting line breaks one more thing these are meant to be links but you can't even tell that they're linked and that's because of what we did in the um default style sheet is overwriting uh the links that are meant to be rendered out so we'll just copy this as you can see what we're doing is we're just overwriting all of the links but only the links inside the html vendor which is you know being rendered out through this dangerously set in html uh property which is a default react property and so now if you refresh as you can see they look more like links and you can click on them and everything's looking good so yeah guys this is this is uh it for this tutorial i know this is a long one but i hope you benefited greatly from it because we learned uh all of the basics of gatsby we learned so much if you never learned gatsby before this was amazing well hopefully anyway i don't want to blow my own trumpet here but hopefully it's good tutorial for you because it got you learning the uh all of the basics of gatsby and you know content mesh source plugins graphql markdown the rest you name it and you also learn some basic styling stuff as well basic ui design so i hope this is beneficial to you uh if you have any queries or comments then please don't hesitate to post in them in description box below and i'll be sure to answer them to the rest of my ability likewise i've put in a lot of effort into making this so i would really appreciate it if you considered liking and subscribing but anyway what's more important is that you have a great day and peace out

Channel: Qixotl LFC

Views: 160

Rating: 5 out of 5

Keywords: qixotl_lfc, Qixotl, LFC, Gatsby, Gatsbtjs, JavaScript, js, coding, webdev, markdown, markdown blog, static markdown blog, blog in gatsbyjs, react markdown blog

Id: XdH4-8rz_v0

Length: 56min 40sec (3400 seconds)

Published: Sat Aug 07 2021