For this showcase, I thought it would be interesting to compare the implementations of a template with both Jekyll and Hugo versions. We're using the template Hyde for this comparison. Mark Otto (Mdo) created Hyde for Jekyll, and it was later converted to Hugo by Steve Francia.
Let’s start with the overarching layout. This is _default.html on the Jekyll site:
and baseof.html on the Hugo site:
The code is very similar in these layouts. It’s interesting seeing the subtle differences between Jekyll and Hugo with includes/partials and content blocks. Hugo adds more options allowing you to set a theme color, reverse the layout and set up Google Analytics.
One subtle difference is the head.html include in Jekyll doesn’t include the
<html> tag and doctype, whereas the Hugo partial does. I’m a big fan of opening and closing HTML tags in the same file. Untangling nested elements across multiple files is a nightmare.
The post layout is slightly different between the two implementations. In Jekyll we have a related posts section:
Where as in Hugo this has been changed to a Disqus comments section:
The posts on the Hyde site in Jekyll a straightforward: YAML front matter with a body of Markdown.
One minor improvement I’d make here is setting the layout as a default in the _config.yml rather than specifying it on each post.
On the Hugo site we don’t have any posts, instead we have an archetype - a template to create new posts:
The structure is TOML front matter with an empty body for Markdown. The menu = “main” in the front matter adds the post to the sidebar:
Where as Jekyll iterates over all pages with a layout of “page” for the sidebar.
The Hugo site could do with two archetypes, one for a page and one for the post. At the moment, the archetype is in-between. We have posts with tags and categories but no date.
On the Jekyll site, the Post list page iterates over the paginated posts and outputs the title, URL, date, and content:
There’s also handling of the pagination below the posts.
The Hugo post list page is much more simple. It iterates over all the pages on the site and outputs the title, URL, and summary with a hardcoded date.
There’s still work to do to get the Hugo site into a usage state for a blog. I need to filter this to only posts and populate the date from the post itself.
That wraps up the comparison of the Jekyll vs. Hugo Hyde theme. It’s always interesting to see implementation differences between static site generators. If you have a template or site you’d like a showcase, reach out to us on Twitter.