# Deploy your theme to Netlify

**URL:** <https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508>\
**Category:** tips & tricks\
**Created:** [November 27, 2018, 6:31am UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508 "2018-11-27T06:31:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [November 27, 2018, 6:31am UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/1 "2018-11-27T06:31:48Z")

</div>

## Netlify CI

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:

1. Make changes
2. Commit and push
3. Pull changes into my personal site, which uses the theme
4. Test to make sure I didn’t break anything
5. Commit pulled-in theme changes
6. 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](https://github.com/zwbetz-gh/minimal-bootstrap-hugo-theme/blob/master/netlify.toml). And here’s an example:

```auto
[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"

```

Some notes:

- Instead of the usual `public` folder 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 `repo`
- Make sure you don’t have the `theme` line set in your `exampleSite/config.toml`, because it will conflict with the `--theme` option you pass in

And there you have it. [Here’s the live demo](https://minimal-bootstrap-hugo-theme.netlify.com/).

## Local

If you just wanted to build your example site against your theme locally, navigate to the root of your theme folder, then run:

```nohighlight
hugo server \
--source exampleSite \
--config exampleSite/config.toml \
--themesDir ../.. \
--theme <your-theme-repo-name>

```

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [December 6, 2018, 9:15pm UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/2 "2018-12-06T21:15:12Z")

</div>

I do it a slightly different way so that local builds work too, and theme components also work.

- I don’t touch any of the Hugo CLI configs; I simply cd to the right dir and run `hugo`. [Here’s my netlify.toml](https://github.com/kaushalmodi/hugo-bare-min-theme/blob/master/netlify.toml).
- I then create a symlink to the theme in the exampleSite’s themes/ dir (similar to what you are doing with `themesDir` and `theme`). I create `exampleSite/themes`, cd to that dir and do `ln -s ../.. my-theme-name`, and I set `theme = "my-theme-name"` in `exampleSite/config.toml`.

* * *

With this in place, the same `cd exampleSite && hugo` works for local builds too.

* * *

> Make sure you don’t have the `theme` line set in your `exampleSite/config.toml` , because it will conflict with the `--theme` option you pass in

Yeah, there is something funky about setting theme in config vs the `-t` CLI option… I have [this unrelated `hugo` bug open around this topic](https://github.com/gohugoio/hugo/issues/4649).

---

<div class="post-metadata">

**Author:** ![JugglerX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jugglerx/32/8098_2.png) [@JugglerX](https://discourse.gohugo.io/u/JugglerX)\
**Post date:** [January 10, 2019, 8:31am UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/3 "2019-01-10T08:31:50Z")

</div>

This is wonderful, exactly what I was looking for. I’ve been maintaining 2 repos. One for the theme which includes the exampleSite and another for the live demo which contains a hugo root with the theme inside it.

It became annoying to deploy, and as I was copying the files from the live demo repo over into the theme repo I kept missing files.

I used the approach recommended by @zwbetz and it works great.

I can confirm even if you use --theme in the build command, if you have a `theme` key in your `exampleSite/config.toml` the Netlify deploy will fail.

You can see my repo here [https://github.com/JugglerX/hugo-hero-theme](https://github.com/JugglerX/hugo-hero-theme)

You can also run `hugo server --theme hugo-hero-theme` from the `exampleSite` folder on your local if that feels more intuitive.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [January 10, 2019, 1:29pm UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/4 "2019-01-10T13:29:27Z")

</div>

@JugglerX Am happy to hear it was helpful.

On my [2nd theme](https://github.com/zwbetz-gh/vanilla-bootstrap-hugo-theme), I use a setup more similar to @kaushalmodi’s.

```nohighlight
[build]
  publish = "exampleSite/public"
  command = "cd exampleSite && hugo --gc --themesDir ../.. -t repo --baseURL https://vanilla-bootstrap-hugo-theme.netlify.com/"

[build.environment]
  HUGO_VERSION = "0.53"

```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [January 12, 2019, 7:09pm UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/5 "2019-01-12T19:09:14Z")

</div>

Thanks to this [post](https://discourse.gohugo.io/t/unable-to-override-theme-config-variable-using-build-command/15808/5?u=zwbetz) by @anthonyfok, I can now override the theme specified in the [config file](https://github.com/zwbetz-gh/vanilla-bootstrap-hugo-theme/blob/master/exampleSite/config.toml) by setting the environment variable `HUGO_THEME` in `netlify.toml`

```auto
[build]
  publish = "exampleSite/public"
  command = "cd exampleSite && hugo --gc --themesDir ../.."

[build.environment]
  HUGO_VERSION = "0.53"
  HUGO_THEME = "repo"
  HUGO_BASEURL = "https://vanilla-bootstrap-hugo-theme.netlify.com/"

```

**Edit:** use `HUGO_BASEURL` env var per tip from @kaushalmodi

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [January 13, 2019, 12:39am UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/6 "2019-01-13T00:39:57Z")

</div>

> I can now override the theme specified in the config file by setting the environment variable HUGO\_THEME

Most (if not all) Hugo config variables behave that way. Simply upcase a Hugo config and prefix with “HUGO\_”, and you’ve got a valid env variable that you can use in lieu of that config variable.

So `baseURL` becomes `HUGO_BASEURL`, and so on.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [January 13, 2019, 12:59am UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/7 "2019-01-13T00:59:50Z")

</div>

Nice. That’s good to know.

---

<div class="post-metadata">

**Author:** ![mojoa](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@mojoa](https://discourse.gohugo.io/u/mojoa)\
**Post date:** [January 13, 2019, 1:19am UTC](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508/8 "2019-01-13T01:19:35Z")

</div>

Just wondering if the significance and usage of this feature are adequately captured in the following:

[https://gohugo.io/getting-started/configuration/#configure-with-environment-variables](https://gohugo.io/getting-started/configuration/#configure-with-environment-variables)

and

[https://github.com/gohugoio/hugoDocs/blob/master/netlify.toml](https://github.com/gohugoio/hugoDocs/blob/master/netlify.toml)

If so Great!!