With the plethora of tools available to web developers, building a basic website has become extremely easy—taking only a couple of minutes or seconds, in some cases. Hugo is one such tool that makes building a static website (more on that soon) seem completely effortless.
Hugo is open source and written in Go (or Golang, as some call it). Highly optimized for speed, Hugo will render a typical site in a fraction of a second. Compared to other popular static site generators, Hugo is faster than most!
The two kinds of websites
All websites can be grouped into two categories: dynamic and static. Let’s first cover what a dynamic site is. Take a typical Facebook page—When you log into your account, you will likely see some feeds from friends, pages you like, birthday notifications, and a list of friends online. Another person visiting Facebook will get different content in his or her feed and have a completely different set of friends online. That is a dynamic site. It changes in real time and relies heavily on databases and server-side technologies like PHP.
A static site, as the name implies, is static—Its content does not change very often, and it usually requires no database. Static pages are easier to build compared to dynamic pages. There are numerous reasons why someone may choose a static site over a dynamic one, but the purpose of the site usually determines which to build. (It would be impractical to build a static website that keeps track of scores from live games, for instance.) However, a static site will work perfectly for a blog, to host documentation, display your résumé, or to promote a small business.
Dive into Hugo
The installation procedure for all operating systems can be found on this page. Hugo has a snap package for Linux users.
To build a Hugo site, navigate to a directory (an empty one, preferably) and open up the command line from the directory. With the code below, you should have a hello-world folder created with some directories and a config.toml file in it.
$ hugo new site hello-world Congratulations! Your new Hugo site is created in "/home/bruno/hello-world". $ git init Initialized empty Git repository in /home/bruno/hello-world/.git/
The folder structure in the project directory is the standard structure for a Hugo project. It enables Hugo to render the site correctly. For now, only the content folder is of interest, as it holds all the pages for a Hugo site. To add content to our empty site, we will create a Markdown file with our content. Markdown is the main format for content in Hugo. It is very easy to learn since it’s a markup language—Within a few minutes, you should get the hang of it. (This cheatsheet will come in handy.)
We will create our site using a Hugo theme.
# create Markdown file $ hugo new first.md /home/bruno/hello-world/content/first.md created # add some content to the page $ echo "# **Hello Hugo!**" >> content/first.md # download theme $ git submodule add https://github.com/lasseborly/anybodyhome.git themes/anybodyhome $ git submodule init # add theme to configuration file $ echo 'theme = "anybodyhome"' >> config.toml
We are already pretty much done. Before running the site, let’s look at Hugo themes.
Hugo has a large collection of beautiful themes that enable you to quickly build your site. You can pick from several categories such as blog, amp, or documentation, depending on your need. There’s no need to start from scratch. The themes can be tweaked to fit any site.
To view the finished site, run hugo server -D and head over to http://localhost:1313/ in your browser. As this theme is minimalist, it has little fancy styling. However, the theme can be customized by overriding the static and layout assets. (Note that overriding is emphasized. It ensures the theme renders well and doesn’t break.)
Hugo sites can be hosted anywhere. You can easily host Hugo sites on GitHub, Firebase, and Bitbucket.
Next time you’re thinking of building a static site, consider Hugo for its speed. With an active community, you will get quick help should you encounter any problem.
