This Site Was Created With Hugo Static Web Site Creator

Hugo Static Web Site Creator Logo

Website Creation with Hugo

I decided to break away from my norm these days of using WordPress and create this website using Hugo.

Hugo is an open source framework for building websites, and according to them, it’s the world’s fastest framework. I don’t know about that, but I like the idea of Hugo. I can create a website on my local computer without much messing about, setting up development environments etc. that I have to do with WordPress. You write the content in markdown! You know markdown, the way of styling text, but using a very simple styling syntax, not to be confused with HTML markup. Though, as a side note, markdown was created to be easily converted into html formatting.

Here is part of this page in markdown

# This Site Was Created With Hugo Static Web Site Creator

![Hugo Static Web Site Creator Logo](../../images/hugo-logo.gif "Hugo - Open Source, Static Website Creation Software")

I decided to break away from my norm these days of using WordPress and create this website using Hugo.

[Hugo](https://gohugo.io/ "Go to Hugo website main page") is an open source framework for building websites, and according to them, it's the world's fastest framework. I don't know about that, but I like the idea of Hugo. I can create a website on my local computer without much messing about, setting up development environments etc. that I have to do with WordPress. You write the content in markdown! You know markdown, the way of styling text, but using a very simple styling syntax, not to be confused with HTML markup. Though, as a side note, markdown was created to be easily converted into html.

**Here is an example of some markdown code**

Pretty simple isn’t it.

That’s the code that give us the first bit of this page: the Headline, inserts an image, creates link text, and we can even made bold text at the bottom of that code, normal writing (not especially formatted body text) needs nothing to make it work.

SIDE NOTE: There are two main types of markdown. The original version and “git hub flavoured markdown”. The git hub version has a bit more flexibility and functions. Hugo uses the original version.

There are various free markdown editors available across the web, or using a plain text editor will work just fine too. If you already use a programmer’s IDE, it probably already supports markdown, or will do with an extension/plug-in. This page is currently being written with VS Codium, the open source version of Microsoft VS Code, which I have also used on here. I have successfully tried Atom IDE, Typora mark down editor and my plain text editor - all worked well. Personally, if find an IDE the handiest if I am doing anything more than a quick edit, it has everything needed on one screen - I can explore the files and directories, edit, have a terminal screen and monitor changes in git (yes, Hugo can easily use git).

A side note about git and Hugo - git is put across as a ‘must use’ in Hugo and is actually the default way of installing templates. Though, from what I can tell, it’s not actually essential if you don’t want to use it. Templates can simply be downloaded from GitHub and copied into the themes directory. Personally, I like version control so, it suits me well to use it

Git

Maybe you don’t know much about markdown. Well, it’s an easy to learn, popular method of styling text in some circles. Some note taking apps use markdown, GitHub uses Markdown, I have seen ReadMe files with some binary packages that were written in markdown. You can get a feel for markdown here.

Once you have written a page or two, run a command and Hugo turns your pages into static HTML pages that can be displayed far quicker in your visitor’s browser than a dynamically rendered site. Also, there is less required server side to host Hugo generated sites. You don’t need a fancy pants web server like NGINX or Apache, sure, they will work, but any old basic http server in the back end will do. You can even run a site from simple cloud storage buckets such as from AWS, Google Cloud Platform or Linode as your visitor’s browser does all the rendering work. You can of course host on a “normal” web host. Again, because the requirements - both on the hardware and software side are less than dynamic sites such as those on WordPress or similar, any old web hosting company will do.

In Hugo, you don’t even need to learn how to create the look and feel of your site as you can get pre-made themes, just like you do in WordPress. Alternatively, you can make your own theme with html, CSS and some built-in Hugo functions etc. Or, if you want to just change a pre-made theme a bit to suit your needs, it’s easier to do in Hugo, than in WordPress.

You may look at this site and say to yourself, it’s a bit basic, not very flashy, the Hugo themes must all be like this. No actually, I deliberately choose to go with a fairly simple theme. I have done flashy in the past, and done simple. I have a personal preference for simple and clean on sites that can utilize that format, and this site fits nicely.

Even though Hugo is a static site generator, you can still get features like multilingual sites, image carousels, comments, contact forms etc. It just works a little different from the more popular CMS platforms.

There are many, many sites out there running as a dynamically generated site, that do not need to be. It’s just that people move to the popular CMS creation solutions as they become popular. Though, it doesn’t mean that your site needs to be dynamic. In fact there is a very popular WordPress plugin that converts your site to static html pages just to help speed up the load time. This turns your site into a static site, but you still need to heavy workload on the server to create the site and to convert it to static. Hugo saves you all that.

Installation

You can install Hugo locally on:

  • macOS (Darwin) for x64, i386, and ARM architectures
  • Windows
  • Linux (snap, deb, rpm), Linux(ARM)
  • OpenBSD, OpenBSD(ARM), FreeBSD, NetBSD, NetBSD(ARM), DragonFlyBSD

There are 32bit and 64bit editions.

They don’t have an official docker image, but can point you to one they suggest. And of course, the Hugo source code is freely available.

They really are trying to provide Hugo for as many Operating Systems as they can.

Hugo’s Installation page: https://gohugo.io/getting-started/installing/

Downsides?

OK, I will admit that Hugo is not for everyone. It generates static pages, so if you absolutely must have a dynamic site, then that’s a show stopper.

Hugo is more complex to initially set up than WordPress. Though, I am comparing setting up the full Hugo development environment against a web only install of WordPress here. If I compare setting up a local Hugo development environment locally against setting up a local WordPress development environment, then Hugo wins hands down! Also once installed, subsequent sites are very quick and simple to set-up with Hugo - one instruction and the whole framework is in place for your new site.

hugo new website-name

That’s it, you now have a new website framework ready for content.

Once up and running, I admit that I find WordPress more intuitive than Hugo, though that may just be because I have used WordPress for so long and Hugo is still relatively new to me… Probably not to be honest though, Hugo does have a bit more of a learning curve. You need Hugo install on your local machine, whereas with WordPress and other CMS based sites, you can log into your site from any computer and create some content. It’s also easier to set up a site for a client, using another platform, especially if they may want to create content themselves or if you simply set up the site then move on. If another web developer or a client in-house ‘developer’ wanted to continue developing your initial site, then they would then need to install Hugo and get a copy of the site from your machine, not just the html files. Though as Hugo can use git (if you choose to), you could push your site to GitHub, GitLab or similar and get the new developer to clone it.

For me, it works. The downside aren’t applicable, and I find the advantages err… advantageous :)

Advantages

  • Speed
  • Ease of Use
  • Low Resources on the back end
  • I haven’t measured it, but it feels like low resources on the development machine as well. Probably is since they also provide 32bit versions.
  • Simple to create and view on your local machine before upload.
  • Simple to alter templates etc. to suit your needs.
  • I can write and format an article on my smartphone, even with no data connection, then load it into Hugo to transform into an html page for my site at a later stage.

My young daughter has been wanting to create a website for herself, just on our home network. Will I get her to run it on Hugo? Doubtfully, I will probably be creating a LEMP web server on a Raspberry Pi on our home network and installing WordPress. I can show her how to use WordPress far easier and quicker than Hugo or anything else I can think of. She is not technically minded, so it all needs to be extremely intuitive for her, and WordPress is good at being that in it’s basic use.

The type of person and the website creation method that suits them (in my opinion):

Personal Skill Level Website Creation Method
I just want to create a site with as little of a learning curve as possible Online website builder such as Wix, Squarespace, GoDaddy etc.
I want a site and don’t mind a little work and learning to get one CMS such as WordPress, Drupal, Joomla, Ghost etc.
I am happy to hack a bit of code, and learn some new stuff Creation software such as Hugo, Jekyll etc.
I want to do it all from scratch Get yourself a subscription to Dreamweaver, download an IDE and start coding.