Create Beautiful Websites With Hugo

In the early days of the World Wide Web, it was very easy to create websites. It wasn't very complicated. The web was a much more minimal kind of place. But as the modern web became bloated, websites became more and more bloated. They became more and more complicated to set up. But one of the things that you can use to create a website, a really beautiful website in many cases, is Hugo. Hugo is a static website generator, and it's very simple to use. All you need to do is you write your entire website in Markdown, or I'm going to use Emacs org mode because Hugo does support org documents as well as Markdown. So you just throw up your org documents into a content folder on a Hugo server, and it magically creates the website for you. You need to go grab a Hugo theme, and that's what I'm going to do right now. Let's go ahead, let me jump into the desktop here, and I'm going to search for Hugo theme. And here we go, Hugo themes. And I'm going to search for, well, heck, let's search for some of the popular ones. And I'll grab just something here. I really like the look of this one, Universal. And yeah, let's download it. Actually, it just takes me to the GitHub, which is fine. I'm going to end up doing a git clone. I'm sure there's some directions here on, yeah, how to grab the site. Yeah, we just, yeah, create a directory, and then we git clone this directory. Yeah, so let's go ahead and set this up and check it out. So if you're new to Hugo, obviously, you need to make sure it's installed on your system. So let me zoom in here. On an Arch-based system, you would do a sudo pacman-S hugo to install the Hugo server. Obviously, if you're on Debian or Ubuntu, you're going to apt install Hugo on Fedora, dnf install Hugo. You get the picture. Hugo should be in everyone's repos. And once you have Hugo installed, what you need to do is you need to go ahead and create the new website. So you do this with Hugo, new site, and then the name of the site. I'm going to call this new site. I'm just going to call it website. And what it does, if I do an ls here in my home directory, it just created a directory for us right here, website. And now what I need to do is I need to cd into this website directory, and now I need to git clone this directory here. So let me copy the link to that GitHub where the theme is. We need to do a git clone, and then I'm going to paste that URL. But I need to paste this in a certain directory. So there is a themes directory within the website directory. When we created the Hugo, new site, and then website, it created this directory. And one of the folders in it that gets created is themes. And we need to git clone the Hugo universal theme to themes slash Hugo dash universal dash theme. And let's run that. And if I ls here, you can see we have themes here. If I ls the themes directory, we have Hugo universal theme now there. And if I ls one more time, let's ls themes slash Hugo universal dash theme. In this particular directory, you have the example site. What is example site? Well, that's all the data that will populate an example website for us to test out, because obviously when you first create a website, you're not going to have any kind of content that you've already written for it most of the time. So it has all of this data built into it, all these example pages, so we can test out the site. But by default here in the top level directory, our website directory, we don't have any content yet. We have this content directory, but if I ls that directory, it is completely empty. So let's copy over the example site content into this directory. So I'm going to use this command here. I'm going to cp the copy command dash r, a recursive copy, themes slash Hugo dash universal dash theme slash example site content and then slash asterisk, so all the content in that directory over into the main content directory here in the top level directory. I hope that makes sense. But we're copying over the content from the example site so we can test it out. And if I up arrow, the next thing I want to do is I want to do the same thing, but I need to do, there is a data directory in there. We need all of the data to be copied over into the main data directory in the top level directory here. So let's go ahead and run that as well. And then one more time, I'm going to up arrow. We're going to do the same thing one more time with static and then asterisk, and then we're going to copy that into the main static directory in the top level directory. And then finally, there is a Hugo.toml file. It's your config file, and I want the one from the example site. So I'm going to copy that over and then space and then period to copy it over into the top level directory. We're currently in the website directory. And at this point, I'm not sure if we could start the Hugo server or not. To start the Hugo server, you simply run hugoserver-d, and you need to run this from inside the directory that is hosting the Hugo site data. So if I run that, yeah, I get an error. It says module Hugo universal theme not found. So by default, it looks like it's trying to load the Hugo universal theme as a module, and that's not really how we loaded it. We just did a simple git clone. So what we need to do here is we need to edit our Hugo-toml. So if I do an ls again here in the top level directory, there is the Hugo.toml. So let's go ahead and edit this file. And the first thing we need is the base URL. By default, it's actually using the GitHub or the theme. But, of course, this will be we're testing this out on localhost. And by default, the port number that Hugo uses is 1313. So localhost colon 1313. And then the next thing I need to do, the themes directory you can see is dot dot slash dot dot. That is not corrected at all. So let's just remove this. And that should, I believe, fix our problem. So let me right unquip. Going to up arrow back to running the Hugo server command. And there we go. It runs. You can see it just loaded a whole bunch of pages, 105 static pages. That's the example site data. Now, if I go back to my browser and let me open up a new tab and go to localhost colon 1313, there we go. That is our Hugo site with the Hugo universal theme here. Really pretty website, actually. I mean, this is really nice. And how easy was that to set up, right? We got the Hugo server up and running, right? That's not complicated, right? That's not complicated like setting up an Apache server or NGINX server for a web server, right? This is pretty cool. And obviously there's a lot of themes. There were hundreds of themes on that Hugo theme site. I didn't spend much time looking at them, but many of them are quite attractive here. If I go to blog, yeah, I like the theme, right? And, of course, this is customizable. As a matter of fact, we could customize some of this just to play around a little bit. So if I wanted to change the logo, because obviously I'm not going to use the universal logo, maybe I just want this to have the DT logo on that. Well, first I need the path to this. So I'm going to right-click, open image and new tab. And that is hosted at localhost slash img for image slash logo dot png. Now that I know where that file is, I can go edit that file. I'm going to need a new terminal now, so I'm actually going to go down to a new workspace here. Let me full screen on that. CD back into the website here. Do an LS. And if I do an LS on assets, I'm just guessing where some of this content may be. That wasn't the correct folder. Maybe it is. Well, it creates a static site, so let's LS the static folder. Yeah, and there is an image folder in there, so I'll up arrow and LS static slash img. And there is logo dot png. So that is this file here. And if I wanted to change that, I know the location to a DT, like an avatar I use on YouTube and other places. So I'm going to copy. And the file is located on my next cloud assets. Social, I believe. This file here, I'll copy that over into what was it? Static slash img logo dot png. We're just going to overwrite that file. If I go back up here, it's a hot reload, right? It changed that immediately. If you're looking at the server running in this terminal, you can see we get some information letting us know a file changed. But that is really cool that it instantly changed that for us. And one thing I would have to change, I don't like the coloring. You know, the light blue is kind of cool. But obviously, it's going to clash with the purple DT logo. Can I make the light blue purple? Well, I'm actually not sure. Let's go into the Hugo dot toml and see what we can do here. If I scroll down, let me just search for colors. I bet there is a way to change the color here. A search result for colors didn't come up. But here we go. We got style options. Style equals default. That is light blue. But you can see we have other options. We have blue, green, marsala, pink, red, turquoise, and violet. Violet is probably a purplish kind of shade. So let's change that and go back into the browser here. And yeah, it did another hot reload, right? That is very cool. Really easy to edit some of these prebuilt Hugo themes. You don't have to really know any kind of coding or anything. You really don't need to know anything about HTML. You might need to know a little CSS in case you want to edit the style sheets. But most of the time, a lot of this stuff has really easy customization options that even if you're not somebody that's ever really dabbled in web dev, this is pretty easy to work with. Now let's talk about the content. If I go to blog here, and this is the example blog post and the example site that we copied over, right? This is all written in Markdown by default. Let me get rid of that tab here. If I go back into the terminal here, and let's quit out of that. ILS content, we have contact.md for Markdown, faq.md for Markdown. So if I go into contact, this is the contact.md. FAQ is the faq.md. And the blog posts are also going to be like post.md. So if I ls content slash blog, yeah, those are all of those. And you see they're Markdown files. But I could put a org document. I'd have to format it a little differently, obviously, Markdown and org or use a little bit different syntax. But I could certainly write my entire site in org mode. So let me copy over a org document. So I know I have some org documents in this particular repo on my side here. So I'm going to copy over this particular file, installation.org. This is a file I wrote for how to install DTOS, my distribution ISO that I created a couple of years back. Don't go and grab that ISO. I haven't updated it in a long time. But this is an org document I wrote for that, and I'm going to copy it over into content slash blog. And let me hit enter on that. And if I go back to the website, look, the blog category we were already on it instantly got updated. It doesn't have a picture associated with the blog post, but if I click on it, yeah, it reads the org document just fine, formats it, has tags and everything. Very cool. Let's get the image here, the banner here. What I could do is I could vim content slash blog and then installation.org. Of course, I'm opening this in vim just because I happen to already be in the terminal. Obviously, I can do this in Emacs. But anyway, you see what this file is. It was actually already formatted for Hugo. But I've got all of these headings here at the top. These are basically settings that you can assign to org files, title, description, author, date. And this is standard in org documents anyway. But Hugo uses it to, you know, like add the date to the blog post or add a description to the blog post. So this is kind of cool. The only thing that's normally not here in a standard org document, tags. Of course, tags is something special that we use here. We're getting the tags here. Also, we need an image. And I believe the image is actually going to be, I think it's banner colon and then the path to some image. Now, I don't have an image readily available. Maybe I'll just grab one of these. Let me right click and go to open image in new tab. Where is that located? Right here. Slash image. Yeah, I don't need the top level. As far as the domain, I think I can just give it a relative path here. Let's see if that works. I save that and go back and then go back to the blog. Yep, it did a hot reload. And there is our banner image associated with my installation guide.org file. So, and that's the way I'm going to operate if I were to, this is just a test website. This is actually not going to be a website. I'm just doing this for purposes of a video today. But how cool is that you can set up a really easy, really attractive website using Hugo, and you can write the whole thing using Emacs org mode. I love it. Matter of fact, I'm not much into creating websites these days, but certainly if I needed to throw up a quick website, especially a small website, which is perfect for static Hugo websites. If you're creating a website that's only like five to 10 pages, why not use Hugo? Don't use something bloated like WordPress. That's just, that's more than you need. Now, before I go, I need to thank a few special people. I need to thank the producers of this episode. Matt, Steve, George, Darloff, Lee, Mark, Methos, Arjan, Peace Arch and Fedora, Roland, War Gento and Ubuntu and Willie. These guys, they're my highest tiered patrons over on Patreon. Without these guys, this quick look at Hugo and theming with Hugo, it wouldn't have been possible. The show is also brought to you by each and every one of these fine ladies and gentlemen. All these names you're seeing on the screen right now, these are all my supporters over on Patreon because I don't have any corporate sponsors. I'm sponsored by you guys, the community. If you like my work and want to see more videos about Linux, free and open source software, including Hugo, subscribe to DistroTube over on Patreon. Peace, guys.