Solved: Customizing the directories that hugo server watches

I’m making the move from using browser-sync to hugo server for my dev environment. Every change I make to a file that hugo knows about (content, layouts, data, static) livereload kicks in and reloads the page.

Hugo’s output in the terminal makes it clear why this is happening:
Watching for changes in ...site/{data,content,layouts,static}

When I change a file that is outside of hugo’s purview I don’t get a reload. For example, when I want to process JavaScript or SCSS with browserify/node-sass and write the result to a dist directory I still want livereload to kick in.

Is there anyway to tell hugo server to livereload if it detects a change in my destination directory dist?

Here’s the full command (I’m rendering to disk rather than running from memory):

hugo server --config site/config.dev.yml -p 3000 --renderToDisk -s site --navigateToChanged

Here’s config.dev.yml:

title: "Southeast Region | U.S. Fish and Wildlife Service"

baseUrl: "http://127.0.0.1:3000/"

watch: true
buildDrafts: true
buildFuture: true
source: site
contentDir: content
dataDir: data
layoutDir: layouts
staticDir: static
publishDir: '../dist'

MetaDataFormat: yaml
pluralizelisttitles: false
canonifyurls: true

I don’t think so.

You could write your processed files to static. It gets copied over directly, so it is probably straightforward to output the same path.

1 Like

Great suggestion.

I made the move to writing all of my generated files to the static folder and serving from memory. Things are quite snappy now!

1 Like