Live-reloading CSS on static sites

Option 1: live-server https://github.com/tapio/live-server Run live-server, which runs a NodeJS web server with load-reload capabalities via websockets.

npm install -g live-server
cd <website-dir>
live-server

Option 2, for Hugo sites: fingerprint the CSS files https://discourse.gohugo.io/t/live-reloading-during-development/37132

Add the content’s hash to the CSS filename to work around the browser cache.

{{ $style := resources.Get "css/style.css" | minify | fingerprint }}
<link rel="stylesheet" type="text/css" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media='all' />

Option 3, when using VSCode: install the Live Preview extension https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server