Skip to main content

Dima Kolosov

Demosite for your Hugo theme (with Netlify)

I recently noticed that the demo site for my Hugo theme Anubis is disappeared from Hugo Theme catalog. At first, I thought the script fails and the demo site would be there on the next update.

It didn’t happen. But I found one theme with an enabled Demo button, checked it, and discovered a new parameter in theme.toml config - demosite.

Catalog buttons

Catalog buttons

Google led me to July 2021 announcement about this change and disabling all demo sites. I tracked only new releases, and it was a surprise for me. And I guess not only for me - I didn’t find a theme with an enabled demo button on the first try (7/10 of most popular themes don’t have it at the end of January 2021). Additionally, a few themes I saw have a Demo link in their README — and it led to Hugo Theme Catalog Demo, which is now not available (404).

So I added demosite parameter to config, and after 3-4 days (Hugo script timeout to check and update all themes in the catalog) Demo button has appeared!


In my case, it leads to a built example site on Netlify. I could add my blog as a demo, but it’s a bad decision from my perspective:

  • example site contains many enabled features that can be disabled in a real blog.
  • example site contains markdown and Hugo shortcode examples. I doubt all of them can be found in any of your posts together.
  • same content allows new users to compare themes without struggling.

This is why I want to share a fast and free way to create a demo site with Netlify.

  1. Add netlify.toml file to the root directory of your theme
[build]
publish = "exampleSite/public"
command = "cd exampleSite && hugo --themesDir=../.. --baseURL $URL"

[build.environment]
HUGO_VERSION = "0.92.0"
HUGO_THEME = "repo"

[context.deploy-preview]
command = "cd exampleSite && hugo --themesDir=../.. --buildFuture --buildDrafts --baseURL $DEPLOY_PRIME_URL"

[[headers]]
  for = "/*"
    [headers.values]
      Access-Control-Allow-Origin = "*"
  1. Signup on Netlify and use instructions from this article to connect your Github repository.

Don’t forget to check local build with example site. It should be done without errors. After a few days, you should check your theme in Hugo Catalog (updated date should be changed). And demo button should be there.

Conversion rate — up!