2.4 Set Up the HTML

Hey, welcome back to Optimize Your Website Without Amp. In the last lesson, we finished setting up our processing for our CSS, and in this lesson, we're gonna go through and set up our processing for our HTML. The first thing that we're gonna do is set up another folder inside our source folder to house our HTML files, and we're gonna call it HTML. Now here we gonna create two different files. Now as you know already what we need to do is get a css into the head section of our HTML, and the way that we gonna that happen is by using a templating language named pug. It also used to be known as jade in case you see any references to jade and also had to relate to one another. A pug is a couple of things, one of the things that it is is basically a short hand for HTML, so you can write a lot less code and still end up with the same amount of HTML at the end of the process, but what we are really using it for, is it's ability to import external files. So we can use Pug to pull that CSS into our HTML. Now, we don't actually want to make this a course about using Pug, so we wanna work with this regular HTML for most of the code in our site. So what we're gonna do is we're gonna set up a Pug file that's just gonna have our basic HTML in it, so it's gonna have our HTML hidden body elements, our meta tags and what have you, and we're gonna use this file to import our CSS into the head section. Then we're gonna have a second file inside our HTML folder, and that's gonna contain all the actual content of our page. And we're just gonna write that in normal HTML. Then we're gonna use our Pug file to import that page content HTML and as the end result, we'll have the ability to write in normal HTML, normal CSS, and have it all brought together in an optimized file at the end of the process. So we're gonna create our two files, we're gonna create index.pug, and we're also gonna create page content.html. Right now let's go back to our code editor. So now we've got HTML folder here, here's our pug file and page content HTML. We're gonna open up a pug file and we're gonna add in a pug content. And pug can be a to work if you're brand new to it because everything is dependent on indentations, so instead of using opening and closing tags, you use indentation. So once again I'm gonna copy and paste this code because I don't want you to have to run into trouble working with pug as I said this is not a course on pug so you should be just able to grab this file out of the source code and it will work just fine you. I'll explain everything that in here and then if you would like to learn a little bit more about working with pug then you'll find a link in the notes below this video to the pug site where you can check out the documentation. So this is our pug code. So to give you a quick overview of what we have here, basically every time you see an indentation that tells pug to nest this code inside whatever code is in the line of indentation above it. So for example here we have an HTML element and pug will just automatically close that element off for us. And then indent it by one level but with that, we have this head element and that indentation tells pug to put the head element inside the html element. So we have at doctype and our html at the top level. Then this inside that, we have a head element and a body element. And then in here is where we're setting up the content of our head section. In here is where the optimization starts to happen. And you recall that one other thing that we have in our checklist is as fast we start letting as early as possible. So the very first thing that we have in our head section is a link to the Google funds that are gonna be used inside our site. I'll show you how this all looks in proper HTML once we compile it in just a moment to. But for now I'll just show you through what we have here on our pug code. Then underneath I link element here we have a style element. When this is compiled its just gonna turn in to set up opening and closing style tags and then nested inside that this is what we are really taking advantage off pug. This Include' command here tells pug to pull the contents of this file. Into our index page that we're building. And include it in the resulting code. So now that is gonna take our whole style sheet and inline it inside our head section. And you'll notice here that we're also loading our style sheet as soon as we possibly can. The only thing we're doing before this is getting our front files loading. Your site can't be considered properly loaded until your CSS is first loaded and then rendered onto the page. So you want to allow that process to get going as quickly as possible, and then under that, we have another element, we have the no script element. And when compiled that's gonna turn into a pair of no script tags. Then nested inside those no script tags, we have another style element. And this time, we're including our noscript.min.css file. So that is gonna allow us to style the way things appear when JavaScript is not active. Then following that we just have the usual suspects in any given head element. And that is meta tags and title and then down here inside our body element we're using that include command again. And now we're including the file pagecontent.html. So we're gonna write all of our actual page content into this file, and then pug is gonna import it into our file here. All right, so now that is our index.pug file setup. Now we need to add another task to our gulp file, so that we can compile. For that we're gonna add another task. This time, our task is called html, and we're telling gulp that the source file we want it to work with is the index.pug file that we just created. So then, the first thing that we're going to do is have it run the pug plugin on our index file, and that's just gonna convert it into regular html. And then, just like we did above with setting the destination for our completed index file. So we're telling it to put the index file into our root directory. So when this runs it's just gonna put in index.html file right here. And then finally this line here is telling browser sync which we're using, to run a live preview of our site, it's gonna tell it to reload. So, now before we go into the next step, let's just quickly test our html task. So we need to be on the top level of our project, and then gonna run gulp html and we should see our index file show up here. And there we go, so there's our index file. And if we go back into our code editor and we open up a new index file, then you can see that we have the HTML version of the pug code that we just wrote. And then here you can see that we have the style that we wrote into our style sheet before. So all of the code that we're gonna put into our style sheet is gonna show up here inside our head section. Now we'll just add a little bit of test content into our page content file as well. So let's just add a heading. Now if we run our HTML task again and then we look at our index file again. And you can see we have the h1 tag that we just wrote in. So now we're not gonna need to make any more direct edits to our index.pug file. We can close that down. All the work that we're gonna do is gonna be inside this pagecontent.hmtl file. As well as inside our style.css file and noscript.css file. And there's just one more thing that we need to do to finish setting up this part of our process and that is to add a couple of watches. Into our default task, so that our HTMl file is rebuilt whenever it has to be. And because we have our css being put into a head section, we need to rebuild our HTML file whenever each of our style sheets are altered or whenever one of our HTML files is altered, so we're gonna do that with this line of code. So this is another watcher, and we're telling it that we want it to watch these three files, so we have an array of files here. We're telling it to watch for changes in any file that's in our HTML folder, want it to watch for changes to our style.min.css file, so that's going to detect when a fresh version of that file has just been generated, and then same thing here, we're watching for changes on our no script file. And when any of those changes are detected, gulp is gonna run our HTML task here. All right, so now, let's give that a test. So now we should be able to just run the command gulp, and now, we're actually gonna take a look at our preview. We have some very basic code, but nonetheless, it is enough for us to look at, and there is our rudimentary page. But now if we want to make some changes to our code. Let's say for example we want to edit our heading. Heading edit, and we save, now gulp will run all of those tasks for us that we've set up to do automatically. We go back to our browser and I changes that shown up automatically. So now we are almost done with our setup face. We've got our live preview set up, we've got our CSS set up, and we have our HTML set up. So that leaves only one more thing and that is to set up our JavaScript, so we need to combine any separate JavaScript files we're gonna use into one. We need to minify that resulting file so it's compressed as small as possible and we need to set up browser sync to refresh our preview whenever changes are detected to our optimized JavaScript file. And we'll be doing all of those things, in the next lesson. I'll see you then.