2.2 Picking a Theme for Your Website

Welcome back to the course in this lesson, we'll pick a theme for our Hugo website and we'll also start working on the configuration file. Let's go. One of the great things about the Hugo generator is that it has a lot of themes available for free. So if you go to the official website and then themes, you'll find the full list right here. And obviously if you don't find one that you like you can always make your own but starting with a premade theme and then slightly tweaking that is pretty much always the simplest option. So just go through all of these themes and see which one you like. You can also click on each theme and see a preview here and you also have an option to download it. For this demo we'll be using a theme called paper mod. It's a very nice minimal theme, and usually on pretty much every single theme you'll find instructions on how to install it. In this case, the theme is hosted on GitHub under Hugo dash paper mod and all you have to do for this one is to copy this code right here. We then need to go into the Hugo demo folder that we created and we just paste that code. Notice you also have to have Git installed on your system. So once we do that, this basically clones this repository into our themes slash paper mod folder and the result is that we now have a new folder inside our themes folder called paper mod. And this is a folder that contains all the files necessary for the theme to work. To activate the theme, we must edit our configuration file for that we can simply drag and drop this entire folder into Visual Studio code. But you can also use the terminal and you can say something like code dot and that's going to open the current folder in Visual Studio Code, just like this. Now if this doesn't work for you, you got make sure that Visual Studio code is installed in your applications folder. And here I'm talking about Mac OS and then you can do command shift p and then she'll command install code command in path. If that doesn't work, either, first, do an uninstall and then do an install and you should be good to go. So inside code, let's open up the config.yamo file, base URL, I recommend, for starters, you set this to blank, language you can leave it like so title. This is the title of your website. Let's call this demo for Hugo and to activate our theme, all we got to do is say theme Paper mod right. So we're just using the exact name of the theme that we downloaded, so let's go ahead and save that and finally, let's go back to the terminal and we'll do Hugo Server, this is a really cool thing. Hugo server opens up a local development server at local host 1313 that compiles files in real time, so any changes that you make will be watched by this Hugo server and the page that you open in your browser will automatically be refreshed. So if we go to local host 1313, here it is, our website, this new theme is already applied as you can see from this footer here. We have the site title, we have this toggle for light and dark, and we're pretty much good to go. So as a quick recap, you need to find a theme for Hugo, then you need to download that theme and place it, In your theme's folder. Then open up config.yamo and activate that theme by saying theme: and the name of your theme. Then you can open up a terminal and say Hugo server to open up a server for local development, that's gonna be opened at localhost:1313. And, as you'll see in future lessons whenever we make a change, to our website's content or styling, that's gonna be automatically compiled and our website here will be refreshed automatically. All right, so now we have a website we added a theme to it and we also started working on the configuration file. The next step for us is to add our content, we'll do that in the next lesson, so I'll see you there.