Build a BLOG Using NUXT JS & The CONTENT module ~ Vue JS Tutorial

what is going on everybody my name is holopots and in today's video we're going to be learning how to create your first blog in nuxjs we'll be building this little simple blog so you can see it's very simple we have an about page you can see how fast this is as well it's lightning fast it changes super quick um and you can see here we have my first blog post welcome to my first blog post using content module learning few js so if we click on this you can see here it's got a blog post and it's just got a bit of text in it now this is all marked down so if we go back and we go to the other one here you can see it's all using markdown to write all this stuff which is awesome this using something called the content the next content api or not api module [Music] um but yeah so if you click on get started you can see here different ways to start your project create next app is a good one mpx is the way i do it um which is mbx or you can install it but you'd have to obviously install the mpl nuxtap um development module as well um the best thing about it it's automatic roots you put a dot few view file underneath pages and it will automatically add it to your roots so you're able to navigate using stuff such as next link to about and that would search for an about.view page inside of your route okay everyone so as you can see we now have tutorial projects we're in a directory called tutorial projects now in here we're going to run mpx you obviously have to have node npm installed to run this but you go on mpx create next app just like create react app or create few apps stuff like that um it's create next app which is great now we give our project a name so i'm going to say my first blog i'm going to enter and it's going to start creating our blog so once it starts loading a little bit we get some um stuff project name so we're just gonna say my first blog i'm not sure if this has to be uh friendly it's it just say project name so maybe we should just if we write nothing i'm pretty i'm really sure if we write nothing it will use the default we're just going to say my first block hit enter and we're going to choose a program line so i'm going to use javascript i'm going to use a package manager npm now you can choose to use any of these for this one i'm going to use none but in the future we're going to be using tailwind css and maybe some of the f1 if you want to see them so that's it none i'm going to choose to use content now this is a module called content you can also choose these two as you like but i won't be using them in this video and content is how we use markdown and other things inside of our project so let's say enter i say eslint enter and i'm just going to click none and for this one you can choose e4 but i'm going to use surface side rendering um universal server side rendering or you could do a single page app if you want to but i think ssr is a lot better for seo and stuff as well and now we can choose whether we want deployment target server or static i'm going to choose static for now um and then i'm going to just select the recommended here um jsconfig yep uh what is your game name let's say tyler potts death hit enter first job we're not gonna use uh you know we use kicks and i can post it to uh github later for you guys that will be in the description of this video and then it's gonna start installing so i'll see you once that has done okay guys so you can see it's now finished and here we have to get started and to build and start for production so if you're building for production obviously you're going to run the second one but we're just doing development for now so let's get started so we'll go cd into my first blog then we're going to open this up into code and then we're going to mpm run development so as you can see here all i'm doing is concatenating these terminal commands and hitting enter and now this can open it up and start a development server at the same time so let's drop this in here and as you can see it's going to start the development server so let's go in here let's start showing you what's happening here so as you can see we have a lot of things in here now the main things you need to look at is pages this is where all our pages so index obviously is going to be the root file um but we've also got middleware we won't be needing middleware for this so we can actually just delete this if we're not going to use it we've got layouts which is going to be our default layout so everything we write inside of our pages gets rendered into this nux js file here so we could actually let's say if you have a navbar that you want to show on every single page you would put that inside of your layout then we've got content so what content is is our markdown area so this is where we can do our posts we can even do pages from our markdown if we wanted to i'm going to show you how to do blog posts with the content using markdown so you write all your blog posts in here you can pull these from anywhere as well you can pull them from git or whatever but for now we're just going to pull it from here and you've also got some options you can give some like custom data you can pull through into a template we've got components now this is where we keep our few components so pages are just components but they are added to the routing of the or routing of the um app whereas components are just things you can import or use in other pages or for components so that's obviously just how normal components work and pages are more added to the routing plugins again we're not going to need plugins but you can add some if you want static this is where we put all our static files if you want any images that are always going to be around us i'd like you to put it in there you can also put them in assets where you can keep up their images and stuff one thing we are going to do is create a resources folder in here where we're going to put our blog images so i'm actually going to copy those over and drop them in obviously you can see we've got our dog 1 and our dog 2 and as you see that in our resources so now we can import these later on these images will be in the git repository for when you download this so you don't worry if you want those or you can put your own it's up to you and in store this is going to be a few x store we're not going to use this for this tutorial but again it's just worth knowing that your store is in there so let's just delete that for now there we go so we've got our config and this is where you give our title so this will be your heading title your metadata some links if you want to include external css fonts or anything like that all right css is in this one sorry links are just links to other things as well plugins if you're using any uh nux plugins components it auto import components so if you create components inside components this means you don't have to do an import this will automatically do it for you which is awesome and as you can see the most important one is our modules now inside modules we have this next content and that's what we're going to be using to write our blog posts um so there's more on this on the internet i'll try and leave the link in the description if but you can go to right here to go straight to it as well if you want to read it there um awesome so we've got all this we've gotta figure out so we're gonna skip these parts now and now let's get on with the rest of this tutorial so the first thing we're gonna do is well i'm gonna show you what it looks like so this is rendered here so i can copy this we can head over to our web browser oh it's already in and there you go we've got my first blog and you can see it here you've got logo important stuff like that now if we go back you can see in view here we can put in here let's say test save go back and you can see test appears in the top corner that's going to be on every single page because we've done it there so let's say we create a new page quickly let's create a new page called about dot view now inside of about we can say um something such like well we need to create our view template first um and we can just go in here and just say dot about page and we can just say h1 about page save now if we go back to our thing here and we or our default template and we can just say uh h to test just so we can see it a bit clearer and we go back so you can see on this home page we have tests obviously to get to about page we not all you have to do is put forward slash about because we have a page called dot few so it's automatically going to add this to the route because we say about there you go we've got a test page which is always on every single page and we've got our about page so this would probably be where your nav bar is or something like that and let's just remove that for now so you can see that works really well so if we go back now it's just about page if we remove that we go back to our home page now we can link so let's go back to our index you can see we've got a button here which has a and it gives you a href let's remove both of these you can use something called next hyphen link and you can say to and let's just say about hit save go back refresh you see we get the about if we click there it takes us to the about page so that basically allows us to navigate our website which is perfect we don't need this yet so let's just remove this oh let's remove that and let's also remove all of this let's remove everything remove this ethernet container we're going to remove all the styling and there you go so that is that all gone so we're just left with a default page which means we're gonna have a blank page so let's um go to our layouts and well click on default and let's also remove a lot of things from here too it's a lot of styling here which we just don't need so let's remove that and in here we're going to keep our nooks but we're going to create a header component but first let's create some global styles so these styles in here are going to be what we use everywhere so let's create a margin 0 padding 0. we're going to do a box sizing of border box we're then going to do a font family of just sans serif i don't really care what the font is for this tutorial but you can add whichever font you want let's give the body a background color of e e by default just so it's not white uh let's give it a text decoration of none so we have no no uh styling in our links a p with the margin bottom of 15 pixels and the p of last of type of margin bottom zero pixels safe there you go that's all the styling we need across the whole website and then we'll do the rest of our stuff in components so we don't need this logo anymore let's just delete it bam it's gone let's add a new file though and we're going to call this header dot view now if we go into our default again sorry confused for these open let's just close those we can actually just straight up right header we don't need to import we don't need to do anything else we just call header now let's create a few template here so you see i've just typed few and entered it gives me all the few templating that's down to a plugin called futa or feta i don't know how you pronounce it this one here by pinewoo um you can go install it and it allows you to do some keys it's basically intellisense it has all this you can see it here um so yeah go get that if you want to do some view development i highly recommend it let's move that so we've got our template in our header so let's actually um start writing stuff in it so we want to create header and now in here we want a title which we'll go call my blog you can write whatever you want in there we're going to create a navbar which is going to have a next link um which says home we're then going to copy this and we're going to have a next link that says about so we're just going to write to you can also have a separate blog page as well if you wanted to so it's not on the homepage we're gonna do our blog posts on the home page because it's a full blog website but you could also just um write you could also just have a blog page as well so if you want a separate blog page you create a new page and do what we do in the home page in that page if that makes sense so as you can see here this is all we need for our header component so if we go back to the web you can see we've got it here but let's style it up a little so i'm not going to um i'm not going to style it i'm just going to remove the script tag as well i'm just going to drop in the style here and here you go this will be in the git repo but you can style it however you want let's go back and there you go we've got our blog and our buttons so let's head over to our main page so go back here let's go we no longer need the default that is all we needed for defaults let's delete that and we no longer need the header so let's delete that or close it don't delete it sorry my bad bad wording um so let's just close the leads and now in pages we've got index so we've got nothing in the index page so it means nothing's actually going to render right now so what we want to do is we want to add something so we want to i'm going to wrap this in a i'm going to wrap this in a home page item and then inside of here i'm going to have h2 which says latest posts save and if we go back we refresh you see we get latest posts now we actually want to get our posts but we can't get our posts because we actually have none so inside of content you can see we only have hello and this isn't what we're going to use so let's delete that let's create a new layout called new file and let's call this uh we need to actually create a directory called blog and then we need to say hello or no first hyphen post.md we'll do for this one there you go so this could be our first post now we can add in content such as hashtag uh my first blog post um and let's remove the capital from first uh and then we could just write in anything here so i'm just gonna copy some lorem ipsum over with a little bit extra there you go so we've got this little bit of content here that's great now how do we get to that so most people would think obviously it's in content so we can say blog hyphen slash um my first no it's called first post sorry first post but look that's not cannot be found because it's not actually added to our re uh our um our pages is it it's in blog content so how we render this is by creating a new folder calling it blog and then inside of this we're going to create a underscore slug dot view now how this is going to work is we're going to basically run view again create that and then in here we're going to say article and we're going to pass next hyphen content uh it's actually a one piece component nukes content and then we're going to pass through document and we're going to pass through an article obviously we don't have the article here yet so i'm going to copy the styling over for this as well so this is going to be our actual blog template so our blog post template so you could add default stuff in here let's say a title whatever you want in here maybe a header image or sync in here it's a default thing but for now we're not going to add anything so in our export we're going to actually use something called uh async data so we're going to write a sync and then we're going to write a sync data as a method and we're going to pass through two things we're going to pass through content now this is the most key point about this whole thing content is where we get all our content information such as our blogs and posts and stuff like that then params are any params we pass through so now we're going to create const article is equal to a weight now this is where we do a fetch command on content dollar content we're going to pass through the name of the um folder which is blog and then we're going to say params dot slug dot fetch so and then we've just got a return in an array or not an array in an object our article so what's happening here and it might be a bit confusing so what we've done we're using async data um we're getting a promise and we're just gonna we're gonna wait until it's resolved from the contents we're looking inside of our content directory which is this we're searching for the blog directory and then we're looking what the params slug is so what the params are is let's say after here we can say our blog name so if we say blog and then uh first hyphen post you can see there it is so that's what we're grabbing we're grabbing that we could also put a specific one in here if we wanted it to be specific but we can actually use parameters to get dynamic data and then we fetch that data so we fetch the information from this post and we store it inside article then we pass the article to our next content which is here which pass it through and it displays it on screen now nux content is a part of the content uh module and that's how it renders it out it renders the document what you pass through you can also use csvs and other stuff xml and stuff to render in there but for now we're choosing markdown so you can see here it looks pretty good um we've got our styling in there article and our font uh and i think that works well there you go so that's how you get one blog post um but how do we list them all because at the minute if we go back home you can see we just don't have any so we can't actually navigate there so let's go and list them all inside of our um post so if we go to index oh we're here my bad and now let's create an articles area and we're going to pass through all our articles in here first we need to actually run an export default we're going to say async again we're going to say async data like we did before so async data just allows us to get a promise or promise data or async data um instead of just grabbing um normal data because we need to do a fetch else would have to it might not wait for if we just use normal data it won't wait for it to come through if that makes sense so we need to get our const articles this time we're going to say await we're going to do the same thing as before we say content and this time we're going to say blog and the post from our blog we're going to say pram we're going to grab the one from the slug but this i'm going to say dot only and then we can pass through some parameters in here so we can only pull through some certain certain parameters or um data but for now we're not going to do that we're going to i'll show you that in a second we're going to say sort by we get some default information so created app and we can choose which way it become comes through and we can say fetch so what's happening here is we're saying sort by so we're going to sort it by credit so it's going to show which one is uh the latest post and it's going to display it first using the async we could do descending as well or ascending and ascending will get us it in order um we're gonna fetch and then all in here we're just gonna return articles so this should actually get all the articles oh there we go let's go fetch all our articles now you might be wondering but this is just getting um the slug again so it's just gonna get the one slug we look for but that's not the case um this instead will grab everything um so yeah that's what that's doing so let's now up here in articles run a dot article a singular article and we're going to use a fee for um directive to loop through the article of articles so get all the articles and articles and go pass through a key which would be um norm we'll just go past through the article it's the key for now but normally you would obviously pass through sank unique to it so we'll show you how to do that soon and then going to give it a next link let's just close this side so it's a bit more legible and this is going to be two and then it's going to be linking to our thing but we can't actually we don't know what it's coming from or how we actually link it there so to do that inside we need to actually add something to our post so we need to pull some data through so you can see we've just got a nux link we're just trying to go to two but we don't actually know what this article has it doesn't actually give us anything it gives us a path but the path won't link directly to the we want to use the slug to actually find this post so let's go to our post now up here we can actually pass through if we use free um hyphens we can actually pass through some data we can pull through on the post so the first one we're going to look for is the title which will be my first blog post we can actually give it a description which will be welcome to my first blog post using content module using the content module we're going to give it a slug now this is how we're going to be able to render it so we're just going to say first post basically this slug will be the name of the file which is first post then we can actually pass through an image as well so we just need these slugs so we know where we're storing them we're storing them all in resources blog hyphen one so we just say blog dot blog hyphen one dot jpeg and that's the image we're gonna use that's our featured image so let's save and now inside of our export function here we can say dot only and only takes an array and inside this array we just give the items we want we want the title we want the description uh we want the image and we also want the slug and this is how we're going to get this we're actually going to go in here and say well we need to bind this because we want to pass data and we just want to say 2 and then we're going to give the name and the name is just going to be the slug right then we want to pass through our params we're just going to say slug and the article we want which article dot slug it might be a bit confusing but you'll get used to what this means in a second so we're just passing through the name which is slug which is what we're looking for and then we're parting through the params of slug so the name is what we're looking for in terms of file so now in nox we're just going to say image and we're actually going to have to bind the source again and this is going to say require so we're actually going to require something and what we're going to require is we're going to use backticks here i'm going to say tilde assets resources and then we're going to pass through the article dot image name so that way we're going to our assets our resources and checking out which image we need to render here um and that's where we that's why we're requiring it because now we get it through there so we're pulling this straight through so we've got the image now we need to create some detail so we'll give the new post detail we need a h3 and inside here we're going to use the template strings to say article dot title to pull through the title of the article so what we passed through here into here we're gonna get the description so we're gonna say p and we're just gonna say article dot description and that way we're going to actually pull through the description we wrote here on to the first page so this gives us a short description for us and that is all we needed to write here but we do need to actually wrap this in an article inner just for styling there you go one more uh one too many you have not gone enough there we go so we've passed that all through now this isn't going to look great so if we go to our home page and refresh you can see what it looks like it's huge but if we click on this giant image it could not be found back to home page um and the reason for that is so we gave block content blog description oh no it's here we're looking for isn't it it's looking for name slug oh sorry i actually need to say blog hyphen so we need to actually give it a path here so you see here we've got blog and then slug so what we're doing here is we're saying blog that's the directory like here kind of like that blog hive and slush but instead for slash we're doing a hyphen slug and that's where we're getting this here sorry my bad so now let's save go back refresh and as you click it you can see it now gives it blog first post now we can actually pull this slug out so if we remove this blog slug and just write slug we can actually pull this slug and drop it into pages move and we can delete the blog category there save go back refresh and if we click it you can see it just goes there and straight to the post name my first blog and there you go so we'll leave it like that for now so now we can go to our blog directly without having to go through the blog stuff so we don't need the um directory but it it can make it easier to read if you are creating a separate blog page but for now as you can see we've got all this which is nice um and everything's working everything seems to be pulling through but we need to style it so i'm just going to drop in the styles i have um hello cancel please don't do that i'm going to drop in these styles over here so let's go down here just so it looks nice again all this styling will be in the git repo if you want to check it out i'm not going to go over in this video because it's all about making a blog using nux and not the styling of the blog and as you can see here we've got this nice little post now so that looks really cool we go to our about page we haven't actually wrote anything in our about page but you can see the point you can add content in here and what you want in there as well and then we've got our latest posts right here and you click into my blog and you've got your blog we can go home now that is basically everything to it but let's create another blog post just so you can see it working with as many as you add so let's just remove this and let's close collapse that now inside blog let's create a new file and call it second hyphen hyphenpost.md now we need the same stuff at the topics we're using it so we're going to need all this so we're just going to say my second blog post welcome to my second post slug it's gonna be second post and then blog is gonna be image two now we can add content in here and i'm actually just gonna copy some a big chunk of content from saying i wrote the other day and as you can see here we're using a lot more we don't need that you can see i'm pulling through a lot of things with my h1 of mastering view and all this so you've got a lot of different options here at a list over here and loads of stuff so let's just save let's go back uh undefined what's undefined what did i do i don't know what i did i think i may have saved too early when i did so there you go so we've added a new blog post and there you go we've got our second blog post also do you guys like these images i really like them awesome gone from unsplash.com if you're wondering you can head over there and check it out um but yeah so my first blog and then we've got our second blog post and we click on this you can see we've got all this stuff we've even got the styling here the um code blocks here okay so that's our second post you can see we've got a lot of different elements in there um and we go home about and there you go so that's your first blog now you can add a lot more to this there's a lot more styling a lot better things obviously if you spend a bit more time on the code and stuff you can actually build a massive beautiful blog you could even in one of these you could have a next blog post in the previous blog post you can show the latest blog post or relevant blog post if you're feeling crazy you could add tags to this so using the so if we were in um here we could just say like tags and just have a list of tags say tag one tag two tag free and then you can use those in search um and you can use those while you're searching so you can actually add a search box up here and search for them but we're not gonna go that in depth today guys i hope you learn i don't want to give you too much too much overwhelming information for now i just want to give you short and sweet uh simple tutorial where you can take it to the next level now if you want to see the more advanced stuff please let me know because it's something i'm looking to do um and i'm going to be releasing a lot more advanced stuff on nox.js in the future but it's just the first next uh project we've done i think we did a a basic one a long time ago but it is the first blog post we've done in xjs using the content module which is absolutely awesome so i hope you enjoyed the video guys if you did don't forget to leave a smashing thumbs up leave some comments below share it to all your friends smash that subscribe button hit the notification bell and i hope you enjoyed the video guys thanks for watching and peace out [Music] you

Channel: Tyler Potts

Views: 9,520

Rating: 4.9120879 out of 5

Keywords: webdev, javascript, wizard, css, scss, js, vuejs, vue, website development, website design, app dev, app development, web developer, app developer, developer, programmer, nuxt js, nuxt, nuxt content

Id: 1SAZMFwYUDE

Length: 29min 20sec (1760 seconds)

Published: Wed Dec 16 2020