How to test the Mobile Version of your Hugo website

A long time ago in a galaxy far, far away…

This post is over 12 months old and Hugo is evolving. Please be mindful of that when reading this post, young Padawan, as it could be outdated. I try to keep things up to date as much as possible. If you think something needs updating, please let me know in the comments.

Introduction

In the past, I have had discovered a few quirks with my site that has only affected on mobile. I decided to look into whether I could get the site to run on my local network and then access it from my phone. This would allow me to test the mobile version of the site before pushing it remotely.

Side note, it is possible to use developer tools in the browser to simulate mobile devices, but I wanted to see how the site looked on my actual phone.

Credit to zwbetz

I had a quick google of how to do this and found this article at zwbetz.com. This gave me the idea to construct a mobile-specific config file and inject the IP address prior to running the site.

Set up config file

Hugo deals with environment-specific config by loading config files found in _default directory, then from the environment directory you pass in to the hugo command. It will overwrite settings from the _default folder with the values found in the environment directory. A quick example to explain…

Supposing I have two config files, one in _default/hugo.toml and one in mobile/hugo.toml. The contents of those two files look like this;

_default/hugo.toml

## _default/hugo.toml
param1 = "foo"
param2 = "bar"
param3 = "baz"

mobile/hugo.toml

## mobile/hugo.toml
param3 = "qux"

Observe that mobile/hugo.toml has just one parameter, and it is different to the value held in _default/hugo.toml. I run the command “hugo server” the values loaded will be:

param1 = "foo"
param2 = "bar"
param3 = "baz"

However, if I run the command hugo server --environment mobile the values loaded will be:

param1 = "foo"
param2 = "bar"
param3 = "qux"

The _default/hugo.toml file is loaded first, then the mobile/hugo.toml file is loaded and overwrites the value of param3.

Create script

Considering this behaviour, I have created a powershell script that detects the IP address of the machine and then injects it into the mobile config file. It then runs hugo under the mobile environment, which will set the machine’s IP address in the config.

# get IP address and set URL
$ip = (ipconfig getifaddr en1)
# construct the URL
$url = "http://${ip}"
# set the baseURL in the hugo.toml for mobile
(Get-Content ./config/mobile/hugo.toml) -replace 'http:\/\/[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}', $url | Out-File ./config/mobile/hugo.toml
# run hugo for mobile
hugo server --environment mobile --bind 0.0.0.0 --baseURL $url

The script runs a command to get the IP address of the Wi-Fi connection, and constructs the URL. The script then loads the contents of the mobile config file, replaces the URL value in the file using regex with the new URL and then saves the updated config back to the file. Finally, it runs hugo with the mobile config.

Testing on mobile

Final step is to observe the message returned by Hugo when it starts up. It will tell you the URL it is running on.

                   | EN   
-------------------+------
  Pages            | 180  
  Paginator pages  |   9  
  Non-page files   |   0  
  Static files     | 388  
  Processed images |   0  
  Aliases          |  55  
  Sitemaps         |   1  
  Cleaned          |   0  

Built in 977 ms
Environment: "mobile"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://192.168.68.106:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

In my case, it is running on the address http://192.168.68.106:1313 which I can then enter into my phone’s browser and voila! I can now test the mobile version of my site before pushing it to the remote server.

Note here, if you know your machine name you can can simply use that instead of the IP address making sure you include the port number.