Static-Generated Sites with Nuxt JS (FREE) | Coding United | Skillshare

Static-Generated Sites with Nuxt JS (FREE)

Coding United

Static-Generated Sites with Nuxt JS (FREE)

Coding United

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (39m)
    • 1. Course Introduction

    • 2. Installing and Setting Up Nuxtjs

    • 3. Creating Pages

    • 4. Using Components for our Header

    • 5. Manipulating the Head

    • 6. Adding the (S)CSS

    • 7. Loading Bar and Global CSS

    • 8. Transitions Between Pages

    • 9. The End?

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class we will be using Nuxtjs to create static generated websites that are amazing for SEO ranking and loading speed!  Regular websites don't allow search crawlers to see the content of your page, therefore you never rank.  With Nuxt js, the site is generated into plain HTML so that the search crawlers can actually read it!  How would you like to be forced to read Latin when you do not even know a single word?  Be nice to the search crawlers and use NUXT NOW!

Meet Your Teacher

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course Introduction: Hello, everyone and in this course will be showing you how to create a website. Using nuts. Chance and noxious is a few jazz framework that builds static websites. Um, using view JIA's. But basically what next does is it creates the static files of your website so that in search engines are able to see all of the content of your website to regularly, this would be loaded in from a server and then it would be loaded in unto the cunt onto the client. So this surf but wouldn't actually went long enough for the content to be loaded. They would just look at the planet Shamil. The most websites they don't they don't have server side rendering, which is what makes shares says so. They are actually placed high in the search ranking because the search box can't actually see their content with much shares. It just generates it. So then all of the search box can see all of your content. Also, since his plating Shimo, the websites are easily able to see your website. So then it loads in very fast. Some of the websites that were you made using notions is Fox News and up work and this is just basically a free lunch website. So if you like, this is the website that we made during this that we're going to make in this court's you can see I've paid transitions using the router. It actually changes the your own, but you aren't able to see Pisa isn't like a flash with CSS loading in and you can see we have transitions. And if we will reload the page, you can see that we should have scroll bar when we refresh the page. So I hope you guys continue this. Of course, on harder create websites using Nuck chefs. 2. Installing and Setting Up Nuxtjs: Hello guys in the select Shelby shown yard and so noxious, which is the view Js frameworks that we're gonna be using to create a website. So now we have to do is go to the guide and we have to start our luxurious project. So before we can start winning to have no Js installed So then we can use NPM, which is just a node package manager. We just go to no Jason Orig, and then we should be insulting the LTs version, which is the most stable built. Don't you have no Jansen sold? You must make sure that you have a later version of 5.2 point Oh, of npm. So to do that, we can just go in here and then we can do MPM access version. And this isn't your terminal or command prompt, and we can see right here I have 6.13 point one. So if you don't have a later version, then you have to update that certain know what we have to do is create our looks. Yeah, should to do that. I'm gonna use MPX and we can just copy this code right here and put that into our terminal . So we're gonna do MPX create knocks, dash, and then we're gonna name it. So we're just going to do, I would say with nuts bets, and then we can just get into and l creator application. So once this is done, we're ready to start navigating through the world of next gas. Okay, so now that this is done loading, we just have to answer a couple of questions. And so we're just gonna do the default project name? Uh, we'll just do the default project description and then name of Arthur. I'm just gonna put in my name, and then we'll do. We're gonna use NPM, and we're going to use any your wife for marks. No customs server frameworks. Uh, none of this for this. And no test frameworks. And we're gonna You need to use the universal app, not single page. These universal generates a static web site which you can use for shared hosting. So you don't have to pay for a really expensive hosting because it generates static code for you. We're just going to enter on universal, and then we can just skip this. So once this is done, you can continue to the next lecture 3. Creating Pages: Now that we understand, exchange this directory structure. We're just gonna actually start running our development servers, then automatically reload our website. Every time we save Do that, we can look at our command in the package junk. Jason, we can see the deaf for development. All we have to do is NPM Road, and then you can run any of these Borden and just be running that development command, which should start our server and make sure you're in the directory of your project. So it should have all of these files in it. And then we can just click on this link and copy it, or you can click on it, and then we'll just paste it into your browser. Bacon. Just close these tips, and you can see this is just the boilerplate loaded in for nexus. You have only to the documentation and the get home. So, you know, we're just gonna completely rip up everything that the boilerplate has, because we just want to start from scratch. So we're just gonna get rid of all of this instead of the index age in the index pages just at the root of the website. So I can just put in India page. We'll just leave that Kreis of container, okay? And we don't want any of this default styling. Let's just exit off event, and we're gonna be using any components right now. What? We might be using it later. So actually, we should probably just coming there, if you could just Okay, so, no, we are just going to put in some code for index page. So we are going to have a header, and then we're just gonna open that up, and then we're gonna have a We're just gonna have an h three and then we'll have that logo class on it, and then we're just gonna put next website, and then we'll have a UFO or none ordered list. We'll have a lie, and then we're gonna go inside of the ally and putting a tag. Well, actually, we want alike time six or three, and then we're gonna have innate happens tag inside of that. And right now we don't have these links. Small it. Sorry, actually, this is going to be Ain't next dash link, cause that is what your source e use with looks four year links. So I'm just gonna open this up and then we'll just put in home above in contract. So that wrong, and then we're gonna have a to attribute, which is basically just a drift. And they were gonna make that go back to the home directory so that we have this done. We should not see this. I guess they really should actually just add in slash. Okay, maybe this. What is our air here? Okay, there we go. Now it's working, so we can see knocks website home about contact. And we can just add all the selling for this later, and you can see that we're on the, uh, home directory for a website. So, no, we're just gonna add a main tag for the main content content of the website, and then we'll just have a heading, and they're going to say this is a website made using knocks dance, and then we'll have that. And then we're going to create a P take. We're gonna saying or arm, and then we'll just do, like 30. Okay, so we have this induct page now, what's also create our about Pete, We're gonna do a bottle that you and then We're also going to create a contact peach and then we're also going to be creating and another page and it's we're just gonna donate you . So let's just copy all of this code and we're just single, and then we're just gonna add in a different more, and we're just gonna change the heading for the about page, contact us, and then we'll get rid of this form right here, and then we're gonna have a donate heading and then for the about page we're gonna have about and then we're going to give her to this p tag. But wait re copied all of this code when we didn't have a donate page. But no, we have to add in those link for it. But we don't. Then we'd have to copy our code and the replace it again into all of these pages. No, since we only have four pages, this wouldn't really be that bad or we have to do is have an ally and then knocks dish link . And then we could just put in here Don't to. And then we just have donate right. If we have, like, a 1,000,000 pages in your Google This would be terrible, because then you would have to at all of those pages to the next. In the next lecture, we're gonna be learning how to use partials inside of our louts have a header that will automatically be added onto every page. 4. Using Components for our Header: so we can see the 1% that we made from our previous lecture right here. With all this terrible selling and the ones that looks terrible, so know we're gonna be learning how to add in a never bar into our layout. So before we were just heading this adding this header into every single page Well, we can What we can actually do is cut out this header code and then in our layouts were creating new folder an impartial and inside of here. We're gonna have our header about you just paste torno actually to created temple it and then inside, if you're just gonna ever had her, we should probably actually change. All these links are home. That's right About this is slash about and then inside of here, we're gonna have slash contact. So then what we can do since this is it the fault? Lay out. Every single page is being inserted into this next element right here, so we can just add in our own script a and then we're gonna have an export default on. Then instead of here, we can just go into our previous paint and we can see our example of loading in a component . So we're just gonna go back into our default, okay? Just peace that in there and then we can uncommon this code. We're just going to change that. I can do controlled edict, uh, at it, multiple iterations of uncertain string. Just get out of the logo, and then we're gonna have header. And this is actually the wrong directory. It should actually you speak into the partials seven slash header, and then we can just put this header just right above our knocks, which is where our pages being inserted into. So all of this code right here is being inserted into our nooks instead of earlier. So if we actually go into wait, I have to do it. Our previous headers instead of other peaches, it's gonna delete all of these and believe these, and that should be our from the meeting. Okay, so we can go into all of our different pages g over accountant and Oliver pages. It looks like they work to know only we're going to do is we are going to learn how to edit the head of are pages. So then we can actually have this right here are heading. Tag is the title of our website. We're gonna learn that in the next lecture 5. Manipulating the Head: Now, in this lecture, we're gonna be learning how to edit the head of our document so that we can change, like the meta info or the title, which is what we're gonna be using in this case. So all we have to do is inside of our index page. We're just gonna add a common center for export. Before that, we're gonna have a head. This is a function. You never open it up. Then we're never turned Mrs an object so side of here always to do its title. And then we're gonna have our next website so that if we go back to our home, you see, the title is next website, so we can just copy this code right here and edit in tow all over pages contact does and donate to us and finally, or about page when we should be able to go toe over individual pages and you can see the top changes with it. So to have, like, a link tech. If you wanted a link to a front like a girlfriend, you'd probably actually want to do this in the land. So then you wouldn't have to add that to every single one of our individual painters so we can just go to our default layout inside of her, Lance. And then we can just add a comment after expert default instead of her components, and we can just have our head, and then we're gonna have a link. So this is actually made for having multiple linked eggs. You're gonna have an array, and then we're gonna have another one, and then we're gonna have it's gonna have the attributes of this link tag that we're generating sort of row style sheet and then a trip, and then we can just go toe a front shot google dot com, and we're just gonna root enough. Fine. So I think we should probably just use later so we can just copy this interest. What? And it should be automatically loading this end to our website. So if I just hit view page source, then we should be able to utilize that fun inside of here just by going into our each team over right here. And we can just chill, mate all of this and makin just put in here later. Hopefully this will work, Okay? Actually, I don't think this is working right now, so it's using surf. There's not loading it correctly. So and link relic of style sheet. We should try to refer. Only we in air here. Um, wait, that's we Towards the top. We wish you just try to restart a server. Okay? Hopefully this works. We have a real shell sheet. A trip? What's this? Um, is there anything inside of the documentation for this? Okay. Head made, uh, return. Oh, we need to have a return function. Sorry. Okay. No, this should be working. Oh, my gosh. Sorry about that. So we can see that it has all over fronts living. So I've been kind of just ignoring this for now. But in the next lecture, we're just gonna admiral CSS for of our website. And you can just skip that one, because this is kind of supposed to be just a nut shares tutorial, not a CSS tutorial, but so I will see you guys in the next. Like sure, if you don't really wanna you Disease, that's just skip it 6. Adding the (S)CSS: Hello, sons like sure, I'm going to be sure knew how to add in all of our CSS for our website. So, actually, we're going to be using sass, which is a CSS processor. So to do this, we just were in our header component right now because I'm gonna be adding this styling for the header. So I just have to go under a template style slash style. Then we can just go inside of there and then to add C s CSS, which is the version of sense we're gonna be using again. Just to reign equals as ceases. But you wouldn't have to do this if you just doing regular sea assets. Also, we're gonna be using scoped so that make sure that all of our CIA says only targets elements inside of this individual component or page if you're doing that. So I'm just going to do our header. I guess the scope doesn't really matter, though, since we're doing sand. Second, just add in the elements inside of here, and I'm just going to be using says for the variables and, uh, the nesting, which basically I can have a header here and then l I you know, it'll compile this into better, and then I'll have the code inside of here code and they don't have header Ally. And then it'll adding the code from here. So it's just nicer to use gives you structure like your humo. So I am going to be using a website called coolers dot CO. And this just helps you generate color schemes because you just press space and it generates new colors, that much, dealer. So we're gonna have a background of this glitter and back road. Sorry, Actually, were in evident blue. I mean to say blue, this blue, whatever this called hero. So that's a nice car. And then we're gonna have that color of it. We'll make it that white. Okay, Now we're gonna have with 100% height. You still eight? Um, and they were gonna display flex and flex direction. Rome justify content, and then we're just gonna space between okay, so that makes him go to the sides, and then we're gonna have some pairing. It's a top and bottom. We don't want any. And then on the left arm, right, we're gonna have five actions to make that a little bit bigger. 7 a.m. Yeah, that looks about right. Okay. So, actually, I think we probably need more contrast versus our white color for the text. So seizes black. Yeah, that'll probably do better. So also we're gonna center are elements because the space between Makesem ago as far away as they cancel of our spaces between are moments because their main elements is this heading and this ul tech or one ordered lis. So we're gonna do online items center such that you center them up, and then we're gonna go into our I think it's an H three each three don't logo. And we're just gonna make this front size like three m. That may be too big. Okay, that looks good. Fun. Wait. And we'll just to 300. Okay? Yeah. And sometimes don't like it to be to book bold. No, we're never heard this. And there's the full padding and margins. I'm just gonna remove that, and we're gonna have no less styling Inishmaan painting wrong. So the list style is just the bullet points better before the lists items. And then we're just gonna have displaying flecks of this and flex direction. Rome. So I just puts them next to each other. No, we can just go inside of the Allies in the eighties and we're going Teoh for the ally. We're gonna excess the ally. So the And it's just like this that this operator in Java script and then we're gonna also edit the ATEC because the next sesh link, it's actually a tag. Once it's generated into the page, you're just gonna even eight to style that and we're gonna have padding. I just do want him and see how that looks. Okay, that may be too big on the sides were just 2.5. Looking at that looks about good and then sort of here, we're just gonna have color inherent. So instead of using the default a color, which is like a purple, it will just be using the color that is inside of the parent element, which is right here. And then we're just gonna have text trickeration known that will just make our text look like this. You can probably increased the front size to him. Maybe could be a little bit bigger or smaller. Yeah, that looks good. And we're gonna add any of the overall moments for it. So no, we're just gonna keep in mind that are, lout. It's going to be used on all of in all of the pages working. Just gonna have an H one in a p tag. So instead of our default, we are actually, there's two phones. See? Says that is already in here, and this is just gonna be loaded onto all of our pages. They're using this little So you're just gonna get rid of all of this in to think that probably and body. But we actually have to. Editor, make sure we're using says we're gonna open this up and then we're going to do what, 100% 800 beach burgeon zero batting. So what that basically does is it makes the HTML and the button we have some overlapping. Okay, so our header is actually taken 100% of the screen, but it actually also has padding on the left or right, which is 7 a.m. So we need to take in, uh, the seven AM and subtract that if you count. And actually we're going to subtract. 14 of Exists is on the left and right. So seven for seven is 14 over. You should know that. So you can see that. No, we don't have any horizontal scroll powers which you never want instead of a website. So we're gonna go banking toward default you and we're just gonna go out of here, and we're gonna have our container, which, if you remember, we have that instead of all of our pages, and then we're going to go instead of our main. We're gonna have a container with 100% creech 100 weight. I think that should be auto action. Okay, Now, inside of a remain we're also gonna have with 100% by auto. I think autos, actually the default value, but whatever. We can just leave it for right now. And then we're gonna have an inch one tag current size through him. Okay? Yeah, that's good. We're gonna have this display. Thanks. And then flicks, uh, direction, home, and then we're gonna just, uh er wait. I think we're doing justify center. No. Better of a line item center. Yes, that's right. Now. So, actually, I don't really want this to take up the home with So for the main. We're just gonna do with the person. Well, actually, we should probably just add that into our container. I'm just going to 80% and the margin zero auto. So automatically put that into the center of the screen, OK? It's That looks a lot better. I think that we can actually also do for a P take ex intent event the things that they have that Yeah, they did. So I drink three of that. Might be good. Yeah, that looks about right. Thought size 1.25 maybe. And line dish. Right. I'm pretty fast, right? No, we want a decrease of padding on the top. Think that's action version? Yeah, that looks about good. No, we have the some of our pages. She probably actually had some content for all of our other pages so we can go inside of, uh, content that we can just add in. So, the first round of 32 or 40 in this one, then we'll have 50 in this word, and then we will have 60 in this room. Wait. Did not just to 15 the other think I have six, you know, locate your home about contact and under me so we can tell between them is the This isn't perfect on this styling, and we're also not gonna make it responsive. So it looks bad like the But this is just like setting up a boilerplate for you could make turn this website into an amazing website with just different styling. It's just that we know how to create our static website now. So in our next lecture, we're gonna be learning how they have transitions. So when we go to the different pages, it looks like it has a different transition besides this just changing the content inside of it. So I'll see you guys in the next lecture. 7. Loading Bar and Global CSS: Hello, guys. And then it's like you were gonna be learning how to create a loading bar so that on the top it shows like a white loading bar that corresponds saluting in all of the assets for the page. So this would work. If you have a ton of images that you're loading into your website, it would It may take longer or less. Fish is nice to show the user that you're still loading stuff in so very load, you can just see that it just shows the page. So what we gonna do is we can go to the Web's be noxious documentation and they have the loading property. So I only have to do is adding this mounted into our export default. So we're just gonna end this into our head, actually, our expert default of our layer. So every page is going to be used in this. Save that, and we can't just rely on our page in getting to see that we have a white loading birth. So if you wanted to change the color of that loading bar, you can go into our knocks that come fig dick Js, which I have opened their or you can just look in the root directory of our project. So notice that conflict that dance and then you can just do control of and then, uh, partners loading, loading and its other here, even to our color property. And it's set to a color or hashtag ff, which is hex and its weight so we can see that it's a white loading birth. We wanted it to be blank. We could do 000 and we should be really loved this and it changes. The color reading change bank took. Wait. Now you can also see here that they have default things that they're adding to the head of the website. So this is added onto every single peach you can see we have default Maeda. So the charge said his character set is automatically utf Dash eight. The Newport description is automatically set to the description of the package, which is inside of her package that Jason So it's this description. So you should make sure that you actually put in the right information in here. I just kind of putting the default stuff. This is his just dictatorial. But instead of looting in her fund inside of our Leo. We could actually just copy this. Actually, we should copy the object, and we can just paste this in here and then remove this from right here, and we should be able to use our front. Still, that's just something that I noticed when I was instead of the narcs. Come fix. Also, we can have global CSS. So if we wanted a like a mane, uh, remove default, that CSS file. We wanted to add that in. Well, if it's inside of the assets directory, we would have removed ish before that sees us, and then we just have Hmm. Little body. Oh, Margin zero heading zero. And you could just add in off the you owe of the things that have to fault padding emergent , and you could just end it actually could end any CSSC out of here. It would be automatically applying to all of your websites. But actually, this director right here wouldn't work. You actually have to do 8. Transitions Between Pages: Hello, guys. And in this lecture, I'll be showing you how to create transitions between the pages. So then it doesn't just change the content every time when you cook a different link. So we're gonna have my code right here automatically. So I'm just gonna copy this animal. Uh, disguise what it does. So basically, I'm just creating an animation bones in image. First, it's going to make it. It's going to start from zero, So it's gonna start from nothing, but it's going to make the content a little bit bigger than it should be. So 1.1 and then it's gonna go you how it should be or transform scale one. No one is bouncing out. So when you click on a different link so if I click on this, it's gonna bounce out first. And then it's gonna bones in the new content. So bonds out. It starts with the regular size that it goes to a little bit bigger than it goes to zero, and we're just making this 0.5 seconds long. Four bounce out and 40.8 seconds long for bounce in. I just think that this adds more character to the website instead of just like floating in the content. It does this so you can actually refresh it, and it won't do the transition. But once you do change the page, it does. So you can just play around with this and see if you can create any different transitions, like with a pass ity or any different type of transition. And I actually added this into the the default CSS that were loaded in via the next dot conflict Dajae jazz. That's instead of our such folder. 9. The End?: Hello. Everyone in this lecture will be shown you how to build your application. Then you can actually host it on your website. So I'm just going to cancel our development server. And then if we go into our package don't. Jason, we can see all of our commands and we can just run NPM, generate our weight npm run, generate story. And once this is finished, it should have generated our website All of our static website files that we will be able to add on to our ah hosting provider if its host, gator or host injure or anything and it should be able to show our website exactly how it is right here. And it should have all of our content inside of her page source, as you can see right here. So then our search engines will be able to see everything we will get ranked way higher than the other people. Also, our static code will be able to load in way faster instead of running a server and having to do a ton of stuff on the client side. So if I just reveal our ah project in my file explore, you can see a dist folder, which is just distributions. And we can open this up inside of here. We can see all of our different page is generated so you can see the how the Rams were generated. So we have a donate page and it's a donate folder. And then we have an index studies schimmel. So this way, if we go to our website slash donate such contacts such about it will automatically load in those websites. And we have our favorite Cullen. But I actually didn't have edit in. But if you're actually publishing this, then you should make sure you have a favorite come. And Teoh hostess I have to do is just dragging all of this code or all of this files and then you should be able to host it. And if you're doing, uh, with net debt not full fly, you would actually just dragging your whole project except for the note underscore modules because then you would just specify that you were using next ring us. So that's it for this course. I hope you guys learned a lot from this and hopefully you create some amazing websites with next chance. See you