Build fast websites with Hugo the Static Site Generator & Bootstrap 5 (Introduction)

1. Intro: Hi, my name's Shawn, and I've been teaching web design and developing websites for over 10 years. And in the last couple of years I've been specializing in static web design. Many people who are new to web design for themselves learning about the basics of content management systems like WordPress and Joomla. I'll need to find that they need to pay for expensive plugins and themes. Going down that route, you'll also find it hard to develop themes and templates. You'll also end up with a slow website and many potential security vulnerabilities. This will create a poor customer experience, but also give you pour search engine rankings due to slow page load speeds. Static websites and Hugo offer you fast, secure websites that are easy to create, cheap to host, and provide the potential for good search engine rankings. Since the SEO algorithms prefer websites which load quickly, this course makes getting started with static web design easy. It guides you to the process of setting up your first US site and also introduces you to HTML and CSS using Bootstrap, you should take this class if you are new to static web design. We'll also be looking at the basics of Bootstrap. So you don't need to have a lot of experience with HTML or CSS. The project for this class is constructing a basic static website using Hugo and Bootstrap along with some basic JavaScript. I hope you enjoy this course as much as I enjoyed creating it. See you in the first lesson. 2. Getting Started: I'm going to show you all of the software that you need for this course in the next video, this video is all about showing you how to access any files that you will need. So the first thing that you'll need for a few lessons time is some images and you can download them here from a zip file in the resources section. The only thing you need is a copy of completed files for each lesson. I've left a link here to the GitHub repository. And once you're in the GitHub repository, you have to choose the branch that you require for the particular lesson that you're working on. And all the lessons have branches associated with them. After you've chosen the branch, there is a code button and you can download a zip file. That's the easiest way to do it. If you do choose to clone with either a get CLI utility or GitHub desktop, make sure you delete the dot git folder. But I do highly recommend you just hit Download Zip, grab that folder, and then you can check my version of the code to problem-solve any issues that may arise otherwise, just drop me a message in the discussion section. 3. Install HUGO and required software: Welcome to the first lesson. We're not only going to be installing Hugo, but all the yellow software that you need to be able to develop websites with Hugo. On completion of this lesson, you'll be able to install the following software on Windows, Mac, or Linux. Firstly, NodeJS. And you'll also be installing chocolate at the same time if you're using Windows. So watch carefully for that. The Git command line interface. You'll be installing Homebrew if you're using Mac or Linux, will then be installing Hugo and go Lang via chocolate or homebrew, depending on the system you're using. Visual Studio Code. And also GitHub Desktop, which is an optional software that you can install and it's not available on Linux for does make get a lot easier for beginners. All the links for these software packages can be found in the resources section below. The first thing we need to do is install Visual Studio Code. And the reason we do that first is because in the next step we're going to be installing gate. And inside the git installer, we're going to choose Visual Studio Code as our preferred code editor. Who found this link below in the resources section for the Visual Studio Code download page. There are downloads for Windows, Linux and Mac. And Linux. You've got to make sure you're treating the right kind of installer. I'm going to now go through the steps involved with installing Visual Studio Code on Windows, but the options are very much the same on Linux and Mac. I like to have the open with code action for the directory context menu. So I can open a whole folder of code up and also the open width code for the fall context menus. You can open individual file in VS Code. Now we need to install the Git command line interface. Get to system of committing or uploading your progress as you write code to a remote server. And it keeps track of every single change you make as long as you commit your changes as you make them. If you're running Linux or Mac, it's really important you install good at this stage because it's required for Homebrew or brew. Link below for the downloads page for the Git command line interface, Let's start with Linux. Now. Each different distribution of Linux has its own package installer. The most common one is the Debian Ubuntu Package Manager. We've got the code here. You will probably have to write pseudo before these commands that you have permission to install the software. Most user account won't let you install the software. There's a whole heap of different examples here of different systems and the particular code so that you can install it with their package manager. If you're on Mac, it's a little bit easier. It does say here to use brew, brew, homebrew all brewed does tend to depend on Git itself. And if you haven't got getting stored, you could have some trouble installing Homebrew at this stage. So I can recommend. And I've left the link for this page below. However, it is quite simple. If you're on Mac OS 10.9 or higher, which is an addition of Maverik. We'd have to do is run the command GIT in the terminal. If you haven't got getting installed, it will actually install automatically when you finished installing it to double-check it has been installed typing GIT space dash, dash version. And if it has been installed, it will tell you which version you've got. If you're on Windows, it's a case of downloading the installer and running through the process manually. Links below. And now I'm going to go through the Windows installation process. I'm going to untick, get GUI and get bashful Windows Explorer integration. Choose Visual Studio Code. The default text editor. I'm going to let get, decide the default branch name. I'm going to allow get to run from the command line, but also from third-party software. I'll choose the option for using gets own bundled OpenSSH. We use the OpenSSL library. I'm going to check out as 0s and commit unique style lawn endings. Some people prefer to checkout as Windows style. Commit unique style. I prefer to checkout as as easy, which is usually the unique style. I didn't have any conflicts in VSCode. Use the Windows default console, leave the default behavior git pull, and use the Git Credential Manager core. And I'll leave the default setting to the screen for fall fashion and symbolic links. In order to enable any of the features. If you're a Windows, you can skip this step. But now we're going to install Homebrew, and that's for Mac or Linux. And Homebrew is a package manager which allows you to install other software which we're gonna be using in this tutorial. Let's link for the brewer website. It's brew.sh TSH. Once you're on the homepage, they've got a script here, and it works on both Linux and Mac. So you've got to, first of all, copy that script. And then I'll show you the install in Linux if you are a Mac, it's the exact same process. My Linux machine, I'm going to paste in that command. You remember you must have getting stored, which is what we did in the previous step. And then hit Enter. Then you have to confirm. Check that brewers installed properly. You can use the command brew. Doctor. As you can see, it looks like brew isn't in the path. Fixing that. I'm going to copy and paste in a command and I'll leave it in the results section for you below. And these should add brew to the shells path file. Let's give it a guy now. Go Bruce working. So now that you've installed brew, if you're a Linux or Mac user, now you're ready to install Node.js. If your Windows user, you don't need brew, but you will be installing trochlear as a part of this process. So make sure you pay very careful attention to the steps. The link below to this address. And it's for installing Node.js with package managers. If you go down to macOS, there's two options you can use curl, which is quite a long script. You want to copy and paste it, that's fine. But the other option is using Homebrew, which you should already have installed. And we have to do is type in brew install Node. And it will guide you through the process. If you're on Linux, there are many different options He, depending on the distribution that you're using, you'll have to carefully go to the correct link and install it specifically for your distribution. I'm now going to go through the process of installing Node.js with windows from the main download screen. I'm going to download the Windows installer. You can click on the Windows button or under Windows Installer MSI, we can download the 64-bit version. There may be a few using 32-bit. The EBIT, you're more likely need the 64-bit version. For that reason, you can just click on the Windows installer button. I'll now show you the options you need to select throughout the installation process. All right. So agree to the license agreement. I'm going to choose the default installation folder, default components. And then I've got to tick this box here, and this is really important. We're going to also install chocolaty. We're going to click any key to continue with this installation script. Whenever it's still Hugo and go laying and that's for Linux, Mac, and Windows. Curling will be required later on if you're using Hugo modules. And Hugo models is actually required by quite a few themes. It's really important you install go laying at the moment, at the same time that you install Hugo. If you're on Mac OS, you can use the command brew install Linux, you can use the same command because you should've installed brew as well. But the window is at slightly different. We're gonna be using chocolate and that's something that you should have installed back in the Node.js installation steps around through windows to start with, it'd be quite quick, and then I'll run through the Linux or Mac option after that. So the command for chocolate tea is chocolate. And in this instant way installing. So we run install and the application is Hugo extended. You could just install he guy back. There are other features you most likely need later on that are in Hugo extended, such as SAS support will give you a confirmation and you can do a for all. Next thing you'll have to stall is the Go language and this is useful for Hagen modules. So we're on Chaco install go Lang. Again, you'll have to do a 44 except all go line has finished installing you. There is a message explaining that the environment variables including path of changed as we've installed software and there is a command there for refreshing, but I've caught commonly have issues with that. So I'm gonna open up a new PowerShell. Then the new PowerShell, we're going to check that both Hugo extended and the gold laying have been installed. We have installed extended with the command is still Hugo. And we can do Hugo version to check for the version. As you can see, we've got Huo extended installed and for girdling the command these go then version. And we can see we've got the lightest Go language installed. Linux or Mac. The following instructions will be identical for you. On Linux and Mac, the command we're going to use is brew install. All right, you guys been installed through grew. Let's now install go. And the command for that is brew install go. And that's the Go language that we need for running Hugo modules, which are used by quantity themes and you'll probably be using it yourself also. Guys installed. Now we're going to check our installs both Hugo and go. We can run Hugo version. You can say there by default. On Linux and Mac, he got extended these installed. So it's slightly different to the Windows installation. Then go version to check the Go language. We've got, as of now I've got the current Go language installed. The last step is installing GitHub Desktop. It is optional, but it's highly recommended, although it is only available for Mac and Windows, it makes the process of using much easier. And it is something we'll be referring to on future videos, where I'm using gait as all of the software packages. In this lesson, I've left the link for the website, the downloads page in the resources section below. After GitHub Desktop has installed, you'll have to sign in with your GitHub.com account. You will be redirected to the width browser to log into your GitHub account, which you can sign up for for free. One thing you have to check for is that visual Studio Code is configured as your code editor, go into File and then Options. In the integrations tab, make sure you've chosen Visual Studio Code as your external editor and you've chosen your shell of choice. Let's teach the first lesson. Congratulations on making it this far. I look forward to seeing you in the next lesson where we're going to look at getting started with Hugo and making your first Hugo project. You've had any trouble with any steps in this lesson, please rewind and double-check. Succeed. There is a discussion section below and I'll get back to you and help you as soon as I can. 4. Set up HUGO project in VS Code: In this lesson, we're going to look at setting up a Hugo project from scratch. You guys highly customizable, but unfortunately out of the box, it doesn't give you much to work with. After completing this lesson, you'll be able to set up a Hugo project without relying on a theme. And you'll be able to output basic text via you go to our HTML file. First thing we're gonna look at is the command Hugo new site. The first thing you have to do is start with an empty folder. And inside that folder, if you set up Visual Studio Code, the way I instructed in the previous lesson, you'll be able to right-click and then open with code. You may get a message asking if you trust the author of the falls and you have to click yes, otherwise you won't get all the features of Visual Studio Code. We're then going to run a new terminal inside that terminal. First of all, we're going to check that Hugo has been installed correctly. And we can do Hugo version. As you can see, I've got version 0.89 extended installed on windows. To create a new site, we have to use Kingo new site and you have to specify the directory I want to credit in the current folder or directory. So I'll use dot slash to indicate that. We can now see that we're ready. You guys asking us if we'd like to download the theme and put it in the themes folder, or add some content. And it gives us a hint that we can use a Hugo new command to create content. And I'll be showing you that shortly. The next we have to do is create some layout templates. Now unfortunately, he doesn't come with any of these out of the book, out to creating our layout templates. What we'll do, we'll make it a new terminal and will run new fame. And we'll just call it temp, close the terminal. And if you look in your themes folder, you'll see we've got a temp folder and it's created a basic theme for us. They won't we can do is everything in the Layouts folder. Click on it and we'll drag it into our Layouts folder. And then we'll go and we'll delete that Temp folder. Let's have a quick look on. We'll see how these work. So I will start with the base off dot HTML. That's our basic HTML layout. That's the highest in the hierarchy. It's where everything starts. At partial head. What that does is we're looking at the partials hold up. It'll pull in the header.html, this counting unit, nothing in there, but they'll get pulled into our base off. We're then going to pull in our header. And then we've got block main, which we actually set up in our list, single or index we've talked about in a moment. And then we've got our footer being pulled in now marked to make a few changes to this to bring it up to standards. So if we put an exclamation mark in, we'll say it's an m and abbreviation, we can hit Tab. You'll notice we've got our Meta tags, we've got our character set, UTF-8. And that's really important because that means you can access basically any character in a language. You wouldn't have anybody spot errors. We think what our Internet Explorer and edge compatibility tag, what our default viewport width tag, which is very important for responsive websites. What we'll do is we'll grab all of those meta tags. We'll pop them into the heads off to make ourselves ahead. Stupid of the antigen. Will grab the title, pop that below. You'll notice we have our default language. We'll cut that and we'll paste it up in the HTML tag for now and we'll get back to that a bit later. Then we'll delete all of my critics. Will save it. I'm gonna remove these div around the main block. Then we'll grab all of the content, cut that, and we'll place it in the header.html. We'll get rid of that space. We can remove that double indentation. Save that. Have a look at how our homepage, our HTML will be inserted into the main block. Open up the index.html, putting double curly braces and we'll do define main, getting double inverted commas. Then we'll put in an end tag. First thing we'll display is dot site with a capital S dot title. And it will pull in the title of the website. Then we'll do some double curly braces again and we'll do dot content with a capital C. What that will do is when we create some content in a moment, it will pull in that markdown and it will convert it into HTML for us. Hugo new command creates content for us and it uses templates so that new content. So let's have a look how it works. Back when we created the new site. You go give us the hints that we can create new content with Hugo new command. Now, the way that works is it. Looks in the archetypes folder, and it will use this file, the fault dot MD as a template to create our new content. Now before we go ahead, there's one thing that I like to change and that is I'll have to change draft from true to false so that every page we create will be live. Otherwise you'll have to manually change it from draft true to draw, false for it to display. So I've saved that into the archetypes default. But md file, I'm going to run, Hugo knew. I'm going to follow on crate is slash underscore index.html and that's MD from markdown. So run that. We'll then have a look in our content folder and you'll see we've got an index dot MD. Unfortunately, because it's the index file in the root directory, few guy doesn't know what the title is. For now we'll just call it home. Let's pop in some content. Now we need to make some content. I'm going to give you some placeholder content and a really popular version of placeholder text content. He's called Lorem Ipsum has this built-in, but unfortunately, by default, the current version of Visual Studio Code emit isn't enabled for markdown falls. Now we can fix that. If we go to the File menu, then we get to preferences and settings. So you can see the shortcut is Control plus comma or on Mac would be Command Post comma. Open that up, go to Extensions. And the first thing you have to do is if you look under exclude languages by default emit excludes markdown. So we're going to choose the extra rules that we do have to set a few more options, however, because we will have some issues. Just scroll down. It says show expanded abbreviation. We need to change that to in mockup and style sheets. I only it says there that will only show expanded abbreviations in HTML, Hamel, Jade slim XML, excellent, CSS, SCSS, SCSS less installs. But it won't be doing any markdown and that's the behavior after. The other thing we have to do is trigger expansion on tab. Let's save them on medically so we can close that. And now inside R Markdown file, we can test this out if he's tapping dues and then tab, you'll see emit these working. What we're gonna do is we're gonna pop in alarm. And then 100. And tab. You'll see it's credit a 100 words for us. Instead, what we might do is we will try lorem 50 and we'll run that twice. Put a space between the two to make a paragraph, would delete that extra space at the end. Although it is good practice to have a new line in the file. We'll save that. Now gonna look at how to enable HTML content in Markdown. By default, he doesn't allow you to put HTML in your mouth down as a security feature, but occasionally you won't be able to achieve what you want to just we've Markdown syntax, which we'll look at in a moment. This will allow you to put in HTML content as well, mixing your markdown. So if you look in your project down the bottom, you'll see a config file. Now, opera FAT is YAML. It's much easier for beginners. So we'll rename that file two dot YAML. Then we're going to have to change the format of it. So the easiest way to do that is to highlight the equal sign and the space before it. Right-click on it, change all occurrences. Backspace, and change that to a colon. Now in YAML, you don't need to surround strings with quotes and automatically detected so we can remove those quotes. That's where the guy, Let's now enable Markdown. It's a little bit complicated. The first entry we have to put in is Mockup. Then hit Enter and indented one tab. We didn't have to put it in a entry for Goldmark. Goldmark is the current default markdown renderer that Hugo uses. Then we put in renderer the colon, and then one more indentation. And this is the important one, unsafe. True. Alright, so save that, go back to your index.html and let's put in some markdown. Markdown enables you to create headings and modify your texts. For example, bold, italic, create lists and so on really simply and with no HTML. I'll provide this link. Why would the course resources? We're gonna have a go at a few of these now. For example, gonna try and do some headings will use bold or italic Ababa content. And we've already got the title for the site. So we'll do a H three heading, do a spice off T3 hashes, and then we'll just call it placeholder text. You must do an interrupt to that hitting. Then what we'll look at some bold and italic. You gotta be careful. You're not supposed to use bold for headings. I personally got a dictionary enabled in VS code and create a heading using bold. It will tell me that that's an issue. If I, for example, where I bold text, stop of a line, that's fine. And then for italic, we just do the one star. Be bold text with double asterisks. Then we'll have a look. You can say they will just do an inspection. We can see that we've got a CH3. We did the 3.5 songs and he got automatically creates IDs for your headings for you. It takes out a little ****** and lowercases everything for you and put dashes in case in peice of the ******. You guys automatically created a paragraph for us and it's credit some strong or bold text and then it's credit the italic text with BEM tag. It's incredibly paragraph tags for us again, for all the sections of texts and that's all through markdown in Hugo. Now that we've got the basic setup, let's run key guys built-in live reloading server to check that everything's working the way we intended it to. Go into your terminal and you typing Hugo server, hit Enter. And let's have a look at what it says. So we can say that it's built to saw it. There are four pages that it's built. One sitemap, which we'll get into another lesson and waiting for changes. So it's got live reloaded enabled. There's our config file which we've just modified. Want to development environment that's running in fast randomized. And if you use the command, you guys are with the disabled fast render flag. It will rebuild every single file when it detects a change. So if you control, click on that link. You can open up the page in a browser. Here's our page in the browser would have rendered the name of the site. We've got our hitting two placeholder text involved, bowed and out Lorem Ipsum. If we right-click and inspect, Let's have a look at the HTML that you guys generated. So we've got our hitting two and an h2 tag. And you got automatically generates IDs for us so we can target them with links. It's in credit paragraphs for each part of the markdown and it's used for that sentence there. I'm going to set up some partials and some semantic tags to wrap them. Back in vital to the HTML. Our main block top in Maine and hit tab and that will give you the main semantic tag and what that does, it tells search engines and possibly screenwriters as well that they are looking at ISI main content in the page. We'll do is for our header, we put in a hidden tag and that lets the search engine noted that's the header and it's totally the headings and possibly some links in May. Then for the photo, we'll put in a footer tag. We'll drag that up in there. Then open up the header and the footer.html. For now we'll just kinda put a bit of texts near that says header text in footer that says would adjust to identify that. Yes, it's actually working. Save all of that and go back to your site. Let's have a look. As you can see, we've got our header that's being pulled in and our footer, obviously the formatting isn't where we'd like it, but that's for subsequent videos. Back in the base off of HTML, we will fix up this language tag. What we'll do, we'll take out the EN, put in some double curly braces and we'll do dot language. Dot lang and that will pull in the language code that's configured like that. And to change your language configuration, I pump your config.xml. Configuration is default contents with capital C language. For example, AN AU site to in Australian English has to be in lowercase the language code, you can't use capitals fully last two characters. Then open up the hip partial in terms of the title. If we do dot title with a capital T, we'll get the title of the page appearing. Let's have a look. You see up there in the tab we've got Home appearing now we can do much better than that. We'll do dot, dot, title, then a dash, and then the title. You can see any others. One more step we can do, and if it's the homepage, we will remove the dash home. If the dot, dot, dot title. She got a space in there. We'll put in our curly braces and we will do, if not is home. Then we've got what's displayed. If we're not on the homepage and then we'll put in tagging. Is home returns true? If we're on the homepage. There you go. We're not displaying the page's title. If we're on the homepage, just inspect our HTML. Will say they're the language is the default OF US English, English. Adhering the config.xml file. You can change that. For example, I'm in Australia, so I will change that personally to E in AU or might use ENG be for Great Britain. You can see there you guys updated the HTML. And there's one last thing we need to do and that's correct. Some external CSS and JavaScript files. And the reason we do that is it a lot easier to debug your code if it's an external file. If you use external files for CSS and JS, for example, if you're using Chrome, it will tell you the exact line of the file where either your CSS selector is or the bug in your JS file is slipped through that. Now, we're going to go into the static folder. Thought the static photo, or can make a new folder called JS. Inside that we will create a file called main.js. We go back to the static folder and make another folder inside that called CSS. Inside that we'll call it main dot CSS. So it might have false. We're not going to put anything in them for now. We do have to import them, go into Layouts, then partials, and then header.html. We need to use the link tag to import the style sheet. If we type in link and it will come up with its abbreviations and the best one for us we can do to use Lincoln light. But if we use link colon CSS, it will automatically include the rail of style sheet and it also include a default name for the style sheet. Now we're not going to use that. We're going to backspace that out and use slash CSS, slash main.css. And that's where our file sets. The static folder does not get exposed on the compiled site. I only need the falls inside the static folder. Thanks. Thanks. We have to do is import the JavaScript file. You could put it in the photo. But the problem is if you look in the base of that HTML, we'll see our footer partial sits within the footer tags. We don't want our JavaScript import to live in this. What we'll do, we'll make a new partial, we'll call that new partial script photo. And we'll use this footage just for scripts. Inside that script for them, we'll do our script important. So if we type in script and then tab, that's not quite where afterwards we need to define the source type. You put a colony. You can even just hit Tab now because it's only one option available, we could type in SRC or part of it will end up with a source for the script can be slash js slash main.js. And we'll save that. Now we do need to import this partial, so I'll go back to our base of below the footer. We will do our double curly braces and partial function. And then Script footer. You must provide the full stop so you can access the entire site contexts within that. Marshall. Let's run the server and check everything works. So we'll type in do you guys server. Then we'll control. Click the link. Back to a really basic site layout. Right-click and inspect. First of all, go into the head. You can ignore that first script because that's the library loading Hugo server. But then we'll scroll down and you'll see we've got the link to our CSS file. And if we keep scrolling down, you'll see below the footer we have our JS file. If we go into sources, you'll say the two files, they they both getting pulled into the site, they currently empty, but we'll be adding content to them in later lessons. Really important. You've been successful at every single step in this project. Before you move on, if you're unsure, please rewind and double-check. Otherwise there is a link below. If the discussions, I'll do my best to help you as soon as I can see you in the next lesson. 5. Add Bootstrap 5: Welcome to the next lesson. These field, it will be a lot shorter than the last class. Now it is important that you understand everything in the last class if you've still got any questions and you can't work it out. There is a discussion section below and I'll do my best to get back to you as soon as I can. On completion of this class, you'll be able to add Bootstrap's, CSS and JS imports to your Hugo project. The first thing we're going to do is go to the Bootstrap five website and find the information. They have to be very careful because if you use a Google search, you may end up on the Bootstrap four or three website. And when working with bootstrap five, which is a current release, we've got a docs and the introduction, you'll see it tells you that there is a CSS code here which you can get off their CDN, which is the easiest way to run it. Same with the GIS. You can access it from their CDN. Now, if we keep scrolling down, you'll see this as a template and it explains how all of these imports fit into the broader HTML file. We've already set up this file. We just kinda take the CSS component and put it inside the head. Then we're going to take the GPS component and put it in the footer. We'll start with the CSS component will copy the comment as well. It's a reminder of what it is. We'll copy that. Then we'll go into the Layouts folder and partials, and we'll go to our head. Then below our link to our style sheet. The custom styles will paste in the link the Bootstrap CSS phi there CD in. And we'll save that. Will then copy all of their JavaScript code, including the comments. Then we'll go to our script food or below our custom JavaScript file. We'll paste in their code and we can highlight it and use Shift Tab to remove that indent. There is two options. We're just gonna go with the first option for now. I'll remove all that extra spice. And if you haven't already got the Hugo server running from the last video, the terminal pumping hago server and run that control. Click on the link. Then we'll check that everything's working. So we'll right-click and inspect the head. You can see we put our link to the CSS file and then we'll scroll down to below the footer, and you'll see we've got the JS file as well. That's it for this video. I promised that will be a short one. Remember if you've got any questions, there is a discussion section below. Otherwise, I'll see you in the next lesson. 6. Homepage with grid, buttons and responsive design: Welcome to the next lesson. This is where we start making content with Hugo and bootstrap. You'll have to download the files for this lesson in the resources section, you can access the image that we're going to be using from the static photo. I'll go into that more later. If you run into any trouble, you can always look at my code in the files that you'll be downloading. After completing this video, you'll be able to use the following bootstrap, five classes, grid, buttons, responsive image classes, and spacing. And you'll be able to combine these elements to create content for websites. You'll also be able to use conditional if we'd statements. In here. The first step, bootstrap five grid. Bootstrap uses a system of container, row and column, and you have to use those elements in that order. So let's hit into our project who will set up those three elements? And we'll get started. Open up the Layouts folder and the index or HTML. And you'll see from previous lessons we instead the title of the website and the content from the markdown file. We'll leave that for now. I'm going to work below it. We're going to start with our container. So we typing div dot container and hit tab, and that will create the div for you with that class automatically hit Enter, then div dot rho into. Now, we need to call them. So if you type in div dot col, we can get that, but we don't just want a single column, we want two columns that are evenly spaced. Now to get that we do col dash six. But on small screens, we don't want to divide the screen in half. We want to divide it only on screen that large, defined as large or bigger. And I'll show you what large means in a second. So I'm going to call dash, dash six. We want two of those. You could repeat yourself or you can use star t2 and this is for image. Then it comes installed by default in Visual Studio Code. I'm going to hit Tab. Then anti, and I can then insert my content in there. And then same for the second one. The Internet to our content is going to go. Now we have a row and we have two columns and an evenly even width. But only on screen that the class has larger or greater. Let's have a look at the breakpoints in Bootstrap mean. I'm here on the Bootstrap breakpoints page under layout. If you scroll down, you'll see breakpoints of SAM for small, medium, large, excellent XT Excel. So on screen to the non-line two pixels wide or bigger screen is gonna be divided into two with two columns. If it's any smaller than that. We'll just have one column. So let me stack vertically. The next thing we're going to do is place an image. You wanted those column. We're gonna use the bootstrap five responsive image class for that. I'm on the under the, under the content section of the Bootstrap docs, I mean images. And it saves if we use the class of IMG dash fluid unit needs a dot that telling if you're using CSS CSS file, it will automatically assign the properties of max-width a 100%. It's your image will change its width depending on the amount of space available to it. And the height will be automatic and that will be relative to the width. Let's give that a go. In the first column, I'm going to tap in IMG. And then Tab. You'll give us a source, which we'll do in a moment and an alt text in a moment. First of all, we're going to look at the class. Class equals inverted commas. And if we taught in IMG dash fluid, that will automatically resize the image for us. Now, in terms of the source, you can download below the files for this to this video but completed. Otherwise there's the link for the picture itself. Into the static folder. Create a new folder called IMG. Then inside that folder you'll have to paste in the image that you can actually paste from your File Explorer or Finder individual Studio code. You have to right-click on the image and go to find in folder and paste it in there. I've got my image, paste it in. I'm not going to go back into the source. As we discussed in the previous video with CSS and JS imports, we don't reference a static folder. It's the folders inside static that will appear in your compiled website and undo slash IMG slash Bootstrap themes dot PNG. For the alt text, I'm gonna name it Bootstrap themes. I'm going to add a few more classes. First of all, I'm going to add a class of the block, which stands for display block. I'm going to use MX dash order. What that does is it creates a margin on either side, x, meaning the horizontal plane. Imagine on either side of your image and it's in even proportion than that centers your image, but you have to use the display block class as well. All that will not work. Now we get to create some hitting and content in our second column. Second column. I'm going to type in height one. And then tab. And inside that I'm going to import the title of this page. Inside that hitting rather than import the title of the site or the title of the page, I'm going to try to custom parameter, which we dot params for custom parameters. And it's gonna be hitting. And then I'm going to close my brackets and I'll show you how to insert that into your pages front matter in a moment. Then below the H1, I'm going to create a paragraph with P. And inside that we're gonna put our content in so we can just cut and paste content into that paragraph. And I'm going to delete that dot, dot, dot title from the top. What's going to happen here? We've divided our page in half with our two columns. We're gonna have our image on the left and now ticks on the right. If we're on a screen that is small and large, whether it's extra small, small, medium. We're going to have the image on top, the text below at the order of the HTML that will define that with Bootstrap, we always have to write out HTML and CSS without mobile devices first, which is the way it's lined up here. We've got our picture first and take second. Then we can adjust layout for larger screens, light on That's helps with SEO, search engine optimization and you'll get a much better rank on Google if you're designing your website to suit mobile devices first, what I want the second column to display first on screens that it LIGO bigger. And the way we do that, his music class of Bora, dash, LG, dash, first, one screen to the l-o-g or bigger. This column will be appearing first. Let's have a look at inserting some buttons. Now. Below the paragraph that we just inserted, we're going to create a blank. Stephen will stall that light off, hit Enter, and then we're going to make a button. Now. It doesn't have to do this, but it easy query ID to specify the type of button to be a standard button. It doesn't really matter much at the moment. But if this was a form that would default to submit in my putting top button, we're getting rid of those behaviors are not compulsory, but it did write all day to do it. Now, by default, that button isn't going to display the way we want it to. So we have to add the class equals the bootstrap class for button btn. I'm going to copy and paste everything we've just done below. Now the first button, we're going to make it a primary button by default will be blue, so we didn't have to add BTN primary. The one below, I'm going to make it a secondary button, but also outlined by default that will be gray. So we put in btn dash secondary because I wanted it to be an outline button, not a solid one. I have to put the word outlined in first. The next thing I'm gonna do is I'm gonna make these large buttons. Hold down the alt button and clicking both buttons and putting BT in, dash, LG and a spice. For the button text and the link. I'm going to refer to some custom parameters in the pages markdown. So to do that just like we've referred to, dot params dot Hitting, he began to put in some curly braces and it will be dot params with a capital P dot BTN one for button, one dot txt. I'll show you how we set it up in a minute. Then copy and paste that into the button below. And I change it to beat into. Then copy and paste that again. And we're gonna put in a link, so HREF equals embedded comments. Then I change it to URL. I'll copy and paste. That whole lot will be beat in two dot URL. That's looking great. We've now got to set up the hitting the content button, one dot txt button to dot txt button, one URL button to URL, go into content and then open up index dot md. I've already got some content here. We're gonna change that in a second. First of all, we'll put our healing in and have a custom parameters. All you have to do is just top and mark that heading. The heading for this page. We're going to make it first Bootstrap. And sought. Then I'm going to remove one of these paragraphs because it's a little bit too much text for what we're doing. And I'm gonna get rid of that bold metallic partnering. Get rid of that mark down there as well. The buttons underneath heading, we're going to put some more custom parameters in and we'll do BTN one colon into then a tab. And we would not text, I think for the first button will link to the Bootstrap five docs URL. We'll paste that in. And for beating too, we're putting out text will link to the docs and the ARRA. We'll paste that in. Let's save it. We'll get rid of that extra line at the bottom first, you should only have one blank line and innovate, mark and fall. And then we'll go to the terminal, new terminal and moron server will control click the file. And we'll talk ego server, and then we'll control click the URL. You can see we've still got a dummy header and footer, but we'll leave them for later. And for now we've got our hitting one will just inspect. And as you can see, now that the page is narrowed, it's got the image at the top, the content at the bottom. And as we widen it to the point where it becomes larger than the large break point you can see it then puts the image at the right, which is the reverse of what the HTML is and it puts you a text and lift. So if we look in the HTML, we've got our H1. Then below that, the paragraph that we made, hey guys, instead that content for us from the markdown file. Then go to our div and we have our two buttons. The first one is blue and solid, which is the BTN primary, also large, and the second one is a hollow gray and that's called BTN, outline die secondary and secondary by default, gray color. And it's also a large button. The next steps, adding some padding and margins to the buttons, back to the index or HTML file and go to the first button. And then we will hold down Alt and click in a sec one Kusto actually going to apply the same class to both of them. And we'll do px For what that's gonna do. P for padding x is for the horizontal axis, both left and right. And for is the amount that we're going to apply. The padding is gonna be the inside of the button to the left and the right of the tics. More space there. The last class I'm going to add is to add some margin to the end of the first button. And that will mean there's some space between them. So to do that, we do MA for margin end to. The opposite of margin in these margin is MS for margin stop. I'll save that. And then we will check out the site. We're going to right-click on the first button and inspect it. You can see we've got our px for which is padding either side of the text. And if you scroll down this part of the Developer Tools, you can see that we've got our padding of 24 and the side that increases the size of the button. We also got marginally end of eight and then adds a bit of extra space between them. I'll then inspect per second button. You'll see as well what that margin of 24 to make the button slightly longer. This last step is quite important and that is conditionally displaying buttons. Let's have a look. Inside these two buttons, they rely on the PBT endpoint URL for button one and button two, and dot txt for button one and button two. Again, let's go into index dot md, and let's try disabling one of these parameters and see what happens. You'll see this no text inside button one and it looks quite ugly. It's a bit of an error really. We wouldn't want that on our site if there was no text. I'm not going to disable the URL for the second button here that with the hash key because we're working in YAML. You can see on the second one under H ref, it says unknown, that's a bit of an error too. So what we're gonna do is we're going to set up Hugo, that if either of those parameters are missing, the button won't display or if you disable the whole lot, the button white display. Firstly, I'm going to use the width command. And we thought that does its conditional. It looks for the parameter that you've inserted. So we're gonna put in dot params, dot BTN one. So if some ticks between provided for in one. Then that means true. And it's gonna display what's inside the brackets. So we'll get into a button and we'll put an end tag, if anything at all is present inside BT and one. And currently we've got URL present, which will return true. And it's gonna put that data in now with also assigns this information to the context of meaning. We can erase this text here, params dot BTN one because we've already provided it up here in wheat. In fact, this part, this will not work that params dot btn one dot txt because that doesn't exist inside dot params dot BTN one, but dot txt does exist in there and dot URL does. Let's save that. And we shouldn't actually see a change. Let's have a look. Nothing's changed, everything's working, but we've still got the problem of no text and that's because we disabled the text. Let's go back and let's put in a conditional statement. And that's if dot txt, if end. So we've got two things happening, IV and dot txt, URL. Then this will happen and we have to put an intake. And after that, if a, the dot txt isn't present or dot URL isn't present, then this button will not display. Let's have a look. As you can see, that button has disappeared. Let's re-enable over parameters and the button should reappear. Go back into the markdown file and I'll re-enable text. I'll re-enable button to URL. We'll save that. Now we've got both text and y'all are present. That's inside between one. I'll have a look. There you go. We have our button, will fix up our HTML for the second button, and then we'll do another test. I will copy that code. Down here. I'm going to put my n tagging. Going to change that to be TM2. I'm going to remove that code that we've already specified. The width. We put an N tagging for the if statement. Let's save that and check the website. We've got both buttons working in just for final test, we're gonna disable one of the parameters for the second button. And then I'll show you how we can just turn the buttons off completely, properly. So going to the markdown, I'm going to just disable the URL for the second button. You can see it disappears. And let's have a look at how to disable the button properly. Disable the button properly. All you have to do if we just highlight all of these primitives and that's the correct way. The shortcut and Visual Studio Code is Control K, C. Then command all three of those lines for you once. As you can see it, to remove the button. And that's probably the intentional way to disable the buttons. Control KU to uncomment out. Uncomment the button. So it's enabled again, and we'll save that and we're ready for the next tutorial where we look at customizing the display of that block we've just made Burma. You've had any trouble with any part of this lesson, rewind and try again. And if you're still having trouble, there is a link below for discussions and I'll do my best to help you out as soon as possible is really important. You understand everything that makes lesson before you continue with the next one. See you in the next lesson. 7. Customise home page with Bootstrap 5: Welcome to the next lesson. In this lesson, we're gonna be customizing the content which we previously credit using Bootstrap classes. After completing this lesson, you'll be able to constrain the bootstrap five container width. Be able to use gutters, padding, and margin Bootstrap classes. To justify online content to center, we had to use the grid and GAP classes. The first step is we're going to constrain the container width, but only for very large displays. Have to get back into the index dot, the HTML file from the previous lesson. And inside the container class we're going to add the class of col dash XX L dash. What that's gonna do on screens that are XX L width, it's going to constrain the container to the width of eight. Now, bootstrap uses 12 units. We're using eight out of 12 of those units. Let's have a look at what XX L means. If our screen is 1400 pickles or water, the width will be 1 12th of that. The next step is justifying and learning content. We're going to do this on our row so that both the columns are aligned to Santa and justify the centers they centered in both the horizontal and vertical directions. If you look at the Bootstrap docs under flicks in utilities, you'll see for justify content you need to have the d flex or display flex course enabled. And also, if you scroll down to align items, you'll see as well, you must have d flex enabled. So let's get back to the project and let's look at some justifying and lining. We want our image to, our image column to display both centered in the vertical and horizontal axis. Now, you don't actually have to put d flex in because row it has flex enabled already. What we use align items dash center and justify. Content dash center. I'll put the salt onto a larger screen. You may have trouble viewing Lacey if you're on a mobile device as his quite a big resolution. But currently we've got the width set to under 1400 pixels. And this is the original intended display of the site. You can see a bit of padding either left and right as we increase and decrease the size. But that's the default Bootstrap behavior if you're using default container, if we increase the width to above 1400 pixels, you'll see it suddenly snaps in this quite a bit of space here, the side, and that's constraining our container so the contents doesn't get too big because we don't want this block here to be the full width of the page if it's a big screen and if we hover over container, you'll see there is that large amount of padding either side. If we go down to the CSS, you'll see we've got a minimum width to 1400. That's the media query and you went over 1400, uses flicks to constrain the width to 66%, which is eight twelfths, I'd add of 12 columns. Cities odd behavior after, because we don't want this block here that we've created to be too wide on a big screen, as you can see, it looks pretty good on a big screen. And if we shrink down to under 4800, it looks pretty good on a smaller screen as well. Now we're going to look at adding some padding and gutters. And that's the padding. We'll be creating some space above and below the row and the gutters is a generic all-round space. Going to your index.html file on the div for the row at the end of it add P dash f5. That's going to add some padding above and below the row, will have some space within the row and potentially navbar page and some space under the row and potentially any future content. We're also going to add g dash f5 to add a gutter all the way around. If we look at our row, you'll say we've got our P Y5 padding top and bottom five, and we've specified G5. We go down into column, you'll see we've got the Gatorade, the side in green. That translates to padding winds, the easiest way of working with bootstrap. Well now look at creating different column sizes at different break points. This is for our image specified call LG G6 at the large breakpoint, the column for the image is gonna be six. Let's look at the initial size under seek. So we'll do col dash tin. Now, that's for the extra small breakpoint. We never specify excess, we just leave it out and that's the default whose bootstrap, easy mobile-first. If it's a small device, call, SAM. We want it to be a statewide be eight out of 1012. Columns wide on a small display. Then for lot up to large and then for Lodge and bigger, it's gonna be six out of 12, so half the screen. So let's save that. Let's have a look right-click and inspect. We'll bring it right down to the smallest size. And we'll click on the first column, which is for our image. And you'll see it's using column ten, which is 83% of the width of the screen. You got those green bars either side. We're then going to drag it larger and we'll see it changed. We've now hit the small break point and it's now displaying it 66% because on that large breakpoint, we don't want the image too big. Then we'll go up to the large breakpoint. You'll see it's changed to six, which is half the width of the screen. Did you help to the row? You'll see we've got the PY five, which has padding above and below in green. And if you go to the column, you'll see there's some padding left and right, and that is from the gutter. The next ABG is using grid and gap for displaying the buttons on a mobile device. Now originally in Bootstrap, if you wanted to display a button as the full width of its container, that's in Bootstrap four, you would use a button, a block button class. But in Bootstrap five, we have to use D grid for display grid, and then gap to specify the space between them. So let's have a go at that. There's a div which wraps around the buttons instead of before inside that will specify class. Then we'll use d dash grid for display grid. And then we'll use a gap of two. So gap dash T2. Now that's going to bootstrap from no offer. So that's kind of display a mobile, but we don't want that to happen. The larger breakpoints it will do. As you can see, it's changing it the breakpoint of lodge. So we'll do d dash, LG, dash, flux. At the large break point. It's going to change from display grid to display flex at an above the large breakpoint and everything is displaying as per usual, and that's with the flux. But then if we go down below large, you'll see we've got our grid layout with a button's of full width, but we've got a problem here and that's the margin at the end of this button. So if I hover over that button, you'll see there is that orange margin on the right of the button. And that's because we've got the class in a dash T2. We can fix that up. We can do a previewing Carlo if you want. We can do ME dash LG, dash T2. As you can see below LG, there's no margin, but if we increase above LJ, we then have that margin. Let's go back into Hugo and let's fix that up. So we'll go into our first button. We want our margin in, so we'll do a dash LG that's fixed up. Now it's actually space on these medium breakpoint to have the buttons side-by-side. So we're gonna set it so that only on a smaller lower, the buttons are vertically aligned. Go back here and we'll set the flex to occur at MD and higher. And then we'll set our margin to only apply at MD or higher. We'll save that. As you can see, we're currently at MD. We are vertical without image and our texts, but our buttons are side-by-side. We'll go down to the small breakpoint. You'll see they're vertical, everything's vertical. And then we'll go up to the large break point. You'll see that we've got the side-by-side layout for everything. That's it for this video. If you've got new trouble, rewind it and do your best. Otherwise, there's the discussion below and I'll try and get back to soon as possible. Otherwise, you can go into the resources section and download the code for this lesson and do your best to debug what you've done. And I'll see you in the next lesson. 8. Bootstrap 5 Cards and Iteration (looping) with range: Welcome to the next lesson. We're going to be creating bootstrap five cards, and we'll be generating limb by iterating over data with Hugo's range function, you will need some images for this lesson. If you go into the resources section, you'll see a zip folder for this lesson. If you extract it, you'll find the images required in the static folder. On completing this lesson, you'll be able to create a card using Bootstrap files, utility classes. You'd be able to create data for different cards in the pages front matter. And you'd be able to generate multiple cards by iterating over the pages front metadata using guys range function. The first thing we're gonna do is create a card using Bootstrap fives utility classes. The first thing we have to do is open up our index.html file. We're going to create some sections and these HTML, five semantic tags. So we've taught in section and a tab. Then we're going to cut and paste the entire content of what we created in the last lesson. We'll cut that with Control or Command X and paste that in. And we're going to add a class just in case I need to target this in the future with CSS, we want to modify that particular section so it wasn't a class, and we'll call it hero. Then use the shortcut Alt Shift F to Format section. The formatting looks fine. Then we're gonna make a new section for this video. Again in another section, tags. So we'll type in section and tab. Then we have to create the container, the row and the column. Do that container. Tab, tab div dot tab. This particular column. At this point in the video, we're going to divide the screen into three, so we can have three cards. Now if you divide 12 by three, you get four. If we only wanted to take place if the screen is the medium, the medium break point or larger, we don't want to try and squish three into a small screen. Add dash, MD, dash four. Let's have a look at the card code on the Bootstrap docs website under components we have card. Just scroll down and just from the top first example here, that's what we're trying to create. We'll copy that code, will paste it into our column. And we use Shift Alt F to fix the formatting up. Now, this part is the style tag. We didn't want that because we're gonna be starting at purely we've CSS classes rather than style overrides. Wish you could also call inline styles. In the class of the image we're gonna add IMG dash fluid said that the image will re-size for us based on the available space. We're not gonna worry about the alt text for now. We will put the source of the imaging. Now, you'll have to download the files for this lesson and extract the full placeholder images out of that zip file. And then paste in room where you cannot paste directly Visual Studio code. You have to open up the image folder with the file explorer, find out and paste into there. There are my four placeholder images. I'm going to back out the source and putting slash IMG slash place holder one dot JPEG to match that file there. I will leave all the default text and the default link for the button. Let's put a heading in first spot and woke also copy and paste these three times, two more times. Let's put in a heading and we'll copy and paste the column two more times. So we had a total of three columns. And then above the row and below container, we'll talk do you bro, and div dot col will make our heading, our H2, but we'll use a font size of one, so we'll use the size of our H1, but we're gonna use an H2 tag because it's the second most important hitting on the page. To do that we do a dot FS dash one. That's a Bootstrap class for font size one, which is a heading one font size will also put some padding underneath. So we'll do dot p, b dash three. For now we'll put a manual heading in and that will be out services. Let's save it and have a look. It's looking great, but I think we should send to the heading and we should put some padding underneath these row so it doesn't clash with the photo which we're doing in a future lesson. Backup in our column here we will use the text dash. Santa Claus has sent everything, all the text inside that column. Then on our row here we will do PB dash three. That's looking a lot better. The next step is we're gonna create some data so we can generate multiple cards. Open up the content folder and the index.html. And then underneath the button data, we're gonna put in a entry for the cards title. We'll call that our services as we've already named it. And then we'll put in the cards entry and they're hitting tab, hit the dash. And then we'll put in title. We'll call it out card one titled us to keep it simple, this unmuted tab. And we will specify the image for that particular card. So it's gonna be IMG's what we'll use. And then the address will be slash IMG slash placeholder. One dot JPEG will then do our texts. The column. We can use Lorem Ipsum for this, but it will not work up in the front metal section we had down to our content here we can type in lorem and we'll try 20. That's probably a good link. So we'll cut that. Remove the extra line. We'll paste that into our text. Next we have to do is the button, so we'll make that BTN colon. They enter and tabbing would do text. We'll pull that box and one takes and then URL and we'll make that a hash for now. Let's haul out all of that into and use backspace to get to the start of that line and paste it and then enter again backspace, paste it again. The second one will click on nic onto the driver number one, we'll hold down Alt and click to the right of the other number ones and change them to twos and blue, same thing with the Alt key for the third entry. One last thing, commonly people use a hash if they don't want to specify URL, what we're using Markdown and in Markdown and the hashes for commenting. So we're gonna have to put some inverted commas around these hashes to get them to work. Now we're going to iterate over the Dato, just credit for three cards using the range function. We put our data he the first item that's important for us as the cards total within range over the autumn himself cards asking to about three cards to find here. And once we're ranging inside cards, you're going to have access to dot title, dot IMG, dot txt, dot BTN dot txt and dot BTN dot URL. So firstly, cards total delete the EL services ticks, putting two curly braces and because they're not standard Hugo page parameters, we have to use dot params to start with. And then cards title and then close the two curly brackets. Then find the three different columns for the cards. And we will delete the last two. Then above the column. New line. And we'll use range. And we're gonna range over dot params, dot cards. Then below the column, you'll have to put in an intact. Let's go through one step at a time. First thing we'll do is the image. We will delete that. And it's gonna be dot. Img will be the parameter because we're inside the cards object. And then we'll put in the title down HE dot title. And we'll copy and paste title into the alt text for the image. And that's fair if the user holds the mouse over the image or if the user has screen reading technology, will then delete the text in the paragraph and insert dot txt. Then for the button because we've got beat that BTN dot txt. Url will use a width statement and it'll be width dot btn. Then he will have dot URL, the height drift, the link. And then we'll have dot takes for the buttons text. Then we'll have to that. Now as you saw in the previous video, if you don't put text in the URL, all the text fields, you're going to have a problem with the display or the a tag. Now, fix that. We can use an if statement. So if we require both URL and ticks, three present. So if end dot URL dot ticks, and then we'll put the end tag underneath. Because we've displaying three cards and they're only gonna be side-by-side. At the median breakpoint, Ohio. We need to add some margin below the cards so that when they're stacked vertically in extra small and small breakpoints, that's gonna be some space between them. So we'll do em, dash three the card. Let's save it and see how it looks. It's displaying great. We've got our unique images for each card. We've pulled the heading in from the markdown front matter. We've also got unique buttons. Let's inspect it and see what happens when we bring the bright points down. So we're now at our smallest bright point. As you can see, we've got the space between the cards and I'll just bring that up in the CSS. If you hover over, you can say this, the orange padding below the card. And as we bring it out, we'll bring it out to the MD breakpoint and you'll see it snap to three. Squishing in three there. That's it for the lesson. Having any trouble, double-check the video and if you still can't get things to work, there is a discussion below and I'll try and get back to you as soon as possible. You can also download the files for this lesson in the resources section. Then you can debug your code from there. Thanks for watching. See you in the next lesson. 9. Bootstrap 5 Navbar with Hugo: In this lesson, we're looking at incorporating the bootstrap five navbar into the website and generating menu items with you guys menu system. On completion of this video, you'll be able to create a menu using the Bootstrap five navbar utility classes. You'd be able to generate menu items using you guys menu parameters. It'd be able to configure the menu items which will be displayed using barriers to the pages front matter for each individual page and also using a configuration file. The first part of this video, we're going to create the bootstrap five navbar using Bootstrap's utility classes. A moment Navbar section of the components part of the bootstrap five Docs website. If you scroll down to the first example, we're gonna copy that and paste that directly entire project. We're gonna go into the Layouts folder and then into partials, and we're gonna go to header.html. We're going to delete the header text and we'll paste in what we just copied off the Bootstrap website. We'll save that. Make sure you guys serve as running and we'll have a look. Nice and navbar is now showing up, but there is a difference in the background color. If we inspect the navbar, we notice it's got BG light as the background color. So that's the first thing we'll fix. That by a lot is fine. That means the text colors suit a lot background. We're gonna change background light and change that to BG body. Bg body does is it to background with the body color? I'm on the utilities and background section of the Bootstrap docs website. And you'll see before we were using bg light, which is a very light white. You can also choose bg white, but the most useful one for us because we specifically want the navbar to match the body background color, will change it to BG body. Bg body can be modified. But that's not the point of this tutorial. As you can see, the navbar now blends into our background. Before we continue navbar text, which actually reads navbar. We're gonna replace that with some curly braces, movies dot site, dot title, and that's the name of the website. And then we'll go down to the search bar and we're going to delete that so we'll get rid of that whole form. Then we'll delete the disabled nav link autumn will delete the whole dropdown item, will leave just the active and standard link Shift Alt F2 format. And we'll save that and we'll check it. I think we're ready for the next step. Now we're gonna set up our template to accept menu items which you guys will generate. Among the menu templates page in the Hugo doxy is quite complex. We're going to use parts for this example. We will be ranging either dot, dot, dot menu is dopamine. We won't be worrying about that. Has children. We will be using the husband new current parameter to insert and active class. We'll also be including the name and the URL. We found this too complicated in the Hugo Docs. So follow along very carefully and I'll show you how to do it. We're gonna start with this active link. He, the list item with the active link above that. Credit any line. And we're going to use range as we previously used. And it's dot site with a capital S dot menus and then domain. And then after that list item we need to. And then we've got the nav link class and the active class always takes t. We don't want that to display if it's not the current page. So what we'll do is before active, we'll put in some curly braces. We use if we have to put a dollar sign in because a dollar sign refers to the page contexts which is up here, but inside range, it's not the page contexts. We're dealing with the menu items, so we use a dollar sign and then dot menu current. Well with capitals, the menu we're targeting is mine. Then you must put a full stop in after that. We've got a space before active because I don't want active to collide with nav link. We are running out of space. If you use Control V or Command B removes the file browser on the left. Then just before between a on page and the inverted comments, we have to put in an end tag. The way you can work this out if it's correct or not. If you highlight everything from those first curly braces to the intact and delayed it, you'll see that it matches the Example below, I'm gonna do Control Z because I want to keep that. I've now got to put in my link and we use the variable, it's all capitals URL. Then for the text, I'm going to back that out. Then we use the variable dot capital N. I'm not going to delete that second entry because it's not required. Everything will be generated through range and save that. Let's have a look. Currently nothing is displaying because we have to configure the menu items and we're going to do that with front matter and also a configuration file. Configuring with front Meta means we go into each individual page and we tell Hugo which menu we want that page to display on. We can also configure the white of the page, which is the order it's displayed in. Control Beta open up the file display Explorer or you can click on the first button, go into content. And we've only got one page at the moment, and that's index dot MD. Hit up the top. I'll put it up near the top so it's easy to find under draft, we have to put an entry called menu, and we'll call that main and then white. And we'll put that in his ten now with the white tee best off doing them in increments of ten. And that way if you need to change around, you've got nine numbers there to wiggle room. You don't have to reorder everything. We'll save that. And we'll have a look. Home link has shine up. We right-click on it and inspect. We'll see that we've got the active class. We've also got the RA current page and the RA current till screenwriters that, that links for the current page. Now we're going to configure the menu using a config file. And we're also going to to me information the template so that the link can be opened in a new page if you specify that in the config file. First of all, we'll open up our config file. And on the bottom it's called config dot YAML. Leave a space alone will put in that hash for comment and we'll explain what we're doing. And we are creating menu links via config file. The first autumn ease menu with a colon and anti and tab. We're configuring our main menu, so we'll put that in first. Then into the car, didn't hit Tab, you put in a dash. What are naming? And the first link will put in is GitHub website. I use a lot and then use a tab URL, and it's gonna be HTTP. You must put the HTTP in, otherwise it won't link externally. It will think it's, I think it's actually part of the website, http semicolon slash slash www.github.com. We have to give it a white. That's the order it displays in. So we're gonna give that 90 so we know it's on the far-right. Then we'll put another one, and this time, we'll link to Google these tabs URL. We'll give it a white of a 100. So we'll save that. And we'll save it works. That's working. And if we look at the Github and Google links, they own a firearm as we wanted them to be with the white. You'll notice the home link, it's got a much darker in color. And that's because the home link has the active tag. If we look at the other two links, you'll say that they haven't gotten active tag. And you'll notice that if he make the page narrower, the nav links disappear. And then now in a drop-down autumn, and that's the default behavior. If you go, you can customize that. If you go into your HTML. We've got navbar expand LG, we can change that to navbar expand md for example, if you didn't have many links in days, usually fine. Now we can make it much narrow before it breaks and becomes a mobile menu. Next thing we'll do is we'll create some code in our template so that we can open these links in new windows. Because currently if we hit those links, they load in the same tab or window and we don't want that because they easily never getting away from our side. The first thing we'll do is we'll go back into our config file. I'm gonna define some parameters. Now, if we're looking at parameters in Markdown for a page or you have to do is just start tapping the mean. But we're looking at Menu configuration. We have to actually tell you guy, that we want to put it in a parameter, custom parameter. So we'll do params with a colon and then we tap in and we'll call this parameter blank. And we'll make it true if we wish to open that link in a new window or a tab. And we'll pop that in for the next one as well. We'll save that and then we'll go and make our template code will go into our header. And we'll create the code which links up to our blank true parameter. Quite awhile link. Bring our height trip down to a new line. And after the height drift will put in as if AQ and AQ stands for equal. So if equals dot params dot blank, true. So if the dot params dot blank is true, will input some texts and that's target equals underscore, blank. Grill equals no, open on it to security risks that we're trying to communicate using the note, open up, and then we'll put our antagonists and we'll save that. We'll have a look. I'm going to click on my GitHub link and you'll see it opens in a new tab. And same with Google. We right-click on that and inspect. It will say that we've got target equals blank rail equals know opener coming in and that's great. That's the end of the basic Bootstrap navbar lesson. If you've got any questions and you can't work something out, please. This discussion section below, and I'll try and get back to soon as possible. You can also download the source files for is less than the resources section and debug from there. Otherwise, I'll see you in the next video. 10. Footer with automatic copyright year: In this lesson, we're going to create a footer and we're going to generate the year for the copyright automatically using Hugo, which generates on runtime statically and also JavaScript which dynamically updates the year based on the year which the user is browsing the website. On completion of this video, you'll be able to create a footer with a solid background. You'll be able to input the copyright sign using HTML compliant code. And you'll be able to generate the IBA statically with Hugo as a nice trip, no script fallback and also dynamically using JavaScript. The first thing we're gonna do is create the footer. So open up the project and go into the Layouts folder and then go into partials. And the thing we're going to work on during this lesson is the footer. Help to take up that text. First thing we're gonna do is create a div, the past abuse container, but this time we're going to use container fluids. So its container dash fluid. Container fluid takes up the maximum width of the page and it resizes with the page. It's always the full page or the width. With an aid to put in a row and a column. That column we're gonna use a dark background. So to do that, we do doc, BG dash doc. I'm also going to need some white texts. So do dot txt, dash white. Gonna put some padding above, below and to the left, to the right of the text. So we'll use dot py dash three. There's a lot of classes. Let's save that and have a look. We'll run hey guys server. Down at the bottom of the page. We've got our black bar. Now if you're wondering about the different background and ticks colors, if you look here in background, these are all the different background colors it you can choose from. By default, you can specify your own, either by overriding the Bootstrap classes or by creating your own class or by writing the bootstrap variables are, but for the purposes is less than, we're just choosing one of these colors and we're choosing Dark. Bg dashed dark. In terms of the ticks colors, we're now in the color section of utilities. And these are all the default Bootstrap colors. And for some of these have put them on a dark background, but that doesn't happen automatically. You have to specify the background color. These classes only actually change the text color and we're going to use ticks. What we might try takes life as well. I think it takes white might offer the impact. We're often. Let's create the text for the footer. Let's put it into my basic text. We will do copyright. Then we need the copyright sign to do that. We put in end copy. You'll see that suggestion name will then put in just a basic GIF analysis and we'll do 2022. Then we're gonna put in the name of the website. So we'll do dot, dot title. Let's save that and have a look. Let's looking really good now say for example, you don't want to use the name of your website for the copyright notice. Let's have a look at putting some alternate texting. Now there's another piece of variable we can use, that site dot copyright. The way we make this work is we'll do with dot, dot dot copyright. Then we'll do the dot which is going to display that content. And then we can do else. Let's see if copyright isn't available. Else will display dot, dot, dot title and then we'll end that, will save that. And before we go and check it will go into our config.xml. And we will define the copyright ticks. Put a little hashing and put a little comment, alternate Copy, Company text. And then we'll do copy, right? And we'll do Web Design, inc. And save that, and save it works. There's your alternate text. I heap isn't automated, so let's go back through and we'll do that. That brings us to our next step and that's generated in yeast statically using Hugo. Now, that's quite a complex function to work out, but I'm going to make it really simple for you all you have to do, putting the curly braces, do now dot format. Then in brackets 2006 down, you have to do the year 2006. Nobody's going to work. There are many ways you can format dates, but I'm just going to keep it really simple for this tutorial. We'll save that and we'll inspect it. Year filming is 2021. You can see it's working perfectly. That brings us to the next section that is generating the dynamically using JavaScript. So then I'm actually means it happened when the user navigates to the site and it loads in the browser at that point the E is going to be generated. For now I'm gonna get that function, the function, I'm going to cut that out. I'm going to paste it down the bottom. I'm going to put in some comments, slash star, the star. And then start slashing the answer. I'm going to comment that out. But I'm going to put in a span, just talking span. An ID of span ID equals js. Now, I always prefix my IDs, which are for JavaScript purpose with the prefix J, S, dash. And that way I know that if I change that, JavaScript is kind of stop working. What are span? And then we're gonna use some JavaScript to write the date inside that span. So I will save that for now and we'll open up our JavaScript file that we made earlier. We will first of all target the span that we just created and we use that with document dot. Get element by ID. Make sure you use capitals in every way except for the first one. Then we open the bracket up. Inside that bracket, we have to specify the actual ID of the span. So you have to use apostrophes. And then we're gonna, we're looking for JS STAT3, that's the ID. We've targeted our element and we've selected it with JavaScript. And we want to change the inner HTML. So we're going to do dot. Inner. Html is the HTML is all capitals. We're gonna use an equal sign, so I'm gonna change it now. What we're going to change it to, and this is again, this stuff is quite complex, but we're gonna keep it. Explanation is really simple for this tutorial. We're going to create a new date and then get full open, close bracket, finish with a colon. Before you forget what you've written, we're going to create a comment. Now commenting the JavaScript is slightly different to Hugo or YAML. We use a double slash for a single line comment. All right, We'll save that. You may have to restart your server to get this to work and we'll check out the website has now been, instead of dynamically, brings us to the next step, we need to create a new script full back. At swipe Mei Ti. Explain what a nice script for Becky's is if we go into inspect and then the three dot menu and run command, which is also Control Shift P, topping Java, and then disable JavaScript. Nothing's gonna happen yet. You've got to refresh the page. You can control R or click the Refresh button. You'll see now we've got nothing next to copyright because JavaScript isn't working. A nice script fallback is some texts which will be displayed only if JavaScript is either disabled or not supported in that browser. It's as simple as creating a tag called a nice script. You can do that automatically with emit. And then inside there, we'll start with a nice simple example. We'll put in the year 2025, for example, will make it a u in the past we go 2020. Will save it. Refresh our browser. You'll see the year 2020 comes up. If JavaScript TCC labeled, make them be better, we're going to use Hugo degenerate that you will take the comments. This code down here. We'll cut it and then we'll paste it into the new script section. And now he is going to insert the current year into that no script tag. But here's the catch. He go only do that when you build your site. You will not going to build your site every day. You probably build it every year. But it started around January, February, March has a high chance that you will have the previous year. And that's how we are using JavaScript to dynamically generate the dydt. We have got our full back just in case refresh the site. And it's coming up as 2021. And then we'll enable JavaScript, Java and enable it and will refresh the other right, enabled JavaScript you to just close the developer tools and refresh. And it works really well. That's it for the video. There's lot to take in. There is both a dynamic and the static generation of the photo. You've got any questions in the discussion section below. Otherwise, you can download the source code for this completed lesson. I'll see you in the next lesson. 11. Create a single page: Throughout this project so far we've been working on just the homepage. Now we're gonna look at how to credit additional pages and Hugo terms we call a single pages. On completion of this lesson, you'll be able to create a single-page template. You'd be able to create a mock down fall for a single page. And you'd be able to generate a menu link from a single pages front matter. The first thing we're gonna do is correct a single page template. Your project needs to go into a Layouts folder and then default, we've got to have enough single.php HTML and we haven't actually touch sees yet. First thing we have to do, it's very similar to the index.html. We have to define the block that were entirely targeting the main blocky, just sanding block. We actually have enough by itself. And then we're going to leave a few lines and we'll put in now and tag, we can put a section tagging. We'll give it a class of mine. Just in case we need to target that section with some CSS down the track. Gonna put in our Container. Tab first row, row. We'll put it in a column. It's really important if you wanted to bootstrap to function correctly, you must follow that order every time. And then we'll put in a heading. H1 will insert the title of the page. So we use that with dot title capital T. Then we're gonna put it in a subtitle. Now this subtotal might not always a P. We have to use it within a conditional tags that if it doesn't appear, the code won't run because you don't want to generate an arrow or have an empty tag on our site. So we use with dot params with a capital P dot sub title. Then we'll run a H2. And we'll do that in italic. We'll do dot FST for font-style italic, and we'll also do font size of three. Stage three will do text muted as well, just a lot and up a bit. I thought ticks muted. Then we'll put in a curly braces with a dot. That dot will be generating the data from dot params dot subtitle. Now underneath we will put in tagging. The next thing we have to do is the page's content. We're going to do a div. We'll do padding above and below that of three. So we'll do dot py, dash three, that's top and bottom. We will do our curly braces. We've thought content. If setup our basic template now I need to create a mock down fall for the page's content. The better how to do this is using a command will control CEO command say to close the server down. I mean, archetypes. At the start of the course. We set it up so that draft was false. By default when we create a new page using Guigo, it will not be a draft. By default out of the box all the pages you create a drafts and actually doing a p.sit. The command is Hugo knew we use slash about slash, index dot, MD into. Then you'll see in the content folder we've got our About folder and index.html. You can, for example, Hugo knew. And then you could do process. You'll end up with a file here called process. They work very similar in terms of navigation. I prefer them in their own folder because later on, you'll be looking at page resources and images and storing images with the files. And it's much easier if you create a subfolder for each page. I'm going to delete that one there. Let's now have a look at the mock downfall. So the first thing we're going to create is the subtotal. We're going to put in here, for example, serving the local community. Since 1999. We're then going to create some texts. If you follow the directions in the previous lesson, you'll be able to use Emmet inside the knockdown false alarm. Then we'll type in 100 a month a line and I'll run that again. Go run lorem 90 days time. Now as we close the hago server to then run the Hugo new command will have to run you guys ever again. And then we'll check out the website and say, Look, we haven't set up the menu items yet. We'll have to manually navigate to slash About. You can say we are using the template that we just created without subtitled. Disabled the subtitle, for example. I'll put a hashing before the subtotal, say you don't want it for that page disappears. But if we inspect, you'll notice that the tag recipes as well. And that's why I used the width command. That brings us to the last step and that's creating a menu item and a white. We've got back to our index dot m d, The main one with the underscore in the root of the content folder. You'll notice it's assigned to the main menu and it has a weight of tins or copy that. They will turn our subtotal back on. And then we'll paste that in, but we have to change the white and we'll make it give it a weight of 20. That way it's the second item in the menu. If we're looking at config file, you'll see we've got also got an autumn with the weight of 1900. So we have tin 2019 hundreds I should know, display in order. Let's have a look. They're always fighting in the correct order and the active state is working great too, because our about page, which is the current pages, dot-com. If we got a home, you'll see that one's Docker as well. Some people use JavaScript to do that function, but it's way easier with ego being a static site generator. We can do that automatically. That's it for this lesson. You can make as many single pages as you like and they'll all use that template. We'll look at custom templates in a later course. Seeing the next lesson. 12. Create a list page: Welcome to the next lesson. In this lesson, we're looking at creating list pages. This lesson will be slightly longer than the previous one. And that's because lists pages are quite complex and we're also looking at pagination. On completion of this lesson, you'll be able to create a partial to display each page's heading consistently. You'll be able to create at least page template. You'll be able to create a markdown file for at least page. You'd be able to generate a menu link for list page through its front matter. You'd be able to create a placeholder single pages for the branch bundle. And this is just for demonstration purposes. In this tutorial, you've had a paginate, the least display of single pages on your list page. You better control the number of pages displayed on each paginated page and you'll be able to control the length of the page summary display for each page on your list page. Step one, let's make a partial. So every page has it's titled, displayed consistently. Go back into our single.php HTML and will haul out all the texts used to display the title. We will cut that and in its place, we will put in two curly braces. And we'll run a command called partial. And we're gonna call it title. And then you have to put a full stop so that the entire pages contexts, these pass-through to that partial. Now, if you hit Save, you'll see an error generated and that's because we haven't made that partial yet. I go into your partials folder and create a new file called titled dot HTML inside that partial, pasting that code that we just cut a few moments ago and save it. Let's have a look to see if everything's working as expected. I've never get it to the About pages. You can see the total is still being displayed even though it's being pulled from the partial. Now onto the second step, we have to create a list page template for displaying least pages. If you're looking for more information on how list pages work, I'll link the Hugo docs page for page bundles and you'll see that a branch bundle has an index fall with an underscore. Before that, we'll use the least type layout which are working on in this lesson. The previous lesson was using an index dot MD with the underscore and that you uses the single layout type. Lease templates also display at least of all of the other pages within that folder will go into the list.html inside our default folder, inside layout. And as per the single-page, we need either find my rule, just copy the whole file. Let's go about changing it. So the first thing we will do is underneath content, we're going to use range. And we're going to go through all of the pages. We have to put in the end tag to end that either ocean. And then inside there we will display the hitting of that page. So we're going to use H2. We've used to H1 previously inside this partial T2 and then Tab. Then we'll use a link i in a dash. And the link we will use curly braces that we thought permalink with a capital P. And then in-between the opening and closing a tag, we're going to insert the title of that page, so use dot title with a capital T. Then below that we're going to display a summary of the text in that page, will use the two curly braces and it's gonna be dot summary. We're going to wrap all of that inside an article tag. Mock down fall. Now, the list page we can get it to display will stop out here guys ever with Control C or Command C with Hugo knew slash products slash underscore index.html. We see what our products folder and our index.html, what I'm putting in some content. We'll save it for, we continue, we'll assign it to the main menu menu and then a colon and will sought to main. And we'll give it a weight of 30. So it's to the right of the existing menu item that we have for about restart Hugo server and have a look new menu item for products as APEDE headings being pulled in properly. And so as the content but nothing else has his flight. And that's because we haven't created the single-page item to yet. Now I'm going to create some placeholder. Let's just temporary. Pages gonna be single pages and they going to live inside the branch bundle where our products index fall leaves will stop the server again. We'll run Hugo knew slash products slash cars dot md. Two ways we can do this. We can have the following in cars dot MD, or if we're gonna be using photos later on, you can make a folder called cars and then rename the file to index dot m d. Recommend this method because it's much better for expansion later on. Index.html. We're going to add some content to it. We're going to run lorem. I think it's tomorrow on a 30 word paragraph and then alarm on a 50 word paragraph. And then alarm maybe hundreds this time. And then I'll save that. We need multiple products so we can get the pagination to work. So what I'm gonna do is I'm going to copy and paste. Cause a few times. I'm going to rename it to boats. And then I'll rename the next 12 bikes and put it in the correct folder. And then I'll rename the last mixed one to motor box. I'll keep doing that and I'll see you in a minute. I've got a bunch of folders near them or what index dot MDT files and tell them what I'm going to go in and rename the title of each one to match the folder. You guys through nine nines and I'll see you in a minute. Alright, so I'm going to make sure they're all saved and closed. Then we'll run the server again and see what happens. Guys is finding a summary of all those pages that exist. How do you think we need a bit of space between them? We need some spice between the summary and the footer at the bottom. Go back into our list.html section. We'll do P B3 or padding bottom three. And we will wrap our summary in a div with a padding bottom three. So Pb three pre-made F3 will say that and have a look. It's quite basic, but for now it's functional enough. Credit a long list of all of the single pages that exist within the products folder. Now we need to paginate that displays that only a certain number I displayed per page. The way we can do that is where we arranging through all of the pages within add dot paginate or to the side of that. If we save that, we went different because by default Hugo displays ten pages when it paginate. So let's now create the pagination controls at the bottom of the page and we'll come back and change the number of pages that he displayed per page. To display the pagination controls has a built-in template and we can copy and paste it from this page. And I've linked to these docs page. In the resources section. After the tag, I'm going to create a div because we're going to style it in a minute. It's thought that Dave, I'm gonna paste in you guys pagination internal template to get the pagination controls to show up, we're going to have to limit the number of pages that are displayed per page. Going to copy this pyramidal. Then we'll open up our config file. We'll put it in a comment, put in paginate, and we'll set it to five. We'll save that. Now you can see we've got 12345 products and then we've got our controls at the bottom. And these actually are Bootstrap classes by default, if you go, we can go to our second page. You'll notice at the top the URL changes. We're on page two. And if we go back, it's just on the index page. We can do a bit of work to make these display a little bit better. We'll go back to the list page we created earlier. We'll put it in class equals. First of all, we'll do em dash three to credit margin all around to keep other objects away from it. And then to send through it, we have to do d dash flux for display fix. Once you've enabled flakes, we can do justify content center. Let's save that. As you can see, it's looking great. The next thing we'll look at is how to control the length of the page summary used on our index page. We've got a little bit too much text displayed for each product. Let's go back and let's fix that up. Now, there are a few ways we can do this. The most simple way of doing it with a configuration that's using the summary length parameter. So we'll copy that. Go into the configuration fall. We'll put in a comment Pi set in. And this not only does words, but Hugo rounds at two sentences since that way putting seven words for example, Guys, we're adding that to the nearest sentence. So I will just change the sentence around. Go into boats. Grabbed his sentence out of he puts up the start site that you can see how you guys, even though we only had seven words, it's rounded to the nearest sentence, whereas he would have got seven words. Now for example, you think that looks terrible for your products. There are two, otherwise we can generate summaries manually. The first alternative to the automatic summary is manual splitting. Now, you must copy and paste this exactly. This tags. We'll copy that. Then we'll go into R Markdown for our boats product. It will paste that in and save it. You can see there that all the texts above that tag is being displayed as a summary for boats. The next I've arrived for summary is using front mat and we're going to use a summary variable in our front meadow. So I'll copy that. I'm gonna go into the box. Product will put out summary and he will copy a sentence or two into that summary. And then we'll save it. Started with the word box. Then we have our summary override for bikes using the front metal. The three ways we can generate summaries, Hugo TID for Lesson ten. Congratulations, you've made it to the end of the main part of the course. I'll see you in the next lesson. Remember, if you've got any questions, you can ask them below and I'll try and get back to as soon as possible. 13. Build and upload the website: This lesson is all about building the website. Now, so far in this course, you've been working with you guys development server. Now we're going to actually build the website, generates some HTML files, test them out, and then upload them via FTP. On completion of this video, you'll be able to build a website to the public folder. You'll also be able to modify HTML to reduce its size. You'd be able to test the website app before you upload it via FTP. And you'll be able to upload the sites files via FTP. The first thing that we're going to look at is how to build with Hugo header output files. Before we build the site using Hugo, we have to tell her ego, the domain name that we're going to be sending this off to. That way, Hugo can build the URL's correctly. If you go into your config file, you'll see there's an item called bias URL. Now, before you pop on the survey, you got to check the domain name. For now we're going to use localhost. She put a slash after it. There's one more setting that we have to do before we build the site. And that is we need to disable the generation of the categories folder and the tags folder. We can do that with disabled kinds. Put the exact code and then I've got here, I've put my comment above it. Even if we haven't got any taxonomies or categories or tags, these folders will be generated anyway. Now lift this link in the resources section, there's a command called Hugo, and you have to provide some flags to it. Optionally. We just run the Hugo command. It will actually build straightaway. So let's give that a go. Back in our project. We'll talk in Hugo. And I'm just gonna make that term a little bit bigger. It's very similar to what you normally get except it actually outputs of files for you. I ran Hugo without the disabled kinds configuration just to show you what you do get. As you can see, we've got a category's folder and a tags folder. And inside there we've got our index.html. We don't want that for this website. I'm going to rerun it with that configuration in place like I just showed you will have a look at the difference. Now, I'm going to use a command called clean destination DIR. They need to use this said that the items in the folder deleted. If you make changes to your website, say for example, you delete a page and then you rebuild his ego. That deleted page will still be there unless you manually delete everything in the photo or you run this command. Now we didn't have those unnecessary files and if you use a whilst to navigate to them, it probably wouldn't make sense. And it would look like if a page error, Let's have a look inside one of the files and see what you guys outputted. As you can see, there is a lot of space throughout the file. We can remove that space. We will be reducing the file not by a lot, but it will have an impact on load times for uses. Magnification removes all of the extra whitespaces and new line characters to reduce file size. That will in turn create a faster download for the user. You can look at the docs page. There is a option we can use called minify. We need to input dash, dash minify after the Hugo command. It will magnify any supported output format, which is basically just HTML. It doesn't support JavaScript or CSS. Let's have a look. So we'll open up the index.html file. As you can see, all the whitespaces if they remove bone, unfortunately, he doesn't remove the newline characters. Before you go to the trouble of uploading your files with an FTP software to a remote server. I recommend you test it locally and it's quite easy to do. The software package we're going to use to run a test server is XAMPP. It's a free suite of software and you can use it for a variety of purposes. I'll also be using it to do a test FTP upload. You can also try that yourself if you don't have an FTP server to upload the files. To. The start of this course, I showed you how to install Hugo and all the associated software. It's super easy to install XAMPP. I'm not gonna go through that process. It has versions available for Windows, Linux, and Mac. So it's good for everyone. I've opened up the sample x m double p.stance. We're going to start up the Apache server. We don't need MySQL because we're doing a static site. You then got to navigate to the folder and it tells you down here in the logs that it's installed in C slash x and old piece, let's navigate to that folder. And then once you're in that folder, you have to go into HT docs. Mccartney got a sample website. So let's go back to Chrome and we'll see if we can find that. In Chrome. I'll talk in local host now, be careful by day photo it will want to go to port one hundred thirty one hundred three that guy, but we don't want that. We just want the default port of 80. There's the site we will just looking at. We're going to delete this site because we don't need it. We're going to upload our own. Hey guys saw it. You can Plato as false, get back to you or hugo public folder needs Control I, or you can highlight all of the files. Do Control C. And then hit into the docs folder, paste them in with Control V or Command V. Then we'll go back to our browser and check it out. So we'll refresh the page. Get rid of that dashboard page. As you can see, we've got our Hugo side and that's emulating your site uploaded to an FTP server and put our pagination working. We've got our single-page is working. We're ready to upload this to a seven via FTP. That brings us to the last step in the entire tutorial and that's uploading your new site via FTP. Now I'm going to eat when SEP for FTP uploading, however, it's only available on Windows if you're using a Mac or Linux. An example of a good software you can use. This falls a lot. I've got a multi-platform support, but all FTP programs are quite similar. Do you want to emulate uploading to FTP on your own computer without using a web server. Xampp includes the falls a lot. Ftp server, if you start that and then go to the Admin button, we're setting up the server to one to 7 dot 0 No.1, which is localhost. Then in the config, going to the users button, you create a user, give it a simple password, and make sure you've shared some folders. I'm sharing the slides, exams slash HT docs folder. I'm going to give all permissions because we need to be able to do that. Violet FTP. Set that as the home directory. We'll save that. Now we might FTP software. I'm gonna create a new session. I'm going to connect to one to seven dot 0 dot dot one. Now that may change depending on where you are uploading your false witnesses. This is just for localhost test. I'm going to put in the username and password for my test server will hit Login. Now these are the old falls that we previously copied into the HT docs folder. I'm gonna highlight those and hit delete. Delete this false. That's the remote server. And this is our public folder where we built the files to highlight all of the files in our public folder. We drag them across. If it was remote server, it will probably take a while for them to upload and then we can go and we can navigate to the page and see if it works. It looks like it's working after we've uploaded via FTP. Big congratulations to those who made it to the end of the tutorial. You've done a great job. You've learned a lot of skills and I'll look forward to seeing you in my other Hugo tutorials where we explore all these concepts and many more in much greater detail. 14. Summary: So I hope you enjoyed the course and got a lot out of it. Well, many of the topics weren't that in depth though designed to be a thorough introduction. But don't worry, mois, releasing more courses that cover all aspects of static web design. See you in the next course. 15. Bonus - Automate Hugo tasks with NPM scripts: This is a bonus lesson. I've had a lot of feedback. People asking for additional features such as this one we're gonna be doing is creating a list of scripts that will run with the NPM package manager so we can automate the tasks which will need to run with Hugo. So let's get started. We go to a new terminal and the first thing we'll run is npm. In it. You must have npm installed. If you download Node.js, it'll have NPM included for you. First thing we'll do is we'll ask for the name of the project. In this particular case, the name of the folder is perfectly fine. It tends to version on only set it at 0.1 for a project that I'm just starting on. The last one is for patches. The middle digit is four features as fixed as change. And the main first digit is for breaking changes. And you generally don't label it as version one until it is a stable production release. So I'm just going to stick with 0.1 for now. Description. You can optionally put in a description for your project. This is mainly if you're publishing your project to the NPM Repository and you generally don't publish websites to the npm repository. But it doesn't have to put a description there just to remind yourself of what this particular project is all about. We don't actually have an entry point as we're using Qie Gei to compile the website. But what you could put in there is public slash index.html, but it doesn't really matter. We don't have a test command. And I've already run git init in this project because I'm uploading it to GitHub. So it's already to take that and it's got the address there of the Git repository. It is quite handy to have that address in your package.json file, which way creating right now keywords. You don't want it. And that's mainly if you're uploading to NPM. So people can search for your project. Author. Again, it's an unstable can search for your projects, so it doesn't really matter. And time we'd license. And then we've got to confirm the left-hand side. You'll see package.json going to close the terminal so we can have a look. So you can delete things that you don't need. I'm not going to worry about the main Olivia test script in there for now. I'll get rid of the author. Glycines bugs in homepage. Keep in mind you cannot have trailing commas in Jason's have to get rid of that trailing comma. Then we're ready to get started on the scripts. First we're going to look at is div. I'm going to back out all this. Let's run the development server. As you know, we were on Hugo server, but there are a few more things we can do to get an idea of all of the options available for you guys. Server. If we open up a new terminal and we talked Hugo, server, space, dash, dash, help. It will list all of the flags that we can apply. What we're really interested in, he is dash, dash G, C. And that runs some cleanup tasks after the build, which is great for keeping things clean lane ready to upload to get, for example, to save your progress. And the next one we're worried about is disabled fast render. And what that does is it enables full renders on changes, so does slow down your dev server. Sadly, rhombohedral is extremely fast. And if you have got disabled faster and are enabled, it means you're always going to get the most up-to-date version of the site. Generally speaking, we'll do is we'll run dash, dash G, C. Then dash, dash, disable a fast with capital F and render with capital R. And that, for me, is the optimal way to run the dev script. The next one part of that is for previewing files. There's two ways that I do that. The first one is build drafts, and that's for building content which is marked as draft true. And the other one is build future. And that's for content which has a date which is in the future compared to the date where you're running the builds such as today. So I usually combine them into one called preview. Let's go ahead and let's do that. And it's actually a shortcut. What we'll do, we'll put a comma after that script, and then we'll do dev colon preview. The way we use the shortcut is npm. Run dev. And then dash, dash, space, dash, dash. Build drafts with capital D, dash, dash, build future. You must put a colon after the name of the script so that it is valid. Json will say that and before we continue, we will try it out. Now instead of typing cue guys server, every time, you can actually go down to the bottom left where it says npm scripts and they'll appear there for you. This is the automatic way. I'll show you this first and then I'll show you how to do it manually. So we have to do is hit the play button. This isn't enabled by default in Visual Studio Code. And then if you look further up, you'll see that the actual command, but disabled fast render and garbage collection. And the site has been built. You can then use Control C to stop or you can just hit the trash icon to kill the terminal. We then got our preview. It runs a task as well. You notice it's two-step. We've got our first command, and then we've added our options to it. Now, the manual way to run the tasks, if we get a new terminal, I don't normally do this, but you will have to do it occasionally, especially for installing NPM run. And then if you look inside your package.json, you'll see Dev. He's typing div, just like we've typed in here. Npm run dev, that's the exact command or used to run the first one. If you want to do the second one, it would be dev colon, preview. And that will run the same script, but you can generally just use the option left-hand side of Visual Studio Code. Let's make some more scripts. Some will do is for building Q goes, I'll put a comma in. And then we'll run build a colon to be voted the comments. So we're on here, you got to start with. Then I'll show you the options. So we run Hugo, dash, dash, help. The first one I'm worried about is verbose. And what that does is it shows you everything that's going on because occasionally when you're running the server, everything's fine. But then when you want to build the entire site, you'll have an issue. That's where I use dash, dash, verbose. You could use dash v. Dash v is really handy when you're typing it in and you want to hit Enter. But when you put it into a file, we'd have to type it every time. I highly recommend you use the full version. That way it's much easier to understand. So putting Hugo dash, dash, verbose, then we use garbage collection. So dash, dash G, C. Then we'll use minify. And that we'll minify all of the HTML XML files, modify any of the JavaScript HTML CSS for the minify because it's for production. And last one we'll do because we're outputting it to the public folder. We're going to use dash, dash clean destination. Dir will say that X1 is one that I find really helpful for development. That is render to disk. And I've camelCase that. Though, what we'll do to start off with is we will copy and paste out Hugo server command. Paste that in. We'll go back into the command prompt terminal and look at the options. And one option, render to disk, and that will serve all the files from the disk. By default, all the files are placed into the computer's memory and they served into the browser. There's no record of them there for you to look at while it happens, it's all happening instantaneously. If we use rinses disk, all the files we placed into the public directory, and you can actually go in there. You can check the size of the files. You can open them up while it's running. So it saves you having to hit the Build button multiple times. So I'd rent it to disk, actually CamelCase, so it's capital T, capital D. And then because we're using the public directory, that's where the files are uploaded by Hugo will copy and pasting clean destination DIR as well. And along with that, I use another command which is very similar. And that's brenda to these kind of put a colon in. And we'll do a preview. And that's going to be somewhat similar to our previous script. For div. We can paste that in, except this time we're not running the command, we're running render to disk. The next one that I use, probably the most often is render to this production and this is the main one that I use. Copy and pasting. Except this time. We're not going to do bill drafts and build future. We're gonna be using environment. We're going to set that to production. So in fire on mint production and also minify because we're trying to emulate that production build which has got further up. We using minify. We don't have to worry about clean destination DIR because I've already doing that in the main room study disk script. And the last one is not entirely compulsory to have at hand, but hugo version. That's quite a simple honest. It's a bit of a reminder. Hugo version. And that will let you know what version of Hugo you're running. So for example, we can go down, hit the play button. And it will tell you straight away what version of Hugo. And I've always using Hugo extended because it's got the functionality on there for CSS and JavaScript building built-in. But it tells me which version I'm using, 1.11010. That's a bonus. Holiday useful. Highly recommend that you set this up, customize it to what suits you. I'd love you to be able to take some screenshots and pop in the project section and show me how you've personally set up your own Hugo development environment. 16. Bonus - Split config file: This is another bonus lesson that I am releasing based on feedback from students who are going to do is when look at breaking down the config dot YAML file into multiple files to make it easier to find the section of the config file that you're after. We do that is we create a file folder in the root of your project called config. We didn't make a folder called underscore default. Then we'll drag our config dot YAML into that folder. Now straight away, that will work perfectly fine. But what we're gonna do is we're going to split out the menu section. We're going to do to highlight all of that and we'll cut it. It will make a file called menu dot YAML and we'll paste it in. But what has to happen now is we have to remove the menu item and highlight all of the config and bring it back one level with Shift tab because we don't need them in your I20 anymore because they were in menu.html. That's done automatically for us. There's one more file that you use quite often and that is params dot YAML. Normally you'd have a params item for example. Over here you might go, params might do something like site author, for example. But we didn't need that. You just put site author into the new file. That one there just to quick one. That'll save you a lot of time. It'll keep your sites a lot tinier.