A Look at Two Static Website Generators—Hugo and Jekyll

DZone 's Guide to

A Look at Two Static Website Generators—Hugo and Jekyll

Wordpress has always been the go-to solution for static site generation. However, Hugo and Jekyll offer a great and speedy alternative despite being relative new kids on the block.

· Web Dev Zone ·
Free Resource

Today, I had to quickly assemble a wiki/blog website for our family temple back in India. At first, I considered doing my traditional option to leverage WordPress, but then I thought of all the complexities of setting up a MySQL database, creating and registering the site with WP Jetpack, etc.

I wanted something quick, easy to maintain and something that I can hand over to someone else for maintaining. Most software developers are used to Git for source control, and if there was a way to keep the source files in a Git, then this opens up the possibility of merely giving the end-user the access to the repository. With that, they can then either maintain it in the long run or branch it into their own copy. Spending a bit of time researching my options, I came across a suite of tools that allows you to generate static-blogs and wiki. Out of the dozen or so options, I decided to explore the one with the most traffic (Jekyll) and one that is ranking fourth but built on GoLang (Hugo).

Both Jekyll and Hugo had similar features when it came to Content, Front-Matter, Templates, Taxonomies, Themes, Categories, Sections, support for static content besides blogs, and ability to support Markdown syntax for editing. I would highly recommend both Jekyll and Hugo. What made me opt for Hugo is the simplicity of setup/installation. With Hugo, I had to download one executable (since it was developed in GoLang, one of my new favorite languages). It allows for native compilation for many different architectures and operating systems including Mac OSX, Linux, Windows, etc. Once I unzipped the executable to a directory, all I had to do is to add it to my $PATH either in Linux or Windows. That is all you need to do to get started.

Whereas with Jekyll, I had to first install Ruby, then Ruby Gems, then Gem install Jekyll, then Node.js and optionally Python 2.7 for Jekyll 2 or earlier. The steps for getting Jekyll were way too complex. Granted, I had most of those tools already installed, but for non-developers, this would be a pain point.

Once Hugo was available on my $path, then I created a blank site:

mkdir myproject
cd myproject
hugo new site sivavishnu .
# Creates a blank starter site with default theme

Now in my case, I am a big fan of Bootstrap. So I googled for all themes built on Bootstrap for Hugo. I came across a few options, which led me to BootsWatch. I found that Nicholas Whittier had created a Hugo-Bootswatch (thank you Nicholas) theme built on top of Bootswatch>Bootstrap. So, to integrate Hugo-Bootswatch to my site, I followed directions on Hugo as follows:

cd myproject
mkdir themes
git clone https://github.com/nilproductions/hugo-bootswatch.git
# This clones a copy of the "hugo-bootswatch" project under my "themes" folder

Now to create some sample blog articles using Hugo:

cd myproject
hugo new post/first.md
# This creates a markdown file under myproject/sivavishnu/content/post/first.md
# You can now edit this file and using Markdown syntax for the headers and HTML for the body

Here is a link to learning Markdown.

Now here are two options in Hugo to preview and to generate the site:

# To run a webserver with latest blog (including drafts):
hugo --theme=hugo-bootswatch server --buildDrafts
# To generate the latest blog (under public folder)
hugo --theme=hugo-bootswatch

Then, if you want to go crazy and create static pages, exclusions from the list, customize the CSS, etc., you can do it all!

But here are three things that you will need to consider:

  1. Because this is a static site (with no back-end server engine like PHP, Node.js, Tomcat, etc), you will need a way to allow users to search your site. I chose to add Google Site Search as an option. It’s free, but the catch is that until Google indexes your site, the search option is not functional.
  2. Analytics for your site to track your hits. See the link in Hugo document for steps.
  3. Adding the ability under blog pages for external users to comment. Again, Hugo gives you the option to integrate with Disqus. See the link on the Hugo document how-to integrate Hugo with Disqus.

This way, all your site is doing is serving a static site. Did I mention that Hugo also generates your static site wicked fast?

So, for the last step, I generated the static website and uploaded it to my BlueHost hosting provider.

And don’t forget to check your code into a Git repository of your choice. In my case, I’ve checked in my code at BitBucket.org.

Here are the links:

Hope you enjoyed reading this article. Consider subscribing and sharing!

blog, hugo, jekyll, static site, wp

Published at DZone with permission of Venkatt Guhesan , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}