Hugo is quickly becoming one of the best ways to create a website. Hugo is a free and open source static website generator that allows you to build beautiful static websites with ease. Static websites are awesome because they take very little system resources to host. Compared to something like Wordpress that replies on databases, php, and more static sites are simply HTML, CSS, and the occasional line JavaScript. So static sites are perfect for simple blogs, documentation sites, portfolios, and more.

What is a Static Site?

Static websites are simply sites that consist of basic HTML and CSS files for each individual page. A static site can be easily created and published as server requirments are small and their is very limited server-side software requirements to publish them. You don’t need to know coding and database design to build a static website.

In the early days of the internet most everything was static, but sites were bland and poorly designed. Also if you wanted to make a site wide change such as a link in the footer you’d need to go though every file for your website and make changes on a page by page basis. Maintaining a huge number of fixed pages of files seems to be impractical without having automated tools. However, with the modern web template systems, this scenario is changing.

Over the past few years, static sites are again becoming popular. This is due to advances in programming languages and libraries. Now, with static site generators you can host blogs, large websites, and more with the ability to make site wide changes on the fly.

Advantages of Static

Static files are lightweight making the site faster to load. Cost efficiency is another vital reason why companies tend to migrate to static sites. Below are some of the advantages of static sites over traditional sites based on content management systems and server-side scripting, like PHP, MySQL and others.

Speed

With server-side rendering, potential difficulties regarding web page loading are lesser. Here, your site’s content is presented as an entirely pre-rendered web page. Whereas, in traditional sites, the web page is built separately for every visitor. Better speed provides a better SEO ranking and better site performance as a whole.

Flexibility

Static websites have multiple options in terms of using frameworks for rendering. You’re free to choose any programming language and framework from Ruby, JavaScript, Vue, React, etc. This makes the build and maintenance smoother than the traditional sites. Also, static sites have fewer dependencies. So, you can easily leverage your cloud infrastructure and migrate easily.

Security

Modern web platforms are more vulnerable to hacking compared to static ones. As the entire system remains connected there are multiple opportunities to breach the site’s data. But in a static site, the content database remains independent of the front-end interface. This gives fewer entries to the hackers resulting in your data being safer. The site visitors don’t connect to the database on each visit. This provides another advantage over database-driven websites.

What is Hugo?

There are many static site generators but Hugo claims to be the fastest and the most popular open-source framework to build websites in the whole world. Hugo provides an amazing speed and great flexibility to easily build your website.

Hugo was originally developed by Steve Francia. Moving forward, Hugo’s performance and features have greatly improved. It can generate websites within seconds. It’s licensed under Apache License 2.0.

How Hugo Works

As a static website builder, Hugo takes i18n bundles, data files, static files, templates for layouts, content written in Markdown files, Org-mode, or AsciiDoctor, and runs those files through theme templates. Thenreaks them down into HTML files that can be easily deployed through the internet to render a static website. Interestingly, it does everything pretty fast. It can render a site having 10,000 pages within just 10 seconds.

Hugo trades off as a self-contained executable, unlike other SSGs that require software dependencies and a package manager. Some of Hugo’s features worthy of mentioning are image processing, multilingual support, shortcodes, and custom output formats. Nested sections let you separate different types of content, such as a blog, podcast, etc.

Installing HUGO

There are many ways to install HUGO on your systems laid out here in the documentation. Depending on the distribution you’re running it can be in your systems native package repositories. On my Linode running Ubuntu all we needed to run was the following command.

sudo apt install hugo

Once Hugo is installed we need to make a website directory so we can begin configuring and theming. Once Hugo is install go to the parent directory of where you want to build your site. This is different from where you website is going to be published to the web and this could even be on a local machine as we will move the static files to a public directory later. I generally do this in my home directory.

hugo new site example.com

This will build the directory where you will be able to configure and build the website.

Theming Hugo

Theming would be a great point for beginning with Hugo. Themes are available in various shapes and sizes. You can always check out beautiful themes from a custom-made theme gallery on Hugo’s official website. In fact, many of them are free. Many of theme themes include example files to help you get started. Now, let’s install a theme. We are downloading the Kiera theme in this exmaple. To install:

First, go to your theme folder in Terminal using the following command.

cd <hugo-project-directory>/themes/

Then, to clone Kiera into the themes directory, use Git by typing:

git clone https://github.com/avianto/hugo-kiera kiera

Finally, activate Kiera. Often a directory called exampleSite is provided with Hugo themes. It consists of an example settings file and an example content. For activating the Kiera theme, copy and paste the config.toml file to your site’s blog and make on configuration edits you prefer.

cp themes/kiera/exampleSite/config.toml

Then confirm for overriding the previous config.toml file.

In this way, the Kiera theme will be installed and configured. The next thing to do next is to start Hugo’s built-in development web server so that you can view your site on your web browser.

Easy with Linode!

These are the inital steps to get started with Hugo. To learn more check out the video on the Linode channel and refer to the official Hugo documentation. Also if you want to deploy a Hugo site on Linode you can get a $100-60 day credit for new accounts!

You can watch the tutorial here: