Step 1. Install Hugo
Goto hugo releases and download the appropriate version for your os and architecture.
Save it somewhere specific as we will be using it in the next step.
More complete instructions are available at installing hugo
Step 2. Build the Docs
Hugo has its own example site which happens to also be the documentation site you are reading right now.
Follow the following steps:
- Clone the hugo repository
- Go into the repo
- Run hugo in server mode and build the docs
- Open your browser to http://localhost:1313
Corresponding pseudo commands:
git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Press ctrl+c to stop
Once you’ve gotten here, follow along the rest of this page on your local build.
Step 3. Change the docs site
Stop the Hugo process by hitting ctrl+c.
Now we are going to run hugo again, but this time with hugo in watch mode.
/path/to/hugo/from/step/1/hugo server --source=./docs --watch
> 29 pages created
> 0 tags index created
> in 27 ms
> Web Server is available at http://localhost:1313
> Watching for changes in /Users/spf13/Code/hugo/docs/content
> Press ctrl+c to stop
Open your favorite editor and change one of the source content pages. How about changing this very file to fix the typo. How about changing this very file to fix the typo.
Content files are found in docs/content/
. Unless otherwise specified, files
are located at the same relative location as the url, in our case
docs/content/overview/quickstart.md
.
Change and save this file.. Notice what happened in your terminal.
> Change detected, rebuilding site
> 29 pages created
> 0 tags index created
> in 26 ms
Refresh the browser and observe that the typo is now fixed.
Notice how quick that was. Try to refresh the site before it’s finished building.. I double dare you. Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.
Step 4. Have fun
The best way to learn something is to play with it.
2 comments
Karunakar Patel
I was wondering what this is a staticman comment system used in this site. Can you please tell me how to integrate or embed staticman comment system in a simple HTML website? I don’t use any static site generators like Jekyll or Hugo. Thank you. Karunakar Patel Blog
Vincent Tam
Karunakar Patel
Sorry for late reply! Please consult me minimal Staticman + Jekyll example at https://git.io/smdemo, or even simpler https://gitlab.com/ntsim/test-staticman.
In my minimal Jekyll example, there’s not much Jekyll inside, since I don’t know much Jekyll or Hugo. Basically, you just replace the
{{ include **/*.html }}
by the HTML code in the corresponding template file.You may refer to Staticman’s docs for a sample HTML form. Bear in mind that the official docs are outdated though, because of missing instructions about the v3 API.