April 29, 2020

How to add live reload to a static page

Speed up dev time with live reload on vanilla static sites

If you’re working on a static page with no framework whatsoever, you probably don’t have live reload by default. Learn how to integrate this power to your site in no time.

Create your static folder with the good old basic structure

$ mkdir static
$ cd static
$ touch index.html
$ touch styles.css
$ touch script.js

Write a basic HTML. Live reload won’t work if you don’t have a <head> tag

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Hello Mars</title>
  <meta name="description" content="Hello Mars">
  <meta name="author" content="Carlos Roso">

  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <script src="scripts.js"></script>
</body>
</html>

Install live-server globally.

$ npm i -g live-server

Run live-server in the root of your html file

$ cd static
$ live-server

This will open up the browser. Double check that you have the message Live reload enabled. printed in the console.

That’s it. Now you can save changes and the browser will be automatically reloaded.

I'm Carlos Roso. I'm a Production Engineer at Meta. Former SDE at Amazon. Ex digital nomad at Toptal and Crossover. In love with open source and design.

More about me