How can I judge the quality of a theme?

Hi,

I’m currently learning Hugo to build a nice and simple site for my new personal business. Since it’s been many years that I’ve done anything with web development my knowledge is very outdated. I want to use a theme but having a bit of a hard time with making a selection.

It seems there are many different implementations of themes. One can download the files and simply put them into the themes folder and configure it in the config.toml file as shows in the Hugo Quick Start (which is easy to understand). However it gets more complicated rather quickly with themes that require complete custom build of the Hugo site using npm. To make it even more confusing you have Modules now also which I don’t understand yet despite having read that part of the documentation three times now :frowning:

I tried installing one theme using Modules and while it worked I don’t understand how it works which makes it hard for me to use because I want to understand the basics so I can do further customize in the future.

Right now I’m browsing through all the themes to make a long and short list for those I find interesting. I’ve taken a particular liking to this theme, which is a paid one: Thomson Hugo - Themefisher I’m looking for a basic theme for my sole proprietor business that includes a blog, concise home page, services and a portfolio or projects page and the Thomson theme matches the best so far.

Is there any way for me to judge how well the theme is made? Are there certain properties I need to pay attention to? Like what kind of JS or CSS libraries that are used? I want to start with a theme but customize it more in the future and add a lot more functionality and I’m a bit worried I end up choosing something I might regret in the future if I want to expand the theme.

Thank you.

1 Like

Look for themes with clean template code without verbose constructs.
If you don’t understand a theme’s templates then move on.

Use themes with Hugo Modules only if you are willing to maintain a local Go installation and you need constant updates. Same for themes that use npm (maintaining a node.js + npm installation costs precious time).

Avoid any theme that includes jQuery. This library is mostly obsolete and insecure.

Avoid themes with SASS. libSASS is deprecated DartSASS is the new thing.

(But then again CSS has native variables that may cover your needs without the cost of a third party library.)

Keep it simple. A lot of people apparently don’t keep things simple.

A good rule is the less JS the better.

P.S. The above is my personal opinion, I am not talking either as a moderator or as a former maintainer of the Hugo Themes repo -although my time reviewing dozens of themes has certainly informed my point of view-.

2 Likes

This is a bit discouraging to read. That Thomson theme I linked in my original post uses jQuery 3.3.1 and it’s the theme I like the most so far. I just checked the jQuery website and latest version is 3.5.1.

Anything above jQuery 3x is considered safe.

However jQuery is still unnecessary. It used to be vital once upon a time 8-12 years ago, in this day and age it is not needed.

Nothing is quite as fast as vanilla JS or even better no JS at all.

Additionally, you can check the theme with Google’s PageSpeed Insights or generate a Lighthouse report in Chrome.

Most themes offer a preview / demo which you can use for that purpose.

(Of course, the results are preliminary because your deployment later - e.g. what kind of image formats you use - has an impact, too.)

If security and privacy are of interest for you, then it might be also useful to check the theme with Webbkoll.

I made this a while ago, which lets you see how many stars a theme has on GitHub.

4 Likes

I would also check the Theme’s activity at Github/Gitlab. If the theme is active and responsive of the issues, you can hope that they’ll help you when problems arise.

Also, themes should have some form of documentation. Otherwise you’ll have to reverse engineer everything, which isn’t ideal.

Please take the “jQuery is bad” dogma with a hint of salt. Not jQuery is bad, the problem with “developers” publishing themes and then abandoning them is bad. WordPress famously ruffled some feathers by simply upgrading jQuery and removing migration scripts recently because there are many themes that are published and then nobody takes care to update underlying layouts or libraries.

In general jQuery is NOT bad. It’s a library that is easily understood and MANY developers can do a quick change on your theme if needed. “Vanilla” JavaScript is nice, but developers who know a “framework” (like jQuery) are more many than developers who know “real” (vanilla) JavaScript.

So in my opinion, if it has jQuery, ok, good. Put your site on Github and enable the security options (settings > security) that scan your repo and tell you when you need to update ANY library. Then update that library (it’s as easy as updating the file in your repo or update the version numbers in your link-rel-tag. If it’s broken you will find out, if the theme is good :wink:

And as all others pointed out:

  • if it’s a public repo with an active development (I mostly look if anything was changed in the last 6 months), thats a +1
  • if “closed issues” read like the developer listened to the issues and fixed them properly then it’s another +1
  • the stars are ok, but I to my shame must admit, that I seldom click the star button on repos. lots of stars of course are a +1
  • test the theme and find a little silly annoyance like “i would really like to change the font size of that secondary header here, how do I do it” and open an issue with it and see how the developer reacts. If you are happy —> +1
  • speedtests, markup tests, social media markup tests (how do posts of just the URL look on Facebook, Twitter, etc.) – if you are happy —> +1

Regarding the Thompson theme: jQuery 3.3.1 is quite old, copy jQuery 3.5.1 over it, that will keep working and it’s the latest version.

Or open an issue in the Thompson repo and see if you get one or more +1’s on that.

1 Like

Thank you all for the suggestions. I’ve accepted that selecting a theme is going to require a lot of time if I want to do it the right way, which is what I want to do.

So right now I’m making a long list based on all themes I like the look of, and after that I’m going to take those themes and read the documentation and make a judgement on the technical quality of work.

I’ve already found that there is a group of themes that have been ported over from other CMS systems and are not built specifically for Hugo. I’ve also found some nice looking themes where you can clearly tell a lot of effort has been put into the documentation and laying out the features/details and what kind of CSS and/or JS libraries have been used.

This one for example grabbed my attention based on the documentation and all the features:

From a novice standpoint this theme seems to be utilizing a lof of the native features of Hugo and building upon that. This appeals a lot to me because that help me as a new user to learn what is possible with Hugo in case I want to start making my own theme in the future.

3 Likes

No dogma. Even Bootstrap dropped that library sometime ago.

I agree though that a lot of the modern web would not have been possible if jQuery didn’t offer a way to do many things that used to be impossible back in the day.

Other than that these days everyone is into other trendier frameworks.
Vanilla JS is still faster than the whole lot of them.

2 Likes

It also had an update just 2 days ago. That is encouraging. If everything fails (no answer on the themes issues) just put your site in a repo that can be read publicly and post here.

Sometime in the future :wink: I admit, I changed all my sites to BS5 too, but it’s still just a beta. Between the last alpha and the first beta all sites broke because they changed from “left/rigth” to “start/end” for LTR/RTL compatibility. It will be glorious once it’s published. I think “vanilla” Javascript is good, but you won’t find many who can read code and quickly fix some things. There are many people out there who know stuff about “frameworks” and never learned the details.

I recently started switching lots of my scripts from jQuery to native JS. It’s all possible.

But the problem is still with developers who drop a theme and disappear. An average generation online is only 4 years, so a top-modern theme today will be a thorn in our eyes in 4 years if it does not develop further.

So to finish the list of +1’s for the decision for a theme might be the license of the theme. If it’s a permissible license so any other developer could fork the theme and update things, that is possibly another plus point.

Sometimes I think we should add some form of “testimonials, reviews or star” system to the themes. But in the end that will lead to more work to moderate those than the advantage of having favourites in the themelist. In the end it’s an opinion :slight_smile:

That is why I stopped being a maintainer of Hugo Themes.

There is no mechanism to remove unmaintained themes, unless one spends precious time doing manual audits.

There are many great themes in the showcase but there are also many that are average at most.

1 Like

Idea: An indicator in the theme.toml file that shows up to which Hugo version the theme is tested and confirmed working properly. Themes drop down the list if they don’t fit the current Hugo version.

1 Like

That would not be possible.

Perhaps the themes site build script could fetch the git info of a theme’s last commit and then if a theme’s last update is older that a certain point in time, then that theme does not show up on the list.

However even the above would require an extensive discussion at the themes repo as well as script refactoring.

Not simple stuff ar all…

1 Like

On the other side: It might be an even better idea to let that “animal” out into the wild and let other people not connected to Hugo take care of sites showcasing (and ranking) themes. If Hugo had a simple standard design that is installed at hugo new site . and let the whole detail work with themes out for others… that might take some ballast away.

Once again I am pointing to, eeehk, WordPress with their yearly default templates that showcase the latest features. (on the other side, I am aware they have a theme directory :wink: )

We are getting offtopic though :slight_smile:

1 Like

I sort of agree.

Hugo is run by a very loose group of volunteers. There are no resources to maintain an extensive themes showcase.

Perhaps there should be a few community themes for specific use cases, like a blog, portfolio, e-commerce etc.

Again that would require an extensive discussion and probably upset many theme authors.

I honestly put all this behind me when I quit being a Hugo Themes maintainer.

3 Likes

It’s just very time consuming if you want to do it properly. I think I spent about 4-5 hours so far going through the themes. I’m just working down the list the way it’s currently sorted. I believe it sorted by last theme updated and I’m about a third of the way through. I might stop and 60% or so. I rather not use themes that haven’t been updated in 12-18 months.

After that I will have a long list and then I hope to make a short list based on the quality.

I’m going to judge the themes based on the description and documentation and - to the degree I’m capable of - how well the theme utilizes functionality from Hugo itself.

2 Likes

Hi there,

Interesting conversation.
If it can help, here is a “Web Quality Assurance Checklist” :
https://checklists.opquast.com/en/web-quality-assurance/

Cheers

2 Likes

In my opinion, Hugo theme selection is a disaster. I personally have spent hours going thru themes, trying to find something as simple as all Bootstrap 5 themes. Jekyll has much nicer themes but Hugo is just 1x .exe file. Other SSG are a mixed bag in terms of themes. I just wish it wasn’t so.