Do you find it too difficult to install Go or Hugo in Windows for your static site development? Have you tried Windows Subsystem for Linux (WSL) 2? Using a default Ubuntu 20.04, it is pretty easy to install Hugo, set up your development environment and configure Hugo to listen on your Ubuntu's IP address instead of localhost / 127.0.0.1. This makes your Hugo development site accessible for browsers in Windows 10. Neat, right?
About Hugo
The world's fastest framework for building websites: Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Set up a Hugo development environment in WSL
If you don't want to install a Windows variant of Hugo and GO runtime in your Windows 10 system, and don't want to use a precompiled binary, then you can easily use your favorite Linux flavor in WSL for this.
For all this, let's assume you have some basic understanding of Windows 10, Windows Subsystem for Linux (WSL) 2 and Ubuntu (Bash). Now we start by installing Hugo in Ubuntu using apt:
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install hugo
And verify Hugo is installed correctly:
$ hugo version
Hugo Static Site Generator v0.68.3/extended linux/amd64 BuildDate: 2020-03-25T06:15:45Z
In my test (I plan to convert a WordPress site to Hugo later), I created a new site in ~/example.com:
$ hugo new site example.com
Congratulations! Your new Hugo site is created in /home/janreilink/example.com.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
Ok, now we can start the built-in live server: hugo server. This gives some warnings, let's ignore them for now:
~/example.com$ hugo server
Building sites … WARN 2020/07/25 16:00:33 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/07/25 16:00:33 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2020/07/25 16:00:33 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
| EN
-------------------+-----
Pages | 3
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 4 ms
Watching for changes in /home/janreilink/example.com/{archetypes,content,data,layouts,static}
Watching for config changes in /home/janreilink/example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Hmm, the web server is accessible at http://localhost:1313/. I can't access that in my Windows 10's browser (Chrome, Firefox, Edge). Fortunately, you can start the server to listen on an IP address and host name. To make this happen you first run /sbin/ifconfig to find out the IP address of your WSL 2 Ubuntu host.
Next you use the IP address as bind address and baseURL parameters:
~/example.com$ hugo help server
...
Flags:
...
-b, --baseURL string hostname (and path) to the root, e.g. http://spf13.com/
...
--bind string interface to which the server will bind (default "127.0.0.1")
...
...
~/example.com$ hugo server --bind 172.21.159.181 --baseURL=http://172.21.159.181
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 6
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 14 ms
Watching for changes in /home/janreilink/example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/janreilink/example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://172.21.159.181:1313/ (bind address 172.21.159.181)
Press Ctrl+C to stop
Et voilà you can now preview your sites, which you edit in WSL/Ubuntu, in your favorite browser on Windows 10:
Downside is that next time you start WSL, you probably have a different IP address. You can slightly automate this by using a naked variable assignment in bash:
~/example.com$ IPADDRESS=$(ip addr show eth0 | grep "inet\b" | awk '{print $2}' | cut -d/ -f1)
~/example.com$ echo $IPADDRESS
172.21.159.181
~/example.com$ hugo server --bind $IPADDRESS --baseURL=http://$IPADDRESS
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 6
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 16 ms
Watching for changes in /home/janreilink/example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/janreilink/example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://172.21.159.181:1313/ (bind address 172.21.159.181)
Press Ctrl+C to stop
Psst, did you know Mattias Geniar has a step-by-step guide on migrating from WordPress to Hugo.
Using Themes in Hugo
If you want to take it a bit further and start using a theme from GitHub, here is how. I use Airspace Hugo as an example.
First you need to download the repo, use git for this:
$ git clone https://github.com/themefisher/airspace-hugo.git
Cloning into 'airspace-hugo'...
remote: Enumerating objects: 1201, done.
remote: Total 1201 (delta 0), reused 0 (delta 0), pack-reused 1201
Receiving objects: 100% (1201/1201), 12.88 MiB | 9.88 MiB/s, done.
Resolving deltas: 100% (494/494), done.
Now enter the theme and exampleSite directory, and start your hugo server, listening on your WSL IP address:
$ cd airspace-hugo/exampleSite/
~/airspace-hugo/exampleSite$ IPADDRESS=$(ip addr show eth0 | grep "inet\b" | awk '{print $2}' | cut -d/ -f1)
~/airspace-hugo/exampleSite$ hugo server --themesDir ../.. --bind $IPADDRESS --baseURL=http://$IPADDRESS
| EN | FR
-------------------+----+-----
Pages | 59 | 59
Paginator pages | 2 | 2
Non-page files | 0 | 0
Static files | 47 | 47
Processed images | 0 | 0
Aliases | 16 | 15
Sitemaps | 2 | 1
Cleaned | 0 | 0
Built in 133 ms
Watching for changes in /home/janreilink/airspace-hugo/{assets,exampleSite,layouts,static}
Watching for config changes in /home/janreilink/airspace-hugo/exampleSite/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://172.21.149.84:1313/ (bind address 172.21.149.84)
Press Ctrl+C to stop
Using Windows 10 and Visual Studio Code, you can even edit and add files remotely. All that is required is the Remote - WSL extension. Start editing by typing in your Bash shell: code config.toml.
I hope this post helped you in setting up an not-so-standard (but fun) development environment for your static site created in Hugo. This was how to install and configure Hugo for static site development in WSL on Windows 10.
Protip:
Add this to ~/bin (use vi or nano to create a file named ipaddr)
$ vi ~/bin/ipaddr
#!/bin/bash
IPADDRESS=$(ip addr show eth0|grep "inet\b"|awk '{print $2}'|cut -d/ -f1)
echo $IPADDRESS
save then
$ chmod +x ~/bin/ipaddr
now you can just...
$ hugo serve –bind `ipaddr` -D
And did you know WSL2 supports IPv6 now?!