preloader

How To Auto Deploy a Hugo Theme Demo to Netlify

Posted on: 7/8/2021 How To Auto Deploy a Hugo Theme Demo to Netlify

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.

Step One: Install Package and Set Build Script

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.

Step Two: Create & Configure Site on Netlify

After creating your account on Netlify navigate to the ‘New Site from Git’ button.

netlify 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:

netlify config

Wrapping Up

The last step will be to copy the url to your deployed netlify site to your theme.toml like this:

demourl = "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.