When writing a theme for Hugo you’ll often want to show a demo from the exampleSite directory. In order to build that directory as a Hugo site, you need to have the theme inside of it. I wrote a small npm package, hugo-theme-demo-builder that will clone the theme into your exampleSite directory and then run the hugo build command.
The first thing to do would be to run the following from the root of your theme repo:
cd exampleSite
yarn add hugo-theme-demo-builder
npm set-script build hugo-theme-demo-builder
This will add the build script to your exampleSite. Next, you will most likely want to set the hugo version in a netlify.toml file inside of the exampleSite directory to something like this:
[context.production.environment]
HUGO_VERSION = "0.85.0"
This will set the version used in netlify when we build the project there later. For more info about hosting Hugo on Netlify click here.
After creating your account on Netlify navigate to the ‘New Site from Git’ button.
Then select the source control you’re using (e.g. Github). Then select the repo that your theme is in. Lastly you want to configure your build settings like this:
The last step will be to copy the url to your deployed netlify site to your theme.toml like this:
demosite = "https://example.netlify.app/"
Now you should see a demo button that links to your automatically deployed theme demo on netlify from the theme page on the hugo themes site. You may need to wait until the next rebuild of the hugo themes site for your link to appear, but it should be there shortly.