This course covers the basics of using Hugo - Static Site Generator. Work your way through the articles and we'll teach you everything you need to know to create a professional and scalable website or blog!

Hugo

Lesson 1
Author : Mike Dane
Last Updated : September, 2017

Imagine being able to build a super fast, lightweight and responsive website or blog without having to deal with a heavy and cumbersome content management system. Imagine getting all the convenience of a platform like wordpress or squarespace, while still having full control over every line of code on your site. Welcome to Static Site Generators, and welcome to Hugo.

Building a website is often tedious and confusing, and if you don’t use the right tools to help, the question isn’t if your website will fail, it’s when. The truth is, if you ask 10 developers how to build your website, you’ll probably get 10 different answers.

Here’s Hugo in a nutshell, it’s a free and open source framework that helps anyone build a static website. But unlike a lot of other static site generators, Hugo doesn’t try to shoehorn you into doing things a certain way, or into any weird naming conventions. It also doesn’t take a lifetime and a half to generate your pages, it’s built on the Go programming language so it’s super fast.

Static vs Dynamic Websites

So what exactly is a static website. Well, to talk about static sites we also have to talk about dynamic sites.

A dynamic website is the type of website that most people are used to. Take facebook for example. Facebook is a dynamic website, meaning every time you access it the entire site is built just for you. You can log on, scroll through for a bit, then refresh the page and everything will look different. In fact, every time you go to facebook, their web servers pull information from a database, generate HTML, and they give each user a custom made page.

Static sites are also very common, and a lot simpler than dynamic sites. With a static site, everything is pre-made. When you access a static website the web server doesn’t generate any HTML, it doesn’t pull any information from a database (usually), it simply grabs the page you want and gives it to you. Static web pages are pre-made, meaning all of the HTML, CSS and JavaScript is written before it’s uploaded to the web server.

A good analogy for static and dynamic websites is pizza. If you want to eat pizza you have two basic options, either order a freshly made pizza from a local pizza shop, or buy a frozen pizza from the grocery store. Both have their pros and cons, and both are popular options.

Dynamic site’s are a lot like freshly made pizza’s. When you order a pizza from a local shop, that pizza is custom made just for you. You can choose your crust style, sauce, cheese and toppings. The pizza is made to order, and they don’t start making it until you request it.

Static sites are like frozen grocery store pizza’s. When you buy a frozen pizza at the grocery store you’re getting a product that was put together beforehand. You can’t customize any of the ingredients or cheeses, what you see is what you get.

Why Hugo

Hugo is a static site generator meaning developers can use Hugo to build fast and scalable static websites. Static websites are notoriously difficult to maintain and scale. Because all of the code needs to be written before it’s uploaded to the web server, managing all of those pages and lines of code can be cumbersome. Hugo takes all the fuss out of building and managing a static website.

Hugo gives you all the flexibility of a dynamic website, with the speed and convenience of a static website. Hugo lets developers abstract web components, define layouts and templates, and even use logic across their site. For non developers, Hugo provides a rich library of themes built by the community which take all the work out of building the your site. You could build a fast, scalable and beautiful hugo website, without writing a single line of code.

Markdown is the preferred method for bloggers to write their web content. It replaces ugly HTML and makes writing for the web extremely easy. Hugo is built with markdown and bloggers in mind, with the help of a theme someone with zero web development experience could build a hugo site.

HTML is the language of the web, and often the preferred language for developers. If you’re a developer and you want to have full control over the DOM and what the browser is seeing, you can build all of your pages with custom HTML. Hugo gives you control over EVERY line of code, so you know exactly what is going on under the hood of your site.

Where can Hugo sites be hosted

Imagine building a website that could be hosted anywhere. Web hosting is often confusing and expensive. If you’re just starting out the last thing you want to do is shell out serious money every month just to have your website online. Websites built with Hugo can be hosted anywhere, and even hosted for free using Github Pages.

Hugo is FAST

Hugo is built using the Go Programming language. Go is a multi-threaded language, meaning it’s really good at multitasking. Multi-tasking is a great skill to have when generating static web pages, because the bigger your site gets, the more pages Hugo will have to splice together.

Not all programming languages are created equal. Several of Hugo’s competitors are built on ruby, a reliable and battle tested language, but a language that’s not optimized for building something like a static site with speed. Since Go is a programming language built with multithreading in mind, it is a much better and faster choice for the task at hand.

If static site generators are olympic sprinters, then Hugo is Usain Bolt, AKA the fastest.

Give Hugo a Try

If you’re looking for an easy way to get your static website up and running then give Hugo a try. It’s free, open source, and it plays nice with markdown and HTML. Here at Mike Dane, we have everything you need to get started with Hugo. Our lessons cover all of the main features of Hugo and give you tips to make your site the best it can be.