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 automatically be reloaded.

Free Resources

Attributions:

undefined by undefined