hugo/docs/content/extras/livereload.md

---
date: 2014-05-26
menu:
  main:
    parent: extras
next: /extras/menus
prev: /extras/crossreferences
title: LiveReload
weight: 50
---

Hugo may not be the first static site generator to utilize LiveReload
technology, but it’s the first to do it right.

The combination of Hugo’s insane build speed and LiveReload make
crafting your content pure joy. Virtually instantly after you hit save
your rebuilt content will appear in your browser.

## Using LiveReload

Hugo comes with LiveReload built in. There are no additional packages to
install. A common way to use Hugo while developing a site is to have
Hugo run a server and watch for changes:

    $ hugo server --watch

This will run a full functioning web server while simultaneously
watching your file system for additions, deletions or changes within
your:

 * static files
 * content
 * layouts
 * current theme

Whenever anything changes Hugo will rebuild the site, continue to serve
the content and as soon as the build is finished it will tell the
browser and silently reload the page. Because most hugo builds are so
fast they are barely noticeable, you merely need to glance at your open
browser and you will see the change already there.

This means that keeping the site open on a second monitor (or another
half of your current monitor) allows you to see exactly what your
content looks like without even leaving your text editor.

## Disabling LiveReload

LiveReload works by injecting JavaScript into the pages it
creates that creates a web socket client to the hugo web socket server.

Awesome for development, but not something you would want to do in
production. Since many people use `hugo server --watch` in production to
instantly display any updated content, we’ve made it easy to disable the
LiveReload functionality.

    $ hugo server --watch --disableLiveReload
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								---
-												Converting front matter to YAML

											
										
										
											2014-05-29 22:42:05 +00:00
+								date: 2014-05-26
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								menu:
 								  main:
-												Converting front matter to YAML

											
										
										
											2014-05-29 22:42:05 +00:00
+								    parent: extras
 								next: /extras/menus
-												Documentation for `ref` and `relref`.

- Rejigged the weight of the extras/ content for the new crossreferences
  page.
- Used the new {{</*…*/>}} format for documenting highlighting and to
  prevent a warning about the missing `fig` shortcode.

											
										
										
											2014-11-25 08:07:18 +00:00
+								prev: /extras/crossreferences
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								title: LiveReload
-												Documentation for `ref` and `relref`.

- Rejigged the weight of the extras/ content for the new crossreferences
  page.
- Used the new {{</*…*/>}} format for documenting highlighting and to
  prevent a warning about the missing `fig` shortcode.

											
										
										
											2014-11-25 08:07:18 +00:00
+								weight: 50
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								---
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								Hugo may not be the first static site generator to utilize LiveReload
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								technology, but it’s the first to do it right.
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								The combination of Hugo’s insane build speed and LiveReload make
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								crafting your content pure joy. Virtually instantly after you hit save
 								your rebuilt content will appear in your browser.
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								## Using LiveReload
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								Hugo comes with LiveReload built in. There are no additional packages to
 								install. A common way to use Hugo while developing a site is to have
 								Hugo run a server and watch for changes:
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								    $ hugo server --watch
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
 								This will run a full functioning web server while simultaneously
 								watching your file system for additions, deletions or changes within
 								your:
 								 * static files
 								 * content
 								 * layouts
 								 * current theme
 								Whenever anything changes Hugo will rebuild the site, continue to serve
 								the content and as soon as the build is finished it will tell the
 								browser and silently reload the page. Because most hugo builds are so
 								fast they are barely noticeable, you merely need to glance at your open
 								browser and you will see the change already there.
 								This means that keeping the site open on a second monitor (or another
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								half of your current monitor) allows you to see exactly what your
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								content looks like without even leaving your text editor.
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								## Disabling LiveReload
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								LiveReload works by injecting JavaScript into the pages it
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
+								creates that creates a web socket client to the hugo web socket server.
 								Awesome for development, but not something you would want to do in
 								production. Since many people use `hugo server --watch` in production to
 								instantly display any updated content, we’ve made it easy to disable the
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								LiveReload functionality.
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00
-												Some more random copyediting of Hugo docs

 - Change "livereload" and "live reload" to "LiveReload";
 - Add a `$ ` prompt before example command lines
   (not exhaustive, work in progress);
 - Remove unnecessary whitespace from partials;
 - Revise the blackfriday options table in overview/configuration.md
   to make it narrower.
 - Manually set the language for highlight.js where appropriate
 - Rename "404" to "Custom 404 page", and remove incorrect reference
   to "homepage"
 - Credit the author of tutorials/github_pages_blog.md
   (Similar notes are necessary for other contributed pages where
    "I" am not spf13 to avoid reader confusion.)
 - Add CSS for `kbd` and `table` etc. to css/style.css;
 - etc.

											
										
										
											2015-01-09 18:51:15 +00:00
+								    $ hugo server --watch --disableLiveReload
-												Updating / Rewriting / Adding all of the documentation in preparation for the next release

											
										
										
											2014-05-27 22:32:57 +00:00