Elmstatic now has a watch mode for better performance and live reload

As of v0.5.0, Elmstatic has a watch mode, which allows it to rebuild the site incrementally on source file changes (which is much faster if you have a substantial number of pages/posts).

It also makes live reload possible, which is of course quite convenient. Live reload can be achieved by using Elmstatic watch mode together with browser-sync (or another HTTP server that supports live reload):

  • Install browser-sync:
    $ npm install -g browser-sync
  • Run Elmstatic in watch mode in your site directory:
    $ elmstatic watch
  • Run browser-sync in the output directory (<site dir>/_site by default):
    $ cd _site
    $ browser-sync start --server --files "." --no-ui  --reload-delay 500 --reload-debounce 500

Now every time you save a file, Elmstatic will re-generate the site, and browser-sync will in turn reload the page.

If you want to know more about my experiments in improving performance, read the post.

5 Likes

Congratulations! The post was a nice read, it is always interesting to read what performance optimizations didn’t make a difference.

Did you look into multi process parallelism (cluster)? It can be tricky to get right but it seems like the domain of Elmstatic is amenable to parallelism and would be a big boost for big builds.

Thank you. I didn’t consider parallelism – I figured that incremental builds make more sense, and I still have scope to improve specific cases. However, Elmstatic still does an initial full build when it starts, so this is a good idea to improve startup time. I’ll make a note to look into it.