After playing around with this for a bit, I finally got it to work.
To give you an idea, my usual workflow when updating my theme is something like:
- Make changes
- Commit and push
- Pull changes into my personal site, which uses the theme
- Test to make sure I didn’t break anything
- Commit pulled-in theme changes
- Rinse and repeat
Since my theme (and many others out there) use an example site, I figured all the ingredients were there to build the site. And it would be nice to see a live demo with my immediate changes.
So why Netlify, and not some other CI? Well, Netlify is free, fast, and easy. Enough said in my book.
All you need to make this work is (1) connect your GitHub account to Netlify, and (2) add a
netlify.toml file at the root of your theme repo. Here’s mine. And here’s an example:
[build] publish = "exampleSite/public" command = """hugo \ --source exampleSite \ --config exampleSite/config.toml \ --themesDir ../.. \ --theme repo \ --baseURL https://some-netlify-url.com""" [build.environment] HUGO_VERSION = "0.51"
- Instead of the usual
publicfolder for a regular site, you use the one from your example site
- When Netlify clones your git repo, it does this from the folder
/opt/build, then renames the git repo to
- Make sure you don’t have the
themeline set in your
exampleSite/config.toml, because it will conflict with the
--themeoption you pass in
And there you have it. Here’s the live demo.
If you just wanted to build your example site against your theme locally, navigate to the root of your theme folder, then run:
hugo server \ --source exampleSite \ --config exampleSite/config.toml \ --themesDir ../.. \ --theme <your-theme-repo-name>