Building A Website Using Hugo

hey everybody Chris state here today I'm going to show you guys how to build a site using a static site generator let's jump into the video all right so you can see on my screen here I have go Hugo's website up here it's just Hugo which is our static site generator and today I'm going to show you guys how to install Hugo how to use to you go and how we're going to build a site using Hugo now there's a couple of things you're gonna have to have before start you're gonna have to have git installed on your machine and you're gonna have to have some sort of package manager such as brew for Mac OS and chocolaty for Windows and see here I have Hugo pulled up here now I'm gonna show you guys how to install this I already have it installed but I'll show you the process on how to do it and it's going to be exactly the same the first thing I'm going to do is I'm going to open up terminal I'll bring terminal in and then what we're gonna do is we're gonna go to Hugo's website and I'm a big of a big pusher of learning things by reading documentation and this is actually how I learned how to make all my websites that I've built using cue go straight through Hugo's documentation so I'm gonna click on docs up here and you can see on the left hand side there's a gets getting started guide and I'm gonna click on install Hugo you can see it's available here on Mac Windows Linux FreeBSD basically any machine that can run the go compiler Hugo was built using the language go you don't you're not really required to know how to use the language or understand the syntax just know that the go compiler is used to build this website you don't need to install go on your machine it's already ready to go through Hugo now we're gonna scroll on down here down to the Mac OS install settings you can see I'm running Mac so I'm going to use that if you're using Windows user the chocolaty windows settings but we're gonna go ahead I'm gonna click on this I'm going to copy this command so you can click copy right there it shows that it's copied and I'm gonna go over here to terminal I'm just gonna paste that in there now when I go to do it on my time since I already have it installed it's gonna give me a warning and say hey it's already installed if you don't have an install just going to go ahead and install it for you you can see the latest version as of this video is version zero point thirty seven point one if you if you do end up watching this in the future or you know this isn't the latest version you can always do brew upgrade Hugo and what that will do is that will actually up it'll find the latest version and update it to the latest version there is one thing that I do say when it comes to using brew on Mac when you're installing Hugo is that you might be a few days late on new versions so when they update Hugo on the binaries basically on github when they post the data on github and they they have the binaries there it takes it just a about a day for it to actually go ahead and get pushed to brews repository because it is a separate repository so somebody access to go in and upload that but I've never had an issue with that unless you have to be on the latest version then your website isn't working right so now that we've got it installed let's go ahead and check if it actually is actually installed so let's type in Hugo and terminal Hugo version and if we did this right and it's installed right you should see what version it's on you can see here you Hugo static site generator is at version zero point thirty seven point one so it looks like everything's good I'm gonna hit command K and terminal to clear it out and we're ready to move on to the next part and the next part is actually starting a Hugo project so let's go ahead and get into that alright guys so we're gonna go ahead and we're actually going to start Hugo project here so I'm gonna I'm just gonna start this on my desktop you can see inside terminal on the right-hand side that I'm my only I'm only in my users folder so I'm going to change directory to my desktop I do and I do use a lot of terminal or command prompt in my development videos this is because a lot of programming and development world is wrapped around this so if you need to learn how to do this I'll try to come up sometime with some tutorials on how to use this D software but for the time being we're gonna be using terminal for a lot of this so please feel familiar and feel free to pause the video to find the codes and all that right so now we're gonna actually start a project so I'm on my desktop and to start a project you're actually gonna click you're if you're going to type in Hugo new site and you're gonna put a space in between all of that and then what we're gonna do here is then type in the name of our site I'm gonna call this my site so next what we're gonna be doing is now that we've got this site generated I'm just gonna bring it up here on the desktop you can see the folder here it's called my site and if you open it up boom you can see all this content inside of here right and now I want to show you guys more thing before we move on to building the rest of our website I want to show you guys how do you view this site locally how to get it running locally and start a development server locally so you can you can see it as you build it so back here in terminal what we're going to do is we're actually going to we're going to click on this you're gonna click on terminal actually no typing Hugo server right but that's not gonna work why well I haven't actually gone into my hugo i haven't actually gone to my hugo site or here called my site so we're gonna change directory to my site i'm a taking hugo server now what that does is it actually starts us a local development server on your machine that it creates it on localhost using port number 1313 so if you go to your browser and you type in localhost 1313 you actually get a blank page now why is this and this is because there's no content in your website so yes a server is running but because we have no content there's nothing going to show up so before we go ahead and add content I think it's very important that we pick a theme so I'm going to go ahead into the next section of this video and we're gonna go ahead and pick and implement a theme alright so the next part of our video here is I want to talk about themes I'm gonna go ahead on this terminal I'm gonna kill that development server that we had just talked about by hitting ctrl C now that that development server is done I'm gonna clear out my terminal and we're gonna go on to go Hugo's website and we're gonna click on themes right here now when you click on themes there's actually I think hundreds of themes here that you can choose from they're all free they're all open source you can see you the source code for all of them but we're gonna go ahead and I have a favorite that I've been using for my website my personal blog website I'm gonna hit ctrl F or command F and hit find and it's actually called Casper to Casper to is awesome there's typically you can download it so you can download the binaries or you can view the demo here if you click on the demo you can see right here that this is kind of what the site looks like and you can actually if you go to my personal blog website blog Christie comm you can see that my website is actually made using this theme so it's really awesome it looks beautiful I can you know I can embed videos I can add links it's amazing it's a great theme so we're gonna do now is we're actually going to go back to Hugo's website on that theme page and we're gonna actually install this theme so you can see that in terminal on the right hand side that I'm still inside my site folder and we're gonna scroll down here and they have an installation guide and so they say that you need to change directory to that themes folder so I'm going to say change directory themes and then you need to run this git command which actually takes a git repository off of github and it clones it to your local machine now you can see that it did clone it and if I go into that folder of my site and I go into themes you can see there's Casper to folder and inside there there's a couple of themes a couple of things actually the first thing here is that we have an example site you can see that's great you can see that you can actually they actually have a pre-built site it's the same one that when you when you click on the website it's the same one that when you click demo that's that same exact site so you can see all of the code they use to design that website they also have a images layouts Archaea types they have their license a readme and static files all of this stuff is used to for your theme and you shouldn't have to go in here much at all unless you're looking for examples but most of this is going to be static as far as you're not going to be touching it and when there is an update to the theme they'll push that through github and you can run a git command to download that now for instance if you love everything about the theme but one thing you are able to change some of this code just make sure you read that license file to make sure that they're gonna allow you to do that you can see that this theme in particular is an MIT license what that means is that it's free for any use but the the person who created the theme is not liable for any things that you do with the theme if you get into trouble with that I wouldn't see that as a big problem but that's just what that is now I'm going to close out of this folder and we're gonna go on to how to implement this theme by setting up a configuration file we have this theme installed and I'll show you that will go into Hugo server inside of terminal we'll go back to that localhost 1313 oh look at that a problem it isn't running the Hugo server because I'm still inside a theme folder so we're gonna back out by doing CD and then two periods and then we should be able to run Hugo server and you can see right there boom it's running and if I reload this web page you can see that the theme is running already but why isn't this working why isn't this showing up well check out the next section and I'll tell you why alright hey so we're in the next section here I'm gonna show you guys how we set up the configuration file and why our theme isn't showing up so the first thing I'm going to do is I'm actually going to kill this server I'm gonna hit ctrl C and I'm going to clear out my terminal to make it look nice and pretty and I'm actually going to open up visual studio code to edit my to edit on my file so I'm going to type in code space dot and that actually pulls open visual studio code I'm gonna make this a little bit bigger here to make that fullscreen for now and we're gonna click on config time oh this is the configuration for your entire website and this is very important every theme has their own set a set of rules when it comes to configuration file if you're building your own theme you can make your own rules but if you're using a theme that somebody else has built you need to adhere to how they set up their things so I'll put this here on the left hand side I'll make it a little bit smaller and then I'll put this webpage over here on the right hand side let's put that right about there and I'll scoot this in alright so you can see if you scroll down on this themes page they have that installation guide and then they have a sample configuration file we're just going to copy and paste everything out of here and then we're going to go through it and we're gonna edit it to how we like it so I'm gonna copy all of that and I'm gonna paste it in here and I'm gonna save that now if we go back to that if we go back to terminal right and then we type in Hugo server and now it's actually running on that same port so you type in localhost 1313 Wow look at that our themes already running and it is it really what we want no but it's already running isn't amazing so that just by doing that just by adding that configuration file it actually told it told Hugo using this that we're going to be using this Casper 2 theme and then it knew to go into the themes folder and pull that theme out of there so let's go through this one by one and actually set up our our server or our site right so the base URL is the URL that your website goes to we're going to type in HTTP because we're gonna be using a secure connection later on and this is gonna be called mine's gonna be called example Chris state comm and you can see right here that that's going to be the base URL and you can see we have a theme a language code and then disk your short name we're gonna get into that in a later video but just remember that this is going to be used for commenting so you can add commenting to your website it's awesome now the title of your website is right here I'm just going to change this to example site and they'd subtitle I'm just going to say my awesome site right now you can see on here there's a cover and we'll talk about the cover the cover is basically this black area so you can change that the description right here is the description of your site I'm going to put in Chris state's awesome example site and then there's Meta Description that's what shows up on Google and search engines you can see our hair of Google Analytics we'll get into that in that later video you can set up custom CSS and you can set up your own custom RSS link you they also have the options to add your Twitter Facebook and github I'm just gonna add those real quick so that way I can show you how those work my twitter is Chris State my facebook is Christie State and my github name is Chris State it's not you can see on this on this example side over here if you click on the if you click on the github link it will open up a new tab straight to my github that's awesome because a lot of times when people go to your website it's nice to have those links in those social media links for people to click on then the next thing you use and see in in the configuration file is that it's set up to look at this Hugo logo now where's that located at is it in this static folder no well if you go into themes and then you go into static you can see right here there's a there's actually a file named Hugo logo dot PNG and we'll go into how Hugo basically builds the site here in a second but basically the gist of it is that when it builds your site it combines to the themes data with your data and so that you can see that it's actually got that in there to remove that the fastest way instead of deleting that file and editing that theme because if we just delete the file when we update the theme or we pull from the git repository it'll just put it back we can just erase that out of our configuration file and right there instead of an image it puts our title of our website which is example site the next thing we're going to do is we're gonna go over here to author I skip this organization name you can do this this is just defaulted to the maker of the theme but you can you can do that on your own time I'm going to show you the author I'm going to put CS for my name I'm gonna put for now I'm going to put profile picture profile - picture dot PNG I'm going to be using a JPEG I'll show you guys that photo here in a bit jpg and I'm going to change the location so that shows my location Dayton I gotta learn how to type Ohio and we'll just change this to my website I will put blog Chris state com alright and then as a description I'll just put I'm a I'm a coder right I'm a I'm a developer and that's about it for the the main setup of that you can see that you can change it between Casper and Casper to when it comes to viewing that deals with the old version of Casper 1 and the new version which is Casper 2 you can just change that between the two and see it which one you like more now down here is kind of the top portion of it this is your your menus your settings and all that you can see here on the main website you have home go food and external well let's go ahead and change some of those to see how that works so right here on home you can see if we change this I'll make Visual Studio code a little bit smaller and we'll minimize this folder if we change this home to main because I like it using main so I mean it actually changes that live and that's the great thing about running this servers that when you saved your files any file in here it's gonna automatically refresh an update that website which is great now the next thing I'm going to do is I'm going instead of having a go I'm actually gonna put I'm actually gonna put an area called projects right because I wanted to own a display my projects and when it comes to Hugo you have two things you have tags and you have categories and you can use those to your advantage and will figure out which ones are better and why you'd want to use them but for now we're gonna leave these tags as project and we're gonna leave the second category which I can put maybe you know my life because I want to show people about my life things I do and we'll put the categories as life right and then there's also this third option down here which is going to an external site so they have it defaulted here to go to Google so now you can see that all these have getting changed and if I actually click on this top bar and I click on Google it'll actually open up Google which is awesome so you can you have a lot of customization a lot of difference and all this stuff now that's our configuration we're going to come back in here we're going to change some more we're gonna change more things but we really need to get to building content before we want to change someone things and customize them so in the next section that you're gonna watch I'll show you guys how to add content alright hey guys I'm gonna show you guys how to add some content to the website this is one of my favorite parts because adding content so what really makes your website your website it's what shows people what you have to offer and what really your want to show them right so what we're gonna do is I'm going to show you guys how to add content and the first thing to do here is and the easiest thing is to go into your terminal now you can see that it is actively building and rendering my website on a server and I kind of want to leave that there kind of leave that running so if I hit command T inside of terminal it'll actually open up a new terminal at that same exact folder structure right at the same exact my site but then it'll also it'll leave the other tab running in the background so we can we can leave that running and right here the way to do this is you actually type in Hugo knew and then we're gonna type in post and then forward slash and then I'm gonna type in the name of my post which we're gonna do my first post and then what you actually need to do is add the file extension which is dot MD and this is going to be a markup file we'll talk more about what markup files are here in a bit but for now just create this and we'll work through getting this done so what we do is we go back over into the my site folder structure and you can see there's a content and everything that you create as far as content for your website goes inside there and you can see that right there there's a post folder now the reason why we created a post folder and why we're putting our content in there is because the setting on this theme is actually telling us that it's gonna look inside post and we can find that inside config and down here you can see it's looking for in this post folder this is very unique to this theme a lot of themes don't require that or might have a different requirement you can kind of play around and look at some of the default settings a lot of those times what I'll do is I'll go into the themes and I'll go into the example site and I'll look at what they have as far as their config I'll look at what they have as far as where are they putting their content at and they put it inside of a post folder that's very important to me to have that example site right there because I can use that as a reference for building my site and it's amazing you don't have to go to a website you just look inside here and you've got it so we're gonna go back into that first post and you can see that there's a couple things here now up here everything in between these three dashes is what we call frontmatter and this is what is basically the configuration of this exact the post is gonna be exact piece of content you can see it's set up in value and our key value pairs so you can see here's the key it says title and that's gonna be the same across all content but the value is going to be different and you can see this as title is my first post and that's what's gonna tell the website this is the title of this page the date is gonna say hey this is where it should be added put this date on there and that'll actually help with organization so things with a date in the past will be further in your website and things that the most recent date will be right there in the front and then the draft now the draft is awesome because imagine you're writing a page or you're writing a piece of content but you're not really sure if you're gonna want that shown yet or you're like oh I'm halfway done and I just can't finish it tonight I need to save it and upload it but I don't want people to see a half-finished piece of content but what you can do is you can set that draft equal to true and it won't render on your website and you can actually see that on our website over here it's being rendered it says page one out of zero now that's doing that because this draft is set the true if we were to change this and set this equal to false and save it you can see that boom it renders re-renders the website that server re rendered to the website and it actually shows that first post and look at that my first post is actually showing up as the title and if you actually click on the post you can see the date is right there and that date matches over here now these aren't the only three key value pairs that you're gonna use that depends on your theme and what you want one of the bigger ones that people use is it's changing that image you can see that this image right here is kind of a default image and you can look at those if he goes into your themes folder and you go into images and then you or I'm sorry not images you go into static and right there there's a folder called default image there's seven images that are defaulting and what this does is if you don't give if you don't give your post an image by default it will actually give you a random number and then put an image in there and every time your site renders that image will change that's just so that way this theme looks good even if you forget to add an image but it's always great to add that image so what we're gonna do here real quick is we're gonna go inside of our draft and right below that we're gonna type an image and then we're going to type in quotes because we're going to add an image to this right we're gonna default image and I'm going to show you how to get an image real quick so we're gonna go to one of my favorite websites to get them it's called pixels come right here use free photos and we're gonna type in you know we're gonna type in a sunny day and you could see right here he's a beautiful let's see oh yeah here's a here's a nice flower right this is a dandelion or at least that what's going to be a dandelion one day and you can click on this and I'm actually going to choose they give you a couple options to download theirs original large medium and small and I'm going to choose medium I'm going to click download and you might be thinking like why why are we choosing medium sized image one I get the full image so we people have the best quality well we when we talked about the speed of a website we need to balance both the quality of your content and the speed of it if I open up my downloads folder here you can see that if I bring this over into view you can see that this image right here is 97 kilobytes I like to keep my images anywhere between 0 or you know anywhere between like 20 to 350 kilobytes anything larger than that is just going to take forever a render on your web page now there's things that you can do with existing photographs maybe there are a couple Meg's I've had photographs that are 20 Meg's you can you can find some tool online that will compress that that'll maybe resize that or crop it to get the size that you want but you want to be in that nice small kilobyte range that way it loads really fast now that we have this I'm just going to rename this file we're gonna say you know cool photo right it's a miracle photo and then I'm going to actually copy all of that text because we're going to use it later on inside of our post so I'm going to copy this this image and I want to close out of here and I'm gonna open up my website a file structure and if we go into there we're gonna save all of our photos underneath the static folder right and we're going to paste that in there so we have our cool photo and then if we go back to our website and we type in the path or a link to that some shouldn't type in the name let me do that look at that cool photo is set up on my first post look at that we got that beautiful picture you click on the website it still looks great it doesn't look pixelated and it's ready to go it's all ready to go right now why did why is it picking up that cool photo well on your website I'm gonna minimize this theme on your website you can see that we have we have this static folder and you can see there's the cool photo now on your website whenever it renders your website anything inside static it's not going to change its gonna go exactly where it's at so this is actually gonna go in the default route of your website so it'll go in you know my website slash cool photo jpg and then your foot and your webpage is gonna look for that same path so for example if you wanted to keep it inside let's create a let's create a new folder and we'll call it uploads right basically where we stick all of our folt files and folders and look it disappeared but as soon as we open up as soon as we open up our image here and we type in uploads boom it's back so you can see that's how you can change that now let's talk about real quick before we add more content to this page let's talk about these folder structures right these folder structures are broken up into these several obviously everyone knows what themes is that's where your theme goes the next thing is static and that's why your static files go those are great you can upload anything you want and keep it on your website the next thing here is gonna be your layouts now layouts if you go into that themes folder and you click on layouts this is basically all of your content basically this is the HTML of how your page is laid out how where your content goes you can see on the index this is basically where all that content goes if for instance you know you look inside this partials folder and you can say oh look they broke that they broke the footer out and on the footer of this website I don't like that there's the latest post here right I don't like that that's there well what you can do is you can actually just erase that right you just erase that right there and then when you save it'll fix it right look it's gone but there's a problem with that a problem that when you update the theme from github when this when this folder gets updated from github because it is a sub is a sub module it's a git module it'll actually put that back and so what why do you fix that well what you'll do is you'll actually copy and paste this file into your layouts and match the folder scheme exactly and then when you render your website anything that you have will overwrite anything they have now that's very powerful because that means that even if they update you can still maintain the same format that you like but it's also powerful in the sense that you have to remember that anything you write anything you do that overwrites there's can break that website so for instance if you if you write something that changes the website and it's overriding and then some reason it's not rendering correctly make sure that you didn't change the wrong thing but than that this overriding power is really powerful the next thing we have here is called data I personally don't use data it's where you can save things is where you can put things I don't ever use this but you're almost more than welcome to a lot of the times you can overwrite things like their default JavaScript or their default CSS if you wanted to change a color on the page but we'll get into that later that's not very important right now I never typically use this and you can see out here the last and most important one here is called archetypes archetypes here are basically the template of how it creates a new post so you can see you're here by default it'll always create a title a date and a giraffe but imagine we wanted to create an image every time we can type an image and then put these quotes here and then watch this if we go back into our terminal right and then we go over here to the this site and we type in Hugo new post and then we type in test not empty if we go back into our content over here and we refresh this you can see that there's a test MD and look at that it already has image in there and so that's really powerful because if you don't want to spend time writing out all your frontmatter and doing all your frontmatter you don't have to you can just write it in the archetype and it's set up as a default setting now the last thing that I want to show you guys here when it comes to content is actually adding content and I'm going to show you guys everything below the frontmatter here is actually considered markup and markup is powerful and it's great and it's really easy and so I'm going to go back over to here and I'm going to type in markup cheat sheet on Google and you can see right here I can click on this first link and right here is a link on github that shows you how to use this that's very powerful and very easy for example if you want to use header one if you're familiar with web development you have six headers if you want to use header one you use one hashtag sign right you know one stamp and then you type anything so I could say you know awesome post right and we go back to that website and look at this it if you click on the post look at rendered it an h1 we can do it for all of them so let's copy and paste all of this right here right copy/paste all that and look at this it has all the headers all of them built in so we can erase this pull that in and let's go on to the next one they have things like lists so let's copy all these lists look at this we're gonna copy all this default markup we're going to save that inside there and look at that they have lists they have unordered lists now the reason why this unordered sub list isn't working is because there actually needs to be a space in between these two and then let's remove these two dots look at that you have an unordered sub list so you look at that dots and everything looks pretty so if we close how to close out of all this I'm gonna erase all this content and you can see this is one of the most powerful things is that as you're editing over here you don't need to rerender you don't need to rebuild it automatically renders that website for you I love this feature you can add things like links and images you can actually add code and syntax highlighting so if over here I type in my content let's type in we're gonna use a Python right now you don't need to give it a language but that's just for syntax highlighting and you can say num 1 equals 3 num 2 equals full 5 and you'll print num1 plus num2 alright and then we give it the three dashes like that underneath and look at this it automatically adds a little code block so you can have some code blocks on your website if for example you wanted to show somebody how to code it's amazing you ought to do any hard work it's automatically done for you you can add tables you can add you know inline HTML so for example if you're if you don't like what's going on there if you want to add customized HTML code and paste that in there and it'll actually take that and it'll render it as HTML it's good and save this file and look at that I added some HTML there real easy this is also great when it comes to embedding videos so for example I go to YouTube right we go into YouTube and we click on a video right so let's just click on what we got here let's just click on this one right here sumo wrestling with Conan I'm going to pause this but right here if you click on share and then you click embed it's gonna give you all this code you can grab you can grab that code I'm gonna close out of this tab and you just paste it in here and when you save that and it rear Enders it boom the videos right there in your website it's real easy to load it runs pretty look at that a whole YouTube video right inside your web site so it's very powerful very easy to use you don't have to have a lot of knowledge when it comes to building websites it's all done for you so now that we got some content in there you guys understand how to upload content we're gonna move on to our our next section which is finishing up a lot of these configuration settings and all that and you know maybe adding an author image and I'll show you guys how to do that so let's go on to the next section so now we're gonna go into actually fixing some of our content on our website the first thing I'll work on is getting this author image to work you know I want to I don't want to show that question mark or kind of show myself so I'm gonna open up this file structure here and I'm gonna go inside of my my static and side of uploads and I'm going to drag this profile picture of myself into there I just named it profile picture underscore JPEG now the next thing I'm gonna do here is I'm actually gonna go into I'm gonna minimize this and I'm gonna go into my configuration file on my website and I'm gonna scroll down and you can see here inside of uploads I change this from uploads to for you know the apples folder and then underscore profile picture dot JPEG and you can see right here on the website it already rendered my name right so I already rendered my picture on here so you can see that Chris state coder developer and you can see my image there I also changed my name from CS to Chris state so that way you can see my full name when you click on a post so you can see that was super easy to add my profile picture again on that foot on that photo you can see right here it's 601 kilobytes now the reason why I chose this kind of a larger file size I say oh it's not 350 is this was a run a 20 25 megabyte file I took or a picture I took and then I can press it down the 601 kilobytes and actually what that means is that it's good because the websites only gonna pull that from one source it'll pull it in once and then it renders it across the entire website so that's gonna be a cached image so yeah I did kind of break that personal rule a little bit but that's fine we can go and keep that and it's going to render across the whole website the next thing I think we're gonna want to fix is this background image here it's black I don't really like that so we're gonna do is we're gonna go back to that pixel site I'm working on search around for an iced image so right here you can see on the default ones I like this I really like this space one so let's grab that alright so we're gonna click on this and I'm gonna choose medium we're gonna click download and then now we have that downloaded image and I'm just going to go back into my downloads where it saved that too and I'm going to rename this image to header and then I'm going to upload that to our uploads right there look at that changed our header now you can see right here on the left-hand side if we go up here to the top there's a logo we don't want to be changing the logo what we want to be changing is this cover right here and we're going to change this from blog cover to uploads dot header and I think it's jpg right there and you can see Wow look at that we already changed the head of our website and you click on this or you click on that and look at that it's beautiful it looks it looks amazing to me but we already change the head of our website so it's going to look great now the next thing we want to work on is if you click on these project to my life and Google Google obviously loads but if you click on project it's going to give this 404 page here and the reason is is because we're actually if you look at the configuration we're actually pointing to look for a tag called project so inside of our first post if we go in here and we add a tag so a key is the tag and then we add project right and then we save it you can see right here on the website if you click on project it's not going to find it and that's because we're I'm going to re-render this website so hit ctrl C and hit server and we're just gonna re render this website so re reload and click on that and you can see there's no tags yet so let's figure out why this isn't working the first thing I would do is make sure it's not tagged and maybe tags and let's see if that works no that's not working so let's go into us go into the themes I'm going to go inside of example site click on content look at their post and see if they've used tags before so I'm not using any tags there I'm not really using any tags there alright so let's see we have tags right here so they're using tags and they're actually using these square brackets and that means that it's a list so we're going to go back into ours and we're going to add this to a square bracket and we save and look at that right on our website boom I showed you that now it's adding a tags and if you click on project it won't rerender right now let's go ahead and rerun dur this server I rerun into the site and then we go into project and look at that now we have that working now why am i why am I going back and killing this and re rendering it that's because some of the times when you're adding new when you're adding a whole entire new sections to your website you just need to you need to start from fresh you what you can do is you can actually do disable fast render and fast render actually will only build what you changed but sometimes what you changed affects a lot of other parts of your site so if you disable fast render it'll take a little bit longer to render your website especially if a tons and tons of content but the nice thing about that is you won't have to actually kill the server and restart the server the other thing we have is a category and it's called my life and so and you can see that if we go into the configuration file the categories is in life so if we add a category right here so categories and then we add a value and we're actually new square brackets because something can be more than one category and this is a list and we're gonna call it life and then we're gonna refresh and then want to click on my life and you can see again it's broken and we're gonna go back into that terminal we're gonna kill it we're gonna restart the server we're gonna click my life and look at that now we have a category that represents life and only post that underneath that category will show up so we've worked with main which shows the most recent we have projects which shows just things with the project tag and my life that has that so you can see right there we have a beautiful interface for adding content changing images and we made a pretty awesome looking site and you know less than an hour I think it's amazing so we're gonna go onto the next video when we talk about hosting thank you so much for for watching this video I know it was a long one I know it was kind of boring maybe it's sometimes but I think it's really important to figure out how to build a site using Hugo this is just scratching the surface of what you can do with he go you can do tons and tons of things you can actually design your whole your whole theme by yourself if you want to have your own customized theme but please if you like this video leave a like down below please put your comments down below I'm sure you'll have lots of questions I'll be I'll be sure to get back to all that I can and thank you for watching and I'll see you on the next [Music]

Channel: Chris Stayte

Views: 86,072

Keywords: chris, stayte, hugo, static, site, generator, go, go hugo, chris stayte, development, css, javascript, html, markup, blackfriday

Id: c7vpcqA6SEQ

Length: 35min 23sec (2123 seconds)

Published: Sun Mar 18 2018