mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
75 lines
2.2 KiB
Markdown
75 lines
2.2 KiB
Markdown
---
|
||
lastmod: 2016-08-09
|
||
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:
|
||
|
||
{{< nohighlight >}}$ hugo server
|
||
{{< /nohighlight >}}
|
||
|
||
This will run a full functioning web server while simultaneously
|
||
watching your file system for additions, deletions or changes within
|
||
your:
|
||
|
||
* static files
|
||
* content
|
||
* data files
|
||
* layouts
|
||
* current theme
|
||
* configuration files
|
||
|
||
Whenever anything changes, Hugo will rebuild the site while continuing to serve
|
||
the content. 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 Watch
|
||
|
||
If for some reason you don't want the Hugo server's watch functionality,
|
||
just do:
|
||
|
||
{{< nohighlight >}}$ hugo server --watch=false
|
||
{{< /nohighlight >}}
|
||
|
||
## Disabling LiveReload
|
||
|
||
LiveReload works by injecting JavaScript into the pages Hugo generates,
|
||
which creates a connection from the browser 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` in production to
|
||
instantly display any updated content, we’ve made it easy to disable the
|
||
LiveReload functionality:
|
||
|
||
{{< nohighlight >}}$ hugo server --disableLiveReload
|
||
{{< /nohighlight >}}
|
||
|
||
## Notes
|
||
|
||
You must have a closing `</body>` tag for LiveReload to work.
|
||
Hugo injects the LiveReload `<script>` before this tag.
|