Use Hugo To Create Awesome Static Websites And Blogs

You might not know this, but I run another blog on a completely different subject material than The Polyglot Developer. This other blog is called Own the Web and it focuses on brand building, searching engine optimization, and boosting your online revenue through the internet. Unlike The Polyglot Developer, Own the Web was actually created using the Hugo Static Website Engine.

I want to share information about Hugo, some of the advantages and disadvantages, and my experience using it.

I first heard about the Hugo Static Website Engine through a friend of mine, Raymond Camden, who recently migrated his WordPress blog to it. We both suffered from the same issues when it came to WordPress and after his transition he had a lot of great things to say about Hugo. A few weeks ago another friend of mine, Julio Pescador, started a Hugo blog as well.

This was validation that the Hugo Static Website Engine was something awesome. So what is Hugo, who should use it, and why should you care?

Hugo per the Hugo website:

… a new idea around making website creation simple again. Hugo flexibly works with many formats and is ideal for blogs, docs, portfolios and much more. Hugo’s speed fosters creativity and makes building a website fun again.

Essentially it is a static content generator. It allows you to create static websites. You can create your content using Markdown or one of the other allowed languages and compile it into a static website.

The compilation process takes your content files and applies a theme that you choose stripping out all the difficult work of theming each of your web pages. Worry about what matters, the content.

The Advantages of the Hugo Static Website Engine

There are a few killer advantages to using Hugo for your blog versus WordPress or similar.

The problem that Ray and myself had, along with many WordPress users, is that it is heavy. It requires PHP and MySQL and eats up a ton of resources depending on the themes and plugins being used. This is because WordPress powers through generating a lot of dynamic content, or content that is determined via the database.

Hugo does not use PHP, it does not use a database, and it doesn’t handle dynamic content. Sure your content is dynamic during creation, but once you compile it, it is just a standard HTML website. This means your Hugo website is incredibly lightweight, in turn making it incredibly fast.

When the weight of a website decreases, so does the cost. As of right now, The Polyglot Developer takes $30.00 per month to keep it online. That is how much a necessary server costs to handle my WordPress traffic. Since Ray Camden has been using Hugo for more than a month, I asked him how much he was paying to keep his site online. He told me it costs approximately $3.00 per month using Amazon S3. Now note that he has more than 9000 blog articles published. The Polyglot Developer, as of now, only has 250 articles. That means a Hugo website is dirt cheap to host.

I mentioned Amazon S3. Since Hugo generates static content, it can be hosted anywhere that accepts HTML. Amazon S3 is a smart choice because it is cheap and has 99% reliability and availability. This means your site will probably never go offline and if something bad happens, Amazon keeps backups.

The Disadvantages of the Hugo Static Website Engine

There is one main disadvantage when it comes to Hugo. There are not many themes available and the ones that are available are not particularly awesome. This means from a visual perspective you’re either going to have a site that looks like every other Hugo site, or a site that doesn’t look so great.

I did create my own Hugo theme called Phlat in order to get more quality themes in the listings. Julio Pescador also ported a nice theme called Future Imperfect originally created by HTML5 UP.

The theming options are growing, but as of right now, unless you want to make or port your own, things might be tough.

My Experience Using Hugo

Given the pros and cons, my Hugo experience has been positive. I prefer Markdown so creating content is incredibly easy for me. The build process is very quick and easy and I store backups of my site, Own the Web, in a private Git repository. Own the Web is being hosted on Digital Ocean, the same server as The Polyglot Developer, yet Own the Web takes hardly and juice to keep it alive.

I recommend Hugo to anyone looking to start a blog for cheap.

Getting Started with the Hugo Static Website Engine

To start generating static websites, first download Hugo for your operating platform. For example I’m using a Mac so I downloaded the Darwin binary.

Extract the download and it should contain one executable file and possibly a few README and licensing files. Personally I moved the executable file to a safe location and added it to my $PATH. It is up to you how you want to make use of it.

To create a new Hugo project execute the following from your Command Prompt (Windows) or Terminal (Mac and Linux):

/path/to/hugo new site ProjectName

Navigate into the project and create new content like so:

/path/to/hugo new post/my-post-name.md

Anything added to the Markdown file will be compiled when you build your project. Before you do that, you must download a theme. As someone new to Hugo, you may want to download all the available themes to play around with. This can be done as follows:

git clone --recursive https://github.com/spf13/hugoThemes.git themes

With some content created and themes available, you can serve the website locally or build it to be transferred to a production server. For development you would do something like this:

/path/to/hugo server --theme=hyde-x --buildDrafts --buildFuture

The above command will start a local Hugo server, use the Hyde-X theme, and generate drafts as well as posts scheduled for the future.

Not too difficult right?

Conclusion

Hugo is a nifty static content engine. It will allow you to create blazing fast websites that can be hosted anywhere for cheap. I’m currently using WordPress for The Polyglot Developer, but Hugo for my alternative blog, Own the Web. It is performing great and I’m glad I paid attention to the success of Raymond Camden and Julio Pescador.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.