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
.
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.
- 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 = "*"
- 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!