FREELessons: 5Length: 47 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 What Hugo Is and How to Install It

Welcome back to the course. In this lesson, we’ll talk more about Hugo, why you might want a static website, and how to install Hugo. Let’s go.

Related Links

2.1 What Hugo Is and How to Install It

Welcome back to the course in this lesson we'll talk more about Hugo, about why you would want a static website and at the very end, we'll be installing Hugo. Let's go. So as I was saying in the intro video to this course, Hugo is a static site generator. You can also think of it as a framework. Although the technical term is, as I said, a static site generator. Hugo is open source, and it sits right at the top with the most popular static site generators like for example, Jekyll. If you've ever used Jekyll then Hugo is basically the same thing but with slight differences. And actually from what I've tested so far, it's super, super easy to use. You can get Hugo at gohugo.io. And this is also the place where you'll find the documentation right here docs. You can also search them directly from the homepage, and the documentation is your best friend. Hugo's is very well made. It covers every single aspect of working with this generator. So, you'll have really no problems getting a website up and running. Now with that said, What are the benefits of using a static website and a static website generator versus a dynamic website like, for example one built with WordPress? Well, I would say there are two main benefits. One is the speed of the end product and the second is the ease of use. So talking about speed. A static website is just static HTML, CSS and JavaScript files. A dynamic website in comparison is a website that connects to a database, it has a back end, there's usually PHP code involved. So when you're creating one with WordPress you need to know a lot of things. You need to know how to work with WordPress first of all, but you might also be required to know a bit of PHP to make modifications. And these websites will usually query a database to retrieve the content. This can lead to big loading times for your website, which is not good. So in terms of performance, a static website is really good because all it has to do is load a couple of HTML, CSS and JavaScript files. The second benefit of using a static website is, the ease of use. So it's really easy to create one and it's really easy to maintain one. And for a lot of websites You might be surprised that you don't actually need WordPress. Like for example presentation website, why would you use WordPress? To have all those databases and stuff in the background when a simple static website would suffice. So again a static website, easy to create, easy to maintain, easy to deploy also. Now let's go back to Hugo and I'll show you how to install it on your system and this is really cool actually Hugo can be installed on both mac, Windows and Linux. All we need is a terminal and let me show you how. So if we look at the documentation under getting started and install Hugo, you can see here all the operating systems that support Hugo. And depending on your operating system, there are a few ways of installing it. So if you're using macOS you can install via Homebrew or MacPorts. These are package managers. If you're using Linux then you can install via Homebrew as well. If you're using Windows, you can Install via Chocolatey or Scoop. I'm using macOS, so I'm gonna install it using Homebrew. If you don't know what Homebrew is you can find it at brew.sh. It's basically a package manager for mac. So let me open terminal, and if you don't have Homebrew installed, you can follow the directions here. If you wanna check, if you have Homebrew installed, you can just do brew -version. In my case, or sorry, it's actually -v. In my case, it's Homebrew 3.2.9 so this is already installed. Now to install Hugo using Homebrew, all I got to do is copy this code, paste it in my terminal hit Enter and that's gonna download all the necessary files and install it for me. And there you go. And now that it's installed, we need to create a website. So I'm gonna CD or change directory into my desktop. And I'm gonna say Hugo new site. We'll give this site name, let's say, hugo-demo and I'm also gonna say- f yml. This last part is optional. Essentially, it allows us to use the YML format for the configuration file instead of the default terminal. I just think that YML is a bit easier to understand. So again Hugo new site, we give the name of the site and then we hit Enter. And just like that our, new website was created on my desktop. In your case, in whatever folder you have previously set. Now this gives us some next steps we can take like downloading a theme, adding some content and starting a live server. We'll do that in just a little bit. For now, here is the folder it created for us, hugo-demo. And as you can see it already populated this folder with a bunch of content. We have the configuration file which we'll edit in a future lesson. We have a folder for our content, for our layouts, static, this is where we'll put all of our static assets like images. And then this is a folder for themes, which will house all of our themes. All right so now that Hugo as installed and we created our first website it's time we pick a theme for it. We'll do that in the next lesson, so I'll see you there.

Back to the top