I’m currently developing two themes (three including this) with Hugo.
When developing Kirby themes, I could just use CodeKit’s Browser Refreshing feature by setting External Server to my development address, mostly a .dev URL provided by Valet.

However, with Hugo, thing are a little different. Even though my Hugo sites are one-off and do not require a theme, I develop them as themes so I can seperate templates and content.

├── content
├── public
│   ├── css // style.css is copied here, from themes/static/css
└── themes
    └── minimalblog
        ├── dev
        │   └── scss // style.scss is here
        └── static
            └── css // style.css is compiled here

Basically, this is what happens: I write my SCSS code in themes/minimalblog/dev/scss/style.scss file, and it CodeKit compiles it into themes/minimalblog/static/css/style.css. When Hugo is run, it copies that file to public/css/style.css.

Hugo has a “server” and feature, that also watches for changes in the directory and automatically refreshes them. When combined with hugo server, it allows you to make changes and watch the changes in browser instantly. However, with CodeKit syncing, Hugo gets a little confused and the result you see is not optimal:

Syncing /css/style.css to /

This is because Hugo renders to and serves from memory, but CodeKit compiles to disk. Fortunately, a simple addition of --renderToDisk makes Hugo write changes to the disk and serve from there instead.

Syncing /css/style.css to /Users/cemk/Sites/hugo/devlog/public/

Make it Global

The server feature binds to 127.0.0.1, making the site only reachable from that machine. To reach it from your phones and tablets and other devices is also a simple fix:-bind 0.0.0.0

The final command becomes this:

$ hugo server --renderToDisk --bind 0.0.0.0