Building a Static Website w/ Blog Using Vue JS and Gridsome | Coding United | Skillshare

Building a Static Website w/ Blog Using Vue JS and Gridsome

Coding United

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (1h 4m)
    • 1. Introduction

    • 2. Setting Up Gridsome

    • 3. The Directory Structure

    • 4. Configuring Sass

    • 5. Using Components for Header

    • 6. Creating Routes for Blog Posts

    • 7. Loading in the Blog Posts

    • 8. Building the Blog Roll

    • 9. Integrating Disqus Comments

    • 10. Using the Pages API


About This Class

In this course, I will be teaching you how to create a static website that includes a home & about page, a dynamic markdown-powered blog, server-side generated pages, and much more!  We will build our site using an intuitive framework built using Vue JS.  If you are currently studying Nuxt JS, then stop right now!  Gridsome is the answer that trumps all other static site generators because of its smooth generation and blazing-fast speed.  Now, start this course and learn about Gridsome now!


1. Introduction: whoever wanted in this course working to be learning 100 build blazing fast websites using view Jay is with gruesome in gruesome is a framework built in view Js that builds static websites that are extremely fast compared Teoh other websites won't using different frameworks that aren't statically generated. So her Goodson works is it builds all of your website using data that you can wrote in using databases mark down or any other content so you can see the website that we're going to be building right here. So we have a home and a found and a block from senators born. We have all of these different born pros that are built using marked down So you can see inside of here read oppose folder and we have all over Merck time within here. So even titled an author, gain all this information and we just have our blood post within here and that's loaded into our website. We also have comments integrated into our website for free with each of her blood posts, so automatically seemed over comments you can see right here we have it covers right here. So also your ableto programmatically create pages using Brinson. It is very simple. So we have in four did A. J sometime into our project, and we're just creating pages using each of these products. Instead, it's a raid, and then we're just gonna go into this site. I just going to go there slash and then going to that route this idea and putting on a gene . So if we go to that idea and you can see that we have our website and he says one page works eight with three sections, which is right here in the press is 39 99 she concluded. In all of this, data from your database from anywhere across the interval onto your website said it will be statically generated will be able to be seen by the search pots. So what are you waiting for of Stanic Saints? You know 2. Setting Up Gridsome: well over wanted in this lecture. I'll be showing you evidence. So that gruesome Seelye. So we're gonna be able to create our godson project. So how you do that is I'm on the goods from documentation right here. And you just have to put in this command right here. If you want to start using NPM, which is shipped with no Js or you can use Yard said to use an PM, you just have to enter in this command. No, I've already copied that. I'm gonna go into my terminal. I'm just gonna pay set in. And then once I run this, it should install the goods from Seelye. So this all along was to create our project using terminal. Okay, so then events installed, we're gonna be able to open up and create or projects. Are you do? That is you do create grids, um, create. And then you name the project. No, I mean my just stop right now some Did you grid Cem? Great. And then we're gonna save work on you, cash and walk, and then I'm just gonna hit enter. You can see it's cloning a repository. Forget hug. And then we're gonna have the boilerplate for good, Cem. Then we're gonna be able to learn how to use good some to create our blawg and portfolio, and it's all aesthetically generated. So then the search engines and everything will be able to see our website. We easier with all of the content inside of it. Location of this stone on we have to do is open up that directory him and the CD portfolio , bash and walk. They don't open it up, I'm like, and then we're gonna do code that and I'll open up. Envious code is my and in order right now, and then I'm just gonna do rid. Cem is only we're going to start our server for Goodson. We're going to see the boarding the plane that we just insult. It's gonna take a little bit to set everything up. And while we're waiting, you can see all of our directors structure. So all of this stuff that we're basically going to be editing is going to be inside of this source. If you've ever used a framework similar to knock she s or any other static site generators that use view Js and you'd probably remember all of these folders and everything that's inside of them. So to open up our website on we have to do is go to a local host. Immunity. That is, if it's not taken up on your computer right now, I'm just gonna go to the local host. 80 80 exit full screen. Right now, I'm just gonna open a local host or 80 80 and you can see it opens up the grid. Some boilerplate. Now we're gonna be editing this and the next lectures to create our blawg and portfolio. See you. 3. The Directory Structure: whoever wanted in this long, shall we teaching your own mobile great sum's directory structure, which includes all of the files and folders inside of our project. So the first thing we're gonna be lowering our is a package dot Jason file, which is inside of the root of your project. I'm just gonna open that up. You can see it has the name of your package, and then it is going to be what you use when you ran the gruesome create. And you can see it's also many older and this is a brave it package and you can see all of the scripts that we run, Don't we? Do Just stop my server, you congee, ale, npm run and then you can use bills. And that's how you build your project develop. And that's what we used toe brought our project and development so we can open up inside of our browser right here. And finally you can see the dependencies and this includes Brits, Um, which is we're using to make our whole project. We'll also include your plug ins or view components that you're gonna be using later. So if you're installing them and adding them into your project. The next file that we're gonna be learning about is that good soon dot confident Js, which is also looking in the root of your folder. And so the route is basically just right underneath the folder of a project. So it's the first element inside of it. All of the elements instead of these folders would be secondary elements. So we're gonna be learning about the grits, um conflict dot Js you can see inside of here. We enter data about our project inside of here to ever site name. And then we have our site, your l and obviously, both these are examples you were put in what you're saying your URL insight, Neymar. And then also you add in your plug in and plugging configuration inside of here. So I'm actually just gonna change this site name right now. Nobody name it or Folio log. Then we can also just take away our site. Your own are coming. Yeah, we can't come inside of this. So now we're gonna be learning how to use this instead of later lectures. Oh, we're gonna be using the folder that we're probably going to be working in for most of our time using Leadsom. So that is the source folder right here. So let me open this up. You can see all of these Fuller's in here that we're gonna be learning about in this lecture, and then you can see a main dot Js file. And so this is what we're gonna be learning about right now. So I'm just gonna open that up. You can see right here we have already some code inside of here, and it's basically just setting a default layer so we don't have to import it into all of our pages, so we're gonna be learning about that later, but to wait, we're importing to phone layout, and then we're importing that from the land folder, and then we're just setting layout as the default layout. Also, you're able to import global CSS inscriptions under here is you can see right here. And so I'm just I just wanna create a default styling. We're CSS file that makes the each team ill. The with 100% height, 100 vertical heights, margin zero and padding zero. So that I don't have to add that on to every single one of my pages. So I'm gonna do that is I'm gonna create an assets folder instead of her source. And I'm just gonna create styles that seeing sense. And then I have some CSS code that I'm just gonna paste in here. You can see it's just a chill. Come a body inches adding in these styling, So then we don't have to add it inside of all of our layouts. So I'm actually gonna add in a background, and here we're just gonna set it to blank. So we're gonna be able to see if this is working or not. So if I go into a gruesome page, you can see the background is still Wait, it was because we have to import it instead of maine dot Js. So you do that. Did you go into here and right import? And then you're just gonna open up, pull a single quote, and then we're gonna do so we're gonna do source, which is this symbol right here. And then we're going to do slash. And so the source is this folder right here. And then we're going to go into the Assets folder, which is right here and then style sent see such to us to source slash and sends. So the styles that season no loading in this styles, that seeing sense and into every single peach. So to make sure that we're able to see the changes, I'm just gonna add in the background. Uh, let's say right, so probably look bad. But yes, sir, As you can see, it's loading. It's changing the background of all of these pages to read, because these style this style sheet is being loaded onto every single page you could uses . Teoh reset the start, the default styling for certain elements like the under gutless and ordered lists, they have a default padding. You could just soup heading heading zero, and they had removed the padding for that one ordered and ordered Lis. Now we're going to be living. But pages inside of drinks, um, Teoh view all over PGE's Weaken. Go to Resource folder. Then we can go into the pages directory. As you can see, where do you have some pages created for us? So the template is work where we're gonna be adding in all of our HTML code and then in the script, which obviously going to be using Java script, you Js And then you can also have a style instead of these view files. And so the routing it automatically generates routes inside of for your website and for all of the pages inside of your pages directory. So this index start view page, it won't actually inside of your website, you're gonna be able to go to it. We're just going to actually should be using the about dot view because indexes automatically loaded, as you can see here says hello world. And if I go to the index, that view and seeing says hello world with this image above it. So it automatically generates rounds these pages that is in kebab case or dash case. So basically, how that works is if I have this about dove you that translates into sight slash about. So it turns out all lower case. And so if I had, like about us, don't view, that would translate into slash about us so I can go to this page for about we're just going toe our website right here, slash about you can see it went to the about page to know the second even that we're gonna be a laundry about is louts. And that's right here. So I can open a portal ale. You can see that we ever default male that view. And that's what we're importing is then we can use that every single one of our pages inside of the main dot Js you can to we're importing the lamp. So basically, what allowed is that Takes all of the code inside of inside of this layout tag right here, and it just inserts it inside of this slot bag right here. So then we're gonna have all of this code right here, above and below, and outside of this lot, it's gonna be loaded in, so we won't have to add in a header on every single one of our pages. We can just put it inside of a layout and then have this content loaded inside of the land . I'll be able to show it to you so that if I go back to our homered here, you can see that this header right here it has the home and about and both of these pages air being loaded into it. If I change something on this header right here. If I changed this from the site name and I put in, then you can see that the name is test. And if I go to the other page, still test because it's looting in this same coat. Then if he had to change something, you wouldn't have to repast in your code onto all these other ages. So I hope you guys enjoy this lecture. And I hope it wasn't too longer boring for you guys. If I see you guys in the next video. 4. Configuring Sass: well over one and in this video will be shown you how to use SAS inside of her grids and project. Then we're gonna be all the ad in a global variables that allows access or colors inside of our whole Web page. And always to do is call in these variables. And here that is in the sacks link to sense includes variables that also allows us to use nesting, which basically, you can turn it the element. And then you can use a class inside of it, and they don't. That means that it'll only target this element right here that is inside of the parent element. Did your able to structure your CSS like how you are able to as each funeral start to use as we have to do npm install Ah, dash debt D for dove SAS loader and notes S So I'm just gonna copy this command and we're going to my terminal on pace it in. Now it's gonna be installing SAS. Then we're gonna be able to use it in our project. So let's just set it up. So then we're gonna have so I'm gonna create are variable Sancho file and someone hit new folder instead of her assets folder and then I'm gonna hit. I'm gonna type in SAS. So we're gonna have all Versace code inside of year. I'm gonna create a variables that says, actually, we're gonna be using s CSS. And that says also is just that it's used the syntax of CSS. Okay, so we have that file created and I'm just gonna pace in my variables with all my colors. But I created this color scheme with coolers dot co. I just compete that now in peace it into here you can see all of her colors that we're gonna be using inside of our work page to know if this is done and so on, yet seven showing. Now we conceive that if it's allowing us to use ass incentive for finals by going to the index page, I'm just gonna go to the bottom. You can see with a style tag and to make it cess already to do is add in a laying a language attributes and we said that equal to sense, you can see s CSS a CSS. Then we can just type in some sass code right here, so if I had a variable. Very bollant. Sit this too. I said this to white, and then we'll make the color of the links the variable. And if I run our server, you can see that the color of the links is white because we had a variable, which this is using sass peas, you to note a variable using the dollar sign, and then you write the name of this. If I also at I could change this into home links and I did a So we're gonna target all the anchor tags within this dot Home links. Plus, you can see that we solve the same output. It's now we're gonna be making the colors are variables that sass when we just really what that says we're gonna be making this global. So we're gonna be able to access all of these colors instead of all of our files without having to import them to normally. If you wanted to import them and every single file by yourself manually, do you add in for then we're just gonna dot slash as that slash sen slash colors and I should be able to discover this and then do right John Michael in, and you can see that it's using the white blue color from our colors. So instead of having to import, are says following to every single foot one of our for our view ages we can just use it globally. But going to the documentation to use a global pre processor. Why don't you need insult style? Dash resource is stash loader. So we're gonna do M p m I h d. And then we're gonna sell it. So if I stuff are Cheaver and then this air right here is just because the light blue wasn't required because I had stopped loading it into that says, for let me just removed that actually will leave it there to see later. Okay? And while we're waiting for that tombstone, we're just gonna set the funt that we're gonna be using in our web page. And that's open Sands. Don't mind that. Find set Google that come and I've picked off the styles that we're gonna be using by hitting, removing Add this style. We're just gonna be using 304 106 100 no italics. Someone hit the embed button, and I'm just gonna do at import, so this is a CSS way to import it. I'm just gonna copy this and then we're going to go into our global CSS file. We're gonna be set in, and then we're just gonna set about family to open Sands, and then we're gonna make that important overwrite any of the other Salins that were in there. So if I our service actually not running right now, so we have to re run our server and so we will be only use that fund, you should be able to see the fun that's being used. Now, you know, we have to make it so that our global pre plastics or file, which is the colors that sense is able to be used instead of all of our page. So we should be able to do color and then light blue and access it in this page without having important sands file. But to do that, we have some code right here that we're gonna have to pace in were gruesome, that conflict a jazz. And so I'm just gonna copy this code break here. We're gonna pace it before the module that exports. So I'm gonna go and take you through that conflict we're gonna pace in before this module that exports. You can see that it's using all of this different code right here. And I'm not going to be used in a different version of SAS is right here striking. Just remove all of this in front of it. These were not going to be using an underscore Global's. We just wanted to be loading in any sass file inside of it. It actually can remove. All of this is we're just using the dot s CSS. And then we also have to piece in this right here into imagine that exports. So I'm gonna copy this, and then we're gonna do a comma at the bottom of this, paste it in. You know, we can just remove this sash. You're just using this type of sense. And so now I should be able to uncommon this code. We're importing that cess file into this into this page, and if I roof, we have to run our server. Okay, So our servers running and you can see that the open stands front is being loaded in, and also you can see that the light blue color variable it is instead of her colors. That sass is being loaded in from here through this criticism that conflict Andrzej as and then pasted inside of here. So we can use all these variables. Reason the light blue, Very people. So now we're gonna be able to use these variables inside of all of our peaches and are later tours while we're building building a portfolio and blogger without having to pay sudden. But I put you guys in the next lecture. 5. Using Components for Header: of one in this video become figuring our header. So then we will be able to have over links and it will be important onto all of our pages. Let's get started Annoy for project open and visuals to be a code. And so I'm just gonna go into this source folder there. We can see over folders inside of here. And since we want the header and it's going to be loaded onto every single page we wanted to put in Southern Lance and we don't have to copy in peace or food under all of different page, it's so we're gonna go into our language further and then the default layout just loaded for every single page. Every single page is being placed inside this slot moment right there. So I'm just going totally off the header code. That's for the default. And I'm doing all of their styling inside of here. We're gonna add her own selling it. So instead of using header element directly inside of our layout, I'm gonna add in a components than if we create more louts later on. And we don't have to copy and paste or coat into each of them we can just load in the component. So we're gonna go into the components folder and a component is basically it allows you did not. Not being paints the same code into all of your age is by just importing a component into that page. So I'm gonna create a new file. We're gonna call this header of you, not only create the template and then instead of here, we can just create a header turn. And so we ever 100 tag, We're just gonna open that up and then we're gonna create issue omen instead of here. I want to put our site Ning. It is going to be loaded in some are good, some not conflict I j It's so instead of here, you can see are much of that exports. And then we have a portfolio block which is sent to the value of sight Ning. So we can just call this in use anaesthetic Very. It's just using the graphic. You well intervenes. So I'm just gonna copy this Stanic Barre joinery pacing in here, and she basically we're creating a query right here instead of a query where we want to go into the metadata and inside of the metadata. We want to get the site name, and that's what we're gonna be using inside of here. So to access the site names under here, all we have to do is I can actually just or that so close, this could be dish each team. Oh, we consent that equal to static, that meta data that ST name. And so to import or component inside of here so we can actually see it. When we have to do is I hate a script tag that ever default, man. And then we're gonna go here. We're going to see import better from tours, opponents flesh header that you. Okay. And then instead of our expert full, we want to make a new object called Components, and then we're gonna put Header inside of here. You know, we have to actually insert within or Layla, we're just going to Dio and her itself. Was that to know this is loading in our header, which is right here. I actually just delete all of the code from our index page. Actually, I can just add index binge. You can see this is our header right here. So we can actually just add in some more. I'm getting here certain, creating nev navigation, we can create a link. So instead of using the a link anchor tag, which is what you using default each Schemo and Grissom, we can use a gene link, so this allows us to handle for all of the different roads that are generated. So if I wanted to go to the index page Charki create index are own probably called home. And then instead of doing a traffic due to equals, I'm just a slash if we want to go to the about page and we just copy this Peace it alone Dio we just have to put in about is in the kebab case, which we learned about in the current research to electric so I can delete This ain't your bag. And then we can also create another one for something we haven't created yet, which is blawg, but just blogged slash block against, you know, we have this in every gay shore here. We have her age too, right here. Now I'm gonna quickly do all over the styling or this html and then I'll talk about a center of added It'll be incensed when you can see the better now. And it looks nice with this farms and on the colors so you can feel the CSS here. Basically, I just said the header to have displayed Flex that said everything to the flex direction of road. I ended it just with my content of space with bean And this so, um this inch to omen. And this never element this year both the flux items and they're gonna be sent as far between each other as they can. A the width of a poof of when her percent minus 12. From when I added a petting of six room that I can have six rooms spacing on each side without an over full of excellent, you have a horizontal to crowbar. Also, I've added the fun size and front weights for each the headings and each of the links. And also so you can see I'm actually targeting and incur tag rich. So this gene link, it actually transforms it into a a tag with this right? Right here. Do you target using the CSS within? Never a link. You can see I made it. So then the colors inherit. So use the color of right here of the header element. That's white. I mean text structure, decoration. None. The ad it's impairing. So then you can right next to it. And even so, click on hitting their spacing between each of the rigs. I changed the front sights. Also, you're able to see that I for place off the content on the about that view page and you can see that this header is being loaded onto every single one of her pages. So if I go to our about page and C, we still the header. But I wrote has changed to slash about and it says about page inside of here. So if you go back to home, you can see it says index page, We'll help I see you guys in the next video. 6. Creating Routes for Blog Posts: those who wanted in this lecture working to be configuring plug ins to create our blog's. So then it will generate around for each of the markdown files within our block folder, which is what we're gonna be creating within this election. So you can see slash blood slash first markdown posts, and then we have first markdown posts within our block. All right, so first, we have to solve the plug ins. So then we can create our block posts in the roads from the markdown files. It's what we're gonna do is I'm in the Goodson documentation, which is saved in Selic above plug ins, Swift. And so the gruesome source file system working and transformer remark for the Mark Dome. So to do that, I'm just gonna get this go cancel our server, and then one do n p m i. And then we want to stole Grissom Source. Follow system. Mm. Consumes like, sir stash. Well, you re also needed so it's, um transform Cash. Reamer. Okay. We have entered, you know, in somewhere for this, so we can configure this one. We're waiting so we can see here that we're just going to add in a plug in an object into this plug in, and then we can configure Figure it within here. The first of all, we're gonna create a template. And this will be with the border post. Smart gun will be inserted into several loves to form A so we're going to create a new template, compliant first view. And then instead of here, we could just created till late. I mean, and we can just hurry. It's a blonde. All right, so this isn't stoned, and we have to configure it. So bunch of the exports instead of her grades in that conflict, and we can see over previous code, and we reply bins right here. Open his own Ain't No. I'm Jake. I want to help you This. So we're using this service fund system plug in between stoned and tightening border posts , which you can see right here pulling posts past. So one thing we're going to change about this is we're just gonna go the block. So we're going to create a blood folder inside of the root of our project. Let's create that. All right. And instead of here, we want to game it slash blawg and then insider there. I wanna put in hose so its creator pose Instead of here, we will have a merchant files. We'll also created folder instead of year Will have images. Soon you can put in a actually its name, its assets. So we're gonna have all of our posts markdown files in here and then our images within here . Now we can create a new file and then with his name it First art Young Bruce, don't MD And that's the ending for Mark Tone. And then I'm just gonna piece in a and mark down codes. So actually, I've got a dash. So in Martone, we can add the configuration within these three dashes So inside of here I'm adding in the title and author in a full meal, and we're just setting these all of these values so that we can use them with on our block post so we can dio IHS. So it's going to block posts and then MD I worked on found and then we can add in the temple. Just copy that code and we want to go to switch one and then we want to dio title, so it should be going into all of these, and then it will make the following post. It's slash blonde and then the title, and it will convert this and to slash plug. It's my first dash, Martin. His post. The name of this file doesn't matter. It just six. The type so know we can do. It's him devote. All right, refresh. It needs some working. No, we have to go to first. Such first benchmark dune. Those I came can see here. It says for rate, it's a blonde post. So in the next lecture, we're going to be loading in the data inside of this time point from the markdown without, so we're gonna loading the content in the title author in thumbnail. They were gonna load in these images in this ferree image. In fact, just copy this. This is the image that we're gonna be using for the post. All right, so I see you guys the next lecture 7. Loading in the Blog Posts: Hello. If you wonder this lecture, we're gonna be loading in the content from a marked own files into our I would say into our term flip tag bridge here. And so you can see that I've edited in a date variable under this markdown file, and she conceives his 10 16 2004. So actually, you just said that Davies gate. So we're gonna do six stash 15 days oratory. All right, so you say that she could see the data is no. 6 15 2020 And also, I renamed our template tank for a post intentions post. And then you can see that I chanced the tight name to boast and templates. I changed the post to put so no, What we have to is we have to create a page Crary using graphic you Oh, so I actually, this peach create copied pieces are a little bit longer, so I'm just gonna paints it in there. So this is a H career? Basically, what this means is it's going to do a query grad school career e to the growth you little database. It will allow us to access data on this page. So me are naming our query post, and we want to have a path that is a string and record and basically inside of this query pose. We want to have a post value, which is set to the value puce, which also has the past. So and then inside of here were driving in the i. D the title content in time to read. So we're just picking the post that matches this path inside of the road right here. So we're just grabbing all of this from that post. And instead of her, tell twit to access that data. Always you do. First of all, women pH changes to a layer to dig. So the answer or header year ago ISS And in each one Quinn's These rooms excess that the inside of the beach curry we do How were signed. Mm. Don't post. All right, you know, and then you can see it pulling bedded. So first work done. Post you can see right here is his first work down post. We can refresh the page. You can see that consumers. And so it's just taking the title and turning this into the route. So if I wanted to create a new Martin file. I can just I want to hear. And then we can duplicate this. No, if I can, we just copy this. Second are down post empty and then just right second second. So if we go over there when you see that automatically generated, you don't even have to restart your server. It'll automatically pull that in. So, no, What we want to do is one of pulling the type that all of this data from the post. So we never each one with the title. Just remove that text through the tangle. Then we will, when I have the authors was doing h three and then we can just you by prove good step. Actually, if I say this, you can see that we're going to get in air, and that is because it doesn't know where the author is from. Um, I don't know where we're not getting it here. Basically, he doesn't know what author is. He's really pulling that in your growth jewel query. Some center here, But you're just pulling author, and that'll showed in there so you can see that we're just pulling in more variables from our Mary so know that in the image every me dhe image and itself closes, sir. See who's and can do a colon. Represent that We're gonna use the job script Variable page. Uh, what? Any of it probably should And then in here. You wanna pull up the thumbnail home after the date? All right. So you can see report in the image and delicious and and start over here. Well, 10 room. All right, so we have her image, our author and our title. No, we want to add in the content. Can you teach is right here. We also have the time to read, which is automatically generated with Marco. Second is funny. The content we're gonna create a give and instead of here, sanctions self closes, dish ish mill equals being shut close Second, you can see it's pulling in all of the content from our burke down from. So if I were to close at 2nd 1 and reaction years working. So Hello, everyone. You can see it created an H one. Her friend. Inspect this each one and it has an idea of the tax. So you can see that we're able to pull in on the data from this Martin posts? No. We want to use the date. That's the date is right there. We won't include that so we can do date. And instead of here, do you buy the author on patient? Post them Think if you'd like to format your dates, so then they don't like the ugliness that is shown right here. And you are able Teoh in parentheses instead of unique new format month, month, month. So this just means the month day calmer and in the year, So you can see if I refers this for If I seen this post, you can see it's June 15th 20 Tony. And you have to make sure inside of remark down posts that you have a year in years, months, and then you have the date. All right, so in the next lecture, we're gonna be building a blogger rule they will display links to all of our posts, certainly will display link to this post, and also our second figure out of that room. And you can see here is the second post. So we'll be on a good on these posts and it will automatically update if we have more of these work down files. I'll see you guys the next lecture 8. Building the Blog Roll: everyone in this like sure, we're going to be building a dynamic Blundell that will display in all of our billing posts . So we're gonna do that. His 1st 4 words create a blogger page. So instead of her pages, this is critical of that view and was created 10 point. Yeah, And instead of here, we can just have blind who's okay, Siri Verbal. A person here I was having on ordered Lis and I and so to pull over border posts we're gonna use graph you all again. And I even understanding crear that we're going to be using. So here's a set of query and actually I meant to say page query. And so basically what we're doing is we're gonna create a query. It's gonna go through all of the posts and we will be getting eternal count and instead of here, will of the edges and instead of each edge is gonna be a note instead of the noon. This is gonna be each posts in the beginning. The I T entitled author thumbnail content in turn to read and regency them Reform writing the dates. So So we even need you. You dash four equals impregnated you close and change our own verse changes every of head and a V dash burned e equals who's and just want Look out post chicken. See, we have a node. So it was just had the V buying key his post and noone got i d. And there is equal to right there. That's her idea. So for each of her purse, you just promote the title on It's actually I knew this your navigation tag, and we can have each of these a she think with the two Cruz and from me worsens. And this, after over generations and to is going to be easy to each. You know who's node that title and we just want to do to our case. We're going to make it on lower case. And we are also gonna add in, uh, long slash bond slash worse and then we're gonna don't split. So you never please. It's space ready? Nothing. So it's gonna split into array that is separated by a space within the string. It's going to join up with nothing, and then we also want to edit a ending slash so we actually don't want to replace it with love and you wanna add a dash and see? No, we're going to each for blood posts and it's some guy name Agree update. So actually, as you're probably go into are selling creative meeting tag. Did all of this instead of give You don't have any tanks, which have you display a look so long and you can see here we have first worked. Impose second, work down towards weaken. Click on these. I'll take a citizen's posts. So you would be a style of this so that you could make it saying you could have the huge covered image inside of here Target and a gene image for each of these. So then you would be looked looking all of this for and we can add in the affair and all of that. I'm just gonna leave it to you to customize everything because we'll rebuild. It was the back end, so the first known would be easy to do after this so you can see we're going to click on all these pose. It will take us to those roads, and actually there's an easier way to add in the path of the posts instead of having to custom. We do this, we can just go inside of her graphic. You will query in a path until there and then instead of her, too, for are dealing. We can't do this. I just got a post that knew about it. And once we go back here, were you able to click on me? You can see what it was just tickets to that post. So we don't even have to format the title. You know, just automatically do that. So I hope I see you guys in the next lecture. 9. Integrating Disqus Comments: come over one. And in this lecture we're gonna be integrating comments into our block posts via discus and discusses an external service. And you can see its description right here on the documentation. Basically, it allows you to have comments on your born puts. It does include ads. So if you don't want ads, you would have to upgrade to 18 subscription. So on the documentation you can see you have to go to discus that come and create an account, and they only have to do is created site. Try ancient already in sight. So I'm recruiting you one, and I just going to send the website in portfolio block. So category um, they don't have education. So you're just gonna do tech and creates a and we want to just have the basic. So if he's going all the way down, just gonna basic and we are going to do and so many only with universal code. Now you can see all of these instructions. And if we correct the documentation, well, we have to do is some of you discuss So I was just going to solve it. I have to stop her server and human still you daesh discuss. Um, we have to import view, discuss into our mean that jazz so you can go to remain jams and we can just important here and then you don't use to discuss. All right, So how we can run our server again and we actually, there's an air within the documentation because of you discus. This name from component doesn't work anymore with the plug in that we've been stoned. So you actually have to use this right here, which I found within a get huh? Or request. So thanks to you, they collected coding that solution. So instead of our post, instead of here, we can at the end of the page sunscreen a mean it was put on the content instead of her main tank. And then we can have a discus in our short name is going to be, but for your below two and the intent to fire his page don't post on a town. So if I am correct, we should be able to just say that and you can see that we have zero cummings. So obviously you can see that you need advance from styling so you can go inside of our hydrate here selling cools, but 80% and then we can have the merge and zero. Obviously you can make. You should be adding and we're scaling than this. But this is your some basic. So she could say that you can add in comments instead of here. So if I wanted and currently could see Great Post and then just hit post and you concealed Longuet already, sort of. A lot of people log in from other sites. If they've already used discus, so you can see it. Just post it. And it says one comment. If every first the page and you can see that the comment is still there because it's embedding and I frame instead of your saying so if I go to the discus had been page to go to the same undiscussed, Um, I should really just configure and complete set up Smith and you'll be a little moderate comments. It takes a bit for of the comments to show up. You didn't see that if before to go to that post. Then they would be on the sea off the Cummins for that post. And if the paged her post that titles. If you changed the title of that post, it would actually change the comments. So a better identifier might be if you used the i d the pain. I'm just gonna be using the title for right now, so I hope I see you guys in the next lecture. 10. Using the Pages API: over one. And in this lecture, we're gonna be using the grid Seuin pages a p I create pages. We'll display all over products inside of this. Okay, Some file. So this Jason file is gonna be mimicking a data requests to a database or a server that you have seeking Sumi of our products and I d the name your price and that is it. And so we're going to be creating a page for each of these products. So the pages AP I don't works is basically all you have to dio is going to our resume that server that Js instead of here you can see we have a mantra that exports soon we or person in the a p i if you had doctoring pages and instead of year this is where we can create all over pages, and all we have to do to do that is we can run a function concrete page and the stakes and Andrea and saying that object, we are going to have a path and the component that we're going to use. So the pants it's inside of here. We've been specified, and we're gonna have a component. So we're gonna do is working it loaded in the street sound farm and create a product page for each of these products. So to do that, we're just gonna do let data equals requires. And this is just gonna loading the J some fun. It's really you dance, finish sores. In essence, she stated country some and we can do, you know, index Providence that's gonna get the products array, that four in each product error, function and incentive. Each of these products when we're gonna dio, is create a product in the path of excellent worms. All right, I continue waas and then with this ad and ending slash so you can see we have a 90 value inside of you and the component, and we're gonna use Israel. Want to treat a complain, and this is gonna be a product that year. Send it here. The creative template we're never allowed. And it's for that. And instead of here, we're just gonna add a Did you confront product for right now and right here we can just copy this. You can change this to prime. So every time you change something inside of the groups would act server dodgy s need to research your server to see the changes. I'm gonna canceling server and rerun and let me just close some of these. She tamps It's our servers building, and now we should be able to go to Lynch product French. The idea of that product, you can see his product because that idea it has generated right for that. If we take that, if we change anything within that idea, you can see it doesn't find it. Is this not a rope to know we want to do? Is we're gonna pass in data over creating the pain to the creepy J f B. I has a The context which allows is to pass in data to that page so you can see the page context. So only to do to pass in data, Yes, we can add a parameter called context instead of here, consent product to and product. So then, to access the data we can just to powers in context from and I think we have to Yeah, we have to research. So you can see right here is showing. You pass it in and you're also you would use curfew. Oh, too little this in. So if I start running, you can see right here we have our Jason object, which is the product that is getting passed in so we can construct is be issue because context isn't name or title. One change with three sections each three and takes them that race. Okay. And I should probably actually changing this woman where you can aiding the dollar sign. I could have just come can aged dollar sign of your strong inside of there, but so you can see one page worksite with three sections and the difference with this between actually creating you The fire based routing, the dynamic routing is that this generates everything, right? When you run, you're project. So it would generate everything right now and then. It wouldn't use this standard about Jason file ever again. Even if somebody view this page there, information is static, so it won't change any of that information. So if I change something within the stated that Jason and I didn't rebuild our application , it would still have the same information in here. So you can see for a change the product a different one if I wanted to, and we can see. It's his three page website with three sections for Paige. So this is just mimicking that's pulling in the state of for an a p I and then creating pages with each of the products from the A p I. So this is very useful and fewer a se You had a blawg and you actually wanted to use a an external see and us, such as content for you can get the data from here and create all of your posts from here instead of using Markham. So this was kind of a long lecture. Well, I hope I see you guys in the next war.