 Today your life is going to change because you're going to start learning how to make websites in Hugo So Hugo is basically the best of both worlds. It's written and go. It's highly minimalistic. It's fast It's sleek, but at the same time it's so extensible you can add So much of what you want customize it and and really do very unique things So unique that you will have your clients saying I can't believe it's not a dynamic site I've used Hugo off and on for years, but this year. I really sat down and kind of figured it out it clicked and The goal of this video and the other videos I'll be doing on Hugo is to make it click for you Hugo is a little bit like it's super easy to use super easy to play around with and add stuff on but when you first get Started, it's a little confusing and I'll explain why in a second But we are gonna we're gonna learn Hugo that that's what we're gonna do. I'm not gonna waste too much time I'm gonna assume you're a smart boy. You know how to install a program I'm not gonna spend five minutes telling you how to install it. You know how to do it I expect that that is so install Hugo and the tricky thing The tricky thing with Hugo, okay Is that it's hard to get started because it's like a chicken-and-egg problem in order to get a site You know up and running you need a theme in Hugo otherwise it nothing shows up You need templates you need a couple of these things and in order to set those up You kind of already have to know about Hugo so it's like you can't really learn about it until you set things up You can't set things up before you know about it. Anyway, so what I've done here is I have made basically a bare Minimum theme there are a couple other things in here But the objective of this video is we're gonna use the theme that I've created and I'm going to make you understand How to create your own thing in mind you this isn't a theme in terms of like color or anything like that It's basically just templates for generating a website And this is gonna be a diving board for doing whatever you want and I'm gonna show you this is gonna be partially a showcase Partially me showing you how Hugo works on the back end Because once once you get going with it I mean creating a site is just creating markdown files. It's super easy like there's it's not even worth a video So go to github.com slash Luke Smith X Y Z slash Lugo L U G O Luke and Hugo at the same time And that is the little theme the little template set that we're gonna be using I have actually directions here for setting it up if you don't know anything about Hugo I'm gonna assume you already have Hugo installed but because I've talked long enough. You already have it on your computer So to create a site as I say here all you have to do is say Hugo new site Wow very intuitive and Just give it to give it any directory name. It doesn't matter. Let's say. I don't know a site New or I don't know. I guess I say on the website new site, right? So that's gonna output some text. We don't need to read that because we're watching the video So that's unimportant But I'm gonna go into that new site and you can go ahead and type LS to see what it generates and By the end of this video, you're gonna have a good idea about Maybe more than half of what all these things are Config you can probably already guess that is configuration file for your site. Okay, so you can go in there You can go ahead and edit it. Let's say. I want to change the title to Based Hugo site doesn't matter what it is, right? You can set system settings there like site-wide settings there and Themes this is where we're gonna want to put this theme so we can download it and actually like get a website going so You can just copy this clone command if you so desire, but you can just clone this repository into Themes lugo. Okay, this is gonna take one second and you'll see in that themes directory We now have the lugo theme installed in order to activate that We actually have to go back to that config file and say theme Lugo, okay, so that is actually gonna turn it on for our site You could just run this echo command to echo it there But whatever your pick and last but not least we are going to want to go ahead and copy the example CSS file From the theme to the website now the website is already going to be using all the files in the theme But you're gonna want to customize that stuff including the CSS. So you might as well copy it To this directory Okay, and that actually we copied it. So let's actually look at our directories again We haven't even started playing with the site, but you should already know what some things are config is a config file Themes is where you put themes and we basically don't need to touch it anymore. It's done with static is Static is where you put all the files that are not like Web pages. Okay, so the two directories you're gonna be using for making websites the most are probably Content and static now content is basically where you put markdown files We're gonna create those in just a second But what Hugo is gonna do is it's gonna take those markdown files which represent every page on your website You're gonna have one page for all the pages you want and Hugo is going to generate HTML from that and it's gonna create a new web directory From that right and it's also going to take the additional stuff So content is just for markdown files and other things. You're at hypothetically if you have other things Hugo is acting on But all static files obviously are going in the static directory So that includes the CSS file that we've just moved over if you want to add images in there You're gonna put images in there, right? Or you know documents you want people to download or big anything else anything else, right? So we know what content is we know what static is we know what themes are we know what con config is Now public is an empty directory and how this works is if you just run Hugo in your site You're gonna get the basically Hugo just if you run the Hugo command with no options in a direct a website It is going to generate that site and it's gonna put it into the public directory Okay, so you can actually go in we can actually open up, you know see our index file here our index HTML Actually, we can open this right now. It's not oh, I shouldn't say I should say it's not gonna It's gonna be as if you're exporting it to a website. So it's not gonna appear How it should but thankfully Hugo has this nice little command, right this very nice feature I'm gonna open up another terminal if you run Hugo serve or server. It's actually not picky about the spelling Hugo has a real-time generating Example of your website. So here's what it looks like. You see it's entitled based Hugo site because we changed it in config, right But this Hugo server command what it does is as you change the the if you add stuff to static or Configure you add pages or you change other variables It will change this as well. So I can say my home page My home page or maybe you know my website This is really a website title and that will actually edit the site So that's what this Hugo server command does and when you're what as you're configuring a site You're basically always gonna have this running in the background. It's very lightweight It's just checks to see if there's a file updated and it updates everything So this is what our website is gonna look like now But what just again what just to be clear when you're done editing it and you want to put it on a server You know you just run Hugo and that goes to the public directory and then you upload that public directory to your server Or you know do whatever you want Okay, so that's super basics So I'm gonna run the Hugo server command and I will say I usually run it. I have an alias Actually, I want to say HSS, right? I usually run Hugo with this extra option the Hugo server command with this extra option called no HTT P cache and that's just because when you're updating files very quickly By default Hugo will like keep a cache of it So if you update a file it might not actually update your preview stuff like that So anyway, I'm just gonna run it with that now. I'm gonna put that on another Workspace and we're just gonna start editing this website and do some do some stuff with it Okay, so as we said before there is the Hugo new site command which creates a new website But you can also just create a new file. Okay, so we can say new let's say about MD Okay, so what that does is it creates a file in content called about MD And we can open that up about MD and so this is basically this is a markdown file This is how all the the pages on your website the the content pages are going to be generated, right? So here is some Content and of course this is markdown. This is all in markdown Which is much easier to modify than HTML, of course So you can have a list item. You can have more lists. You can have a you know dictionary with you know dictionary definitions You can have numbered lists blah blah blah blah blah blah, right? So once you have your file and you save it you'll also want to get rid of this Dr, you can either replace draft true with draft false or you can just get rid of the line And you'll see that it will pop up You will see your page has popped up on our web page and we can click on that and we can see look at that We have all the website content that you know we want So I will note I've just go ahead and you've probably noticed on these pages already I do have some extra stuff here I have a little link to the RSS feed which is mind you automatically generated by Hugo and I'll show you the file that does that Later on but it automatically generates an RSS feed for everything on your website and Additionally it in the footer it puts like a the URL of your website now Of course it's appearing as local host But if you actually put it on a website if you compiled it it'll have your website URL But of course even aside from that you can I'm gonna show you how to change the footer and all that kind of stuff This is just I'm just telling you to notice things But the important thing is we can create any content we want in markdown files And of course you can also do things like tags So let's say we want to tag this with it's an update so I'm gonna tag it with updates So we're gonna say I don't know personal. I don't know whatever you can tag it with many different things and notice also when we tag articles in Hugo Well using the theme that I am I've provided to you and again, I'll show you how it does this in a second It actually generate it gives you a list of all the tags at the bottom And if you click on them, you will see actually sometimes it takes some time. I say let me refresh this It has some trouble when you first create tag files. I don't know why but if you click on one of these it is going to create this tags Basically a file for the tag itself now. Let me explain just so we let's make some more Let's make some more pages just so we can see exactly what that's doing. So let's make a new page called Autobiography Dot MD and so I am going to edit that in the it's in the content directory, right? So we're gonna say it's not a draft and we're gonna say this is my auto Bio and I'm also gonna tie tag this with Personal okay personal It goes without saying that you can see that the tags are tat, you know, they got to Quotation marks and they're in a What's a set? What would you call that and depends on the language? I guess So either way we can see now that the if we click on personal This is really a tag page that is listing out every article that is tagged with that. Okay, and this is something that Hugo does Automatically, this is one of the nice little things about Hugo So that's what it does automatically and you'll also see this other thing So I said my Hugo theme will automatically put this stuff down here and of course you can style it to make pretty Make it look pretty yourself, but additionally it will create next and previous Article links so if you have a blog that's you know putting out more articles as days go on you can have Links that go directly to the previous ones Okay, so one more thing. I want to show you Before we do some really fancy stuff. You'll also see so we know let's let's look at these directories again So we know the config file. We know where themes go there We know static is for like CSS like basically all the files that aren't marked down and the markdown files go in content Let's talk about archetype on public is where you export the site to Archtypes let's open that up And if you look in there, you'll see a file that looks like this now this default MD This is the if you use Hugo new this is the template for what it creates So let's say hypothetically. I don't want it to create new Articles and make them drafts. I can just get rid of this line, right? That's no problem And notice also, this is actually the first time you're looking at like Hugo's difference, you know special functions Here in title it has a function that is basically taking the name of the file And replacing the hyphens in the file name with spaces and then running it through this title command Which actually just smartly guesses what should be capitalized or not? That's all that does so whenever we run. Let's run that again now note. I changed that I got rid of the draft thing And I'm actually gonna go to the main page here. Let's go to the home page So now I've changed that and let's make a new page you go new new blog post Dot MD. Okay, so let's look once again at the page that has now been created in content And you'll see firstly again Hugo smartly guessed the title name based on the file name if it didn't guess right you can change it But you know it puts spaces in there and it capitalizes stuff And in this case it didn't have drafts. So it actually automatically appeared in here once it was created and we can say Here is my new blog post Okay So and that's basically how it works. Okay, that's how you create markdown files So most of managing a hugo site. Okay, I will say and in in content I'm putting everything in in the directory itself But you can also make sub directories if you want that that's totally fine if you feel like You want some special blog posts and let's say we'll have content and then we'll have you know blog Um, you can move let's say the new blog post to content blog, right So you can move that in there and that's still that still works And you see your page here actually generates this special post for the blogs directory, right? It all depends on how you want to like manage things how you want things to display And it all kind of depends on your personal preferences But you can have subfolders to content and you can have separate rules Actually, let me show you what I do on my personal website right now. I don't know if I'll keep it like this But this is just to give you an example Um, so I have if you go to luke smith.xyz slash articles This is where I have like long form like essays and kind of okay. Well, I guess my internet isn't working Let me go ahead and Updates, okay So in the article pages, this is where I keep it's basically a sub directory and content And this is where I keep long form essays and that's in contra position to the updates folder Where I keep kind of oh, here's what I'm doing this week. Oh, I'm going to do a live stream I'm going to be doing this, you know stuff like that. I feel like they're separate So I keep them in separate folders. Of course, they're also tagged differently as well Um, you know, I also put you know, I tagged all of these with updates tag everything here You know, they'll have different tags or whatever, but um, those are the kind of things you can do with hugo So now that we understand You know managing a hugo site is mostly just You know creating creating markdown files and of course linking things as well. I should be clear I'm assuming that you know how markdown works, but um, just to be clear about how links work Um, if I want to link so this page is called about Suppose I want to link to it from this new blog post if I want to link there You know see my about page You just use a normal markdown link, uh, where this is going to be the text and the stuff in the parentheses is what it links to You are going to want to say Slash about it's slash because it's just in the bear content directory if it were in like content articles It would be slash articles Um, and notice you don't include dot md. You just include about Right, so now let's go in here and I move some stuff around here So I'll go here and you can say click on the about page and bam it goes to the about page Okay. Um, so yeah this when when you want to Link things, um, yeah, just be sure just remember that like to put the slash at the beginning That's just the good form if they're in the root directory. Uh, let's actually include an image Why not? So I'm gonna take a picture. I'm gonna take a picture of the screen right now So I've taken a picture with my screen, uh command where where what directory are am I even in here? So oh, okay. Yeah, so new site Um, and then as I said we can put pictures in static, so I'm gonna move this picture here I'm gonna call it pick dot png Okay, so now in this new blog or let's we have about pulled up over here So I'll put it here. So if we want to include an image So I can say I can just use normal markdown syntax for that. So this is like the alt text So my image and then we can say pick dot png That's what I named it. I'm pretty sure and then look at that. There's my picture that I just took That's how it appears and just notice again. Remember it's in the the file is in the static directory It's in the static directory in hugo But when hugo compiles everything It takes the static stuff and it takes the the content stuff and it puts it all in the root directory So just to be clear you if you want to refer to something in static you don't say Static pick, okay, that'll be an error. That's like I don't see that you say pick All right, that that's just a clarification Okay, I'm going to interject a little something from the future that I forgot to mention I don't know. It's a little obvious, but I forgot to to say it. Um You can add content to your index file or any like the index of any subdirectory you make By creating a file in the content directory that is underscore index dot md. Okay, so I can add I am adding Stuff to my home page right now Okay, so I can save that actually I should probably not be stupid and actually put a title here Title uh my home page Okay So this is this is where basically you put the individual content for any kind of list file So I kind of ignored the whole thing about I talked about lists and singles But I forgot to mention that yeah to like change any of these index files to change your main page You just edit underscore index or if you make some subdirectory where you have like articles or whatever In there if you go to articles I say I don't know if Hugo's going to generate a File for that already. Yeah, I don't know if it does Unless you yeah, maybe it doesn't but hypothetically speaking if you have an article subdirectory that has like other Files in there as well that it would list out you could also include an underscore index file to add specific content So that is how I mean in my website, right? So Um This is what I have in my articles page. So like all this stuff here. This is like additionally added in the content It's not naturally part of the list Um, and I could add in other things if I wanted like other yeah, whatever. That's all I had to say That that's just a clarification Okay, so now we got that that's all the the basic stuff Let's talk about how Hugo actually does this magic like how does it generate all this stuff? How does it create all these tag pages and how do I get these like next in previous things and like all you know All this kind of stuff Let's talk about how that's done. Um, and then you can work on styling it and making it fancy and stuff like that so Let's uh, so here again. Here's our our Hugo directory I am actually going to go into the theme that we created Uh, and you'll see our theme directory. We have archetypes layouts and static Which are also are present in our main repository Um, and just to be clear just in case I I didn't say this earlier in the video When you have a theme your website is going to look for the theme for the default files But if your website for example, you know these files that we're going to look at just now Oh layouts, you know default list Okay, if you create one of these in your own websites directory in the same place It will overwrite this file. But if there's no file like that, it just looks at whatever the theme is doing Okay, so one important thing to understand about Hugo is that there are two Now notice where I am. I'm in the um, the theme here and I went to layouts This is the new directory we're going to learn about and in layouts the probably most fundamental one is the underscore default now, um in Hugo You see there's a uh list file and there's a single file And that's because there are two different types of pages in Hugo. There are singles and there are lists So an example of a single is, you know, my about page all the pages that I just made the about page A little blog post all of those all that stuff that just goes most of it just goes into content Those are single pages. Okay, so it just has some stuff and it has some content blah blah blah Right that is against, you know, you know as opposed to that we can look at for example this tag page At tags updates, which is automatically generated by Hugo. This is a list page Now we can actually include other content in here as well Uh, but by default it is just a list of all of the stuff that's at that location or not really at that location In this case, it's like, you know, whatever is marked with this tag Or if we go to our home page our home page technically is a list So our home page by default is a list and so are the tags And whereas all the other posts they are singles So that's what these two files are they are basically the um, let's let's look at yeah Well, we'll move this to the other other workspace. These are basically the um templates For what lists and singles look like now if we look at the single one, it's very simple Basically, we just say we we see some hugo commands here and we'll explain all of these Um partial what partial is doing is calling a file that I have created in another directory It's a partial in the partial directory called header And the reason I do that and I do that in the single and in the list template Is because really I want the header in both of those files to be exactly the same I don't want to have to rewrite it twice or if I make a if I want to make a change to the header I don't want to have to modify these two files So instead I call this header file and we'll look at that in just a second same thing with footer And notice also that there's this content command And you know for any I'll go ahead and pull this up on a on a let's see hugo variables So hugo when you're looping through when you're acting on a page or something else you will have um Like different variables that you have for each of those things So for example pages they have all this kind of stuff So dot content what that is going to do is it's going to take all the stuff that you put in markdown And it's going to print all of that in there or dot title is going to print the title That's what these are. This is very simple very intuitive. Okay So that's all this is doing It's just calling a header and footer and it's put you know has some html in here Most of it is in the header or footer Um, but it's calling this content now more complicated is the list template. Let's look at what this is doing Okay, there's some other stuff going on here and just just let's actually bring back Let's bring back this so we know what's going on here. Um, now what this is doing We're calling the header. We're calling the footer, which again, we'll look at in a second and we're calling content Um, but importantly we have this list here. We have this thing in hugo, uh called a range It's kind of like a for loop where in this case we are looping through all of the pages That we've created and for each of those pages we are outputting this text here And if you look very carefully, let me get rid of Transparency here if you look here you will see that. Oh, well, you know, we set a date We put that you know date format command we put in the title We put in a link basically what this generates is it generates this stuff here So for every article here For every post we have a list entry right and if we change this template it will change that let's let's do that Okay, let's do some cool stuff So let's say we I I think it's kind of garish having these uh dates Let's say we get rid of them So i'm just going to get rid of all the stuff that like looks to get the date You know all proper html and also the dash that comes after it So if I save that you'll see that oh, we still have our posts and they're still even ordered by the the date you you can actually Do the for loop in different ways. I think by default it's by the date Um, but now we just have you know a link to the article nothing else. So that's cool Maybe you like that. Maybe that's nice or clean nice and cleaner But there are other things you can do as well I mean one example one really cool example that I think is useful is uh summary, okay suppose On your main page what you want is not just like a link to an article, but maybe the first segment of that Well, that is what the summary uh variable does. So what we can do here Is we can go in here in our list item. I'm just gonna This is going to be ugly looking But it's going to be magical nonetheless because you're going to see what you can do in in hugo You can just give this summary variable Save that And you'll see what happens is it's actually printed the stuff from these articles What it's done now in in this case we have very short articles So it basically prints the whole thing But if we had a longer article it truncates that for first portion of it and it prints that there So what you can do is, you know, if you want to have let's say on your main page for your blog You just want your most recent, you know 10 blog posts with the summary You can do that and then you can have a little click more you could go in here right now And say like click more or click for more or something like that. So, you know, that's the kind of thing that you can do um All right, so that Let's see, uh, I want to see if there's is there's something else I wanted to say in here Um, the only other thing in this directory is the rss So rss is this is literally just the template For the rss feed we have for the site and it actually uses this range thing as well It loops through all of the pages you see And for each one it creates, you know an entry for that taking the title and the permalink all of these variables That each entry is going to have right so that is that's your first look at how you can script things in hugo But I want to show you a little bit more um Let me move this to another workspace here So we've looked at the fault and this is what you know all your all your I don't know, um I've already explained it right so you there are singles there are lists Those are the templates for them now. Suppose you don't like Um the main page and this is actually what I do on my websites I don't really want I don't like lists like this on my main page. I kind of want to customize my main page So one thing you can do is you can go into single here And I'm going to copy it to the main layouts file and I'm going to rename it index.html And what that is going to do is that is just it's just going to use Basically, I mean we've taken the single thing. Oh, well, okay. Maybe I should explain that If you have in the layouts directory an index.html file that is going to take precedence Instead of using the list Format for your index. It's going to use whatever you put here So if you don't like your index to be a list you can put a file here and customize it You could link it to the the single list or whatever And that's going to change your main page Although it doesn't change It doesn't change your tags. So your tags still have a list of everything I forgot to undelete the Date here. Oh, well, doesn't matter Either way, so that that's how that works Let me talk about some of the other stuff Let me I'm actually gonna get rid of this because I think it's more helpful to not have this and to have these entries for the Tutorial So let's talk about the other things the other little flourishes I have now as I said We have two little things at the bottom here in addition to our little footer down here that has a website name and whatever You have a list of all the tags And you also have these little things that say previous and next Right, so you can go to the previous blog entry in time or the next blog entry in time So how are those done now? Those are actually in the partial section And I alluded to the partial thing before because we call this header and footer file Let's go ahead and look at the header and footer files So in the header, this is the stuff remember that both the list template and the single template call And it has basically your sensible defaults, you know the kind of stuff that basically every html page Is going to have with the added benefit of you being able to script some things in it So for example, if a page has tags, you can say, okay, check to see if tags are set If there are tags set add this line in that uses the tags And eliminates them by commas But if you don't you know if this doesn't apply if you don't have tags this line just won't exist Okay, same thing for the favicon you can set a favicon variable in the config file But if you don't it's not going to include this line So this is what a partial looks like and you can also have scriptability here So this thing here the the title so if you notice the titles Let's go let's go here So in the about page you'll see that the title is about and then a bar and then the website name Okay, but if you go to the main website You will see that it's just my website just the website name Um, so that is because well it sets the title equal to the site website But if the the title is also not home It adds in the specific page Name with the bar in between and stuff like that. Uh, you you can look at and figure it out if it's not obvious How this is working but uh and see we can also have other variables like the site language and stuff like that All right, so that's our header now our footer contains other basic stuff at the bottom But importantly you can also call on other partial things and that is what the two things I mentioned a second ago These uh, you know next and previous and the list of tags are So if you look at the next and previous next prev file This is a good example of the kind of stuff that you can add to a hugo site So in this case, um, and again, I'm not telling you how to script all this. We're not doing this yet I'm just like kind of peeking your interest showing you like how you can do things But in hugo, there are some functions some page functions called if you look over here Um, well, we'll just search for it Called next and previous Which will sort by which will give you the next page Uh as if they were ordered. So for example Uh, what this thing does is says, okay, if we have a next or previous page We're going to create this div and inside of it You're going to have a link to the previous article and or a link to the next article Right, that's all this does now if you're on a page that doesn't have either one of these Like on the main page it doesn't print out anything. That's what the if statements are for Um, but uh in all these other pages you do have like the previous and the next uh link And of course on this one it doesn't have a previous because it's most early It only has a next and on this one it's the most recent so it doesn't have a next, you know So that that is all that does and that is just you know, this little file Just this little file. That's all it is. Um, and of course you can style it to your own specifications You know, I've already given the them IDs that you can style, right? Um, and at the same time you have this thing called tag list And that is the thing at the bottom that lists The tags here. Let's actually give it some more to let's give one of these more tags Just for diversity's sake. Um, so we'll go to content Um, autobiography. Okay, so we'll name that personal lol I don't know Random Okay, so we've tagged at some random stuff And all of these tags appear here because of what this script does it says, okay, if there are any tags set here Um, it is going to loop through them with range And it is going to print out for each one of them It's going to print that stuff out and also you'll note that it adds it adds a dot between all of them That's what all this other stuff is for it tech checks to see if like, you know, they're uh, it's if it's at the end If it's at the last one or whatever So it's a little more complicated just because you include that but Either way, like this is the kind of stuff that you can do pretty easily So the in let's think about what the end result of this is. Um, you have a static site Which is going to load basically instantaneously on a client site or your own site Um, and you can have a lot of features you can have uh next or previous articles related tags You can have suggested articles. You can have random articles. You can have all this kind of stuff generated Um, and it's it's just simple. It's just simple, you know, there's so much less headache in it, right? But as a review, okay So you can go you can go here at this point you should kind of understand what's going on Uh in this layouts, uh directory. So we know what the partials are That's like the header or the footer the the other things we just talked about, right? So those are things Um, really, so there are also two directories here. There's partials and short codes And we'll talk about short codes in another video But I will just say they're very similar to partials. It's just really you call partials and templates And short codes which work similarly you call them in files Uh, actually, I'll I'll show you how one works. I'll show you how one why not we're doing a video already. I mean So, uh, let's see. So I have one here called image Okay, we can look at how this looks Um, so one thing you'll be doing in websites a lot is Putting in images and sometimes, you know, you want an image to have a caption But to do that in html, you got to put it in a figure and then add a fig caption Sometimes you want the the image to be linked or have, you know, all this other stuff It's kind of hard to put that in so with this what this short code does is it basically automatically does a bunch of stuff for you Okay, so let's actually take I'm going to take, um Let's go back to what was that page we put a uh Image in already. I guess it was this one. Okay, so we can use markdown To include a normal markdown image image, but we can do this in a different way. We can say um Basically this we can say img and then we're going to say source this particular thing it takes a A couple of different. I want to say so I didn't list source here But source is the image it takes which is going to be in uh, where was it? pick png Okay, so I'll just go ahead and Close that off. That's how you make a short code look Uh, let's go to the about page. All right, so you see that here But we can also add in stuff like captions and stuff so we can say caption This is a caption Right because this short code can process arguments like this So now it has a caption at the bottom and of course you can style this in css to be in the center or something Which is a pretty sensible thing to do and we can also you know put a link on it So let's say I want the link to be to my own website Okay So we can do that. I'm pretty sure link is the right thing. Yeah So if I click on this it is going to pull up my wow look at that Um and other things as well. I think even this short code has um, you can set a title thing Which is really that's I think you give it to it as mouse. So this is um What appears if you? Mouse over the image So if I mouse over it you will see oh look, this is what appears when you mouse over the image, right? So short codes are a way of kind of economizing like instead of having to write out Um Where is it? I thought I had it pulled up just a second ago. Yeah over here instead of having to write out figure blah blah blah Deal with all these variables. Uh, you can kind of make a template and plug in arguments that you receive In this like I do this for a lot of other stuff like on my website Um library So I have a page where I list out all the books I own and um, like these entries are actually created Using a kind of short code that also like automatically links the certain things like if I have a podcast episode on it Um, and they actually on the back end. They actually store other information like the um, I don't know if you can see it here Okay. Yeah, you can't see the library of congress stuff. Anyway, I'm going on now Um, you should have an idea how Hugo works. That's the important thing or at least how to modify it Remember, there are just two types of of pages. There's singles and there are lists. You can modify them in the layouts Um over here. You can easily You can add in you can uh, Basically abbreviate your code writing by making partials and short codes and all that kind of stuff And then when you're all done, you can of course compile Just by running Hugo and that is going to compile to the public directory and you can upload that to your website or whatever So, um, honestly, that's about it for this video in the next one. I want to actually take you through tangible examples I showed you how some of these things work like how oh, how you know, how do you get um, How do you get a nav bar working? How do you like script in some other stuff? You know, I've shown you that I have some partials that do stuff like this But I think in the next video. I'll give you a tangible example of Us making one together. Okay, uh, and then we'll talk about other stuff about Hugo. So hopefully this has given you Yeah, I don't know something Just get into it. It's awesome. It'll save you some time It's uh, very easy once you get set up and you should be able to set yourself up at this point All right, see you guys next time