Access Hugo Local PC server from other devices via LAN

Bind local IP address with hugo when executing “hugo server” command

Table of Contents

Introduction


I’ll introduce you how to bind hugo with your PC’s local IP address. It will become possible for us to access from other devices to your PC’s hugo server.

In addition I’ve written small shell script to make it easy, and I’ll share it in this blog.

Motivation


When I build hugo server on my PC, I want to access other devices such as smartphone. On developing phase, I want to check on some devices and browser whether my website appearance is good or not.

Of course we can check them using developers tool which is provided by browser, such a Chrome. But I want to check them actually on real devices. So I did some research.

Environment


  • Hugo v0.71.0
  • Windows 10
    • You need the bash with Git for Windows.
    • If you only check local IP address, you only need command prompt.
  • Mac (Catalina)
  • You can access hugo server PC through LAN.
    • You can’t use this method on Public network.

The command to build localhost server


You build hugo server as a localhost when you execute the command in the hugo project directory as below. Then you can access hugo’s site via “http://localhost:1313". (“1313” is a port number which is defined default by hugo.)

# build normally
$ hugo server

# include content marked as draft
$ hugo server -D

But we can only access this site from the PC which execute this command. Because hugo bind “127.0.0.1” as a local loop back address. It is used to access the network services that are running on the host via the loopback network interface.

Bind local IP address with hugo


Check the PC’s local IP address

We need to bind other local IP address instead of localhost. Hugo provided the way of binding other local IP address as hugo server command option. By using this option, we can access hugo server which is built for PC from other devices such a smartphone via LAN.

We can check PC’s IP address by using ipconfig(for Windows command) or ifconfig(for Mac/Linux command) commands.

  • Result of ipconfig command / We use the part of “IPv4 Address”.

    $ ipconfig
    Windows IP Configuration
    
    Ethernet adapter XXXXXXXXXXXXXX:
    
    Connection-specific DNS Suffix  . : XXXXXXXXXXXXX
    IPv6 Address. . . . . . . . . . . : aaaa:bbbb:cccc:dddd:ffff:0000:1111:2222
    Temporary IPv6 Address. . . . . . : aaaa:bbbb:cccc:dddd:ffff:0000:1111:2222
    Link-local IPv6 Address . . . . . : eeee::ffff:cccc:1111:0000%5
    IPv4 Address. . . . . . . . . . . : 192.168.X.Y
    Subnet Mask . . . . . . . . . . . : 255.255.255.0
    Default Gateway . . . . . . . . . : ffff::1111:ffff:0000%5
                                       192.168.1.1
    
  • Result of ifconfig command / We extract “inet” parts by using grep command.

    $ ifconfig | grep inet\ 
    	inet 127.0.0.1 netmask 0xff000000 
    	inet 192.168.1.8 netmask 0xffffff00 broadcast 192.168.AAA.BBB
    

Specify URL with the IP address to baseURL option

When we bind hugo server with private IP address, we also have to specify “–baseURL” option as below. Then you can access localize page correctly.

# 192.168.X.Y is different depend on your PC.
$ hugo server [-D or -F] --bind 192.168.X.Y --baseURL http://192.168.X.Y

At last, we can access hugo server which is built on PC from another devices such as Android or iOS via LAN using “http://19.168.X.Y:1313" address.

Takes it easy to set local IP address using shell script


We are able to access there using private IP address. But private IP address is assigned automatically by router, and private IP address number is not always same when it was assigned before. So we have to check it every time, but it is very tedious. There is the way to fix private IP address number, but it is also tedious to input IP address number manually.

Therefore I wrote small shell script to make it easy to execute it. And this shell script enable us to specify draft option “-D”.

Shell script for Windows(Git for Windows)

As I use Git for Windows, I used “ipconfig” command to get private IP address.

In this shell script, I just extract the part of “IPV4 Address” using awk command. You can use the below shell script as is on your environment.

#!/usr/bin/env bash -xe

# use can boot hugo server sh command as below
# sh bootlocal_win.sh [optional:-D or -F]

# -D(draft / default) or -F(Feature)
development=${1:-"-D"}

# extract local ip addr / Git for Windows only
local_ip=$(ipconfig | grep IPv4\ Address | awk '{print substr($0, index($0, "1"))}')
echo ""
echo "Use this Addr"
echo "http://${local_ip}:1313/"
echo ""

# boot hugo
hugo server ${development} --bind ${local_ip} --baseURL http://${local_ip} --gc

You save this shell script in your hugo project, and execute it.

$ cd [your_hugo_project]
$ sh win_boot.sh [-D or -F]

Shell script for Mac/Linux

Above shell script is also able to use for Mac/Linux environment. I just change the command “ipconfig” command to “ifconfig” command, and using cut command for extracting the part of “inet”.

#!/usr/bin/env bash -xe

# use can boot hugo server sh command as below
# sh bootlocal_win.sh [optional:-D or -F]

# -D(draft / default) or -F(Feature)
development=${1:-"-D"}

# extract local ip addr / mac only
local_ip=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | cut -d\  -f2)
echo ""
echo "Use this Addr"
echo "http://${local_ip}:1313/"
echo ""

# boot hugo
hugo server ${development} --bind ${local_ip} --baseURL http://${local_ip} --gc

You also save this shell script in your hugo project, and execute it.

$ cd [your_hugo_project]
$ sh mac_boot.sh [-D or -F]
ytmt
ytmt
Game Programmer
Build Engineer

I’m a Game Programmer. In my work, I often use Unity3D Engine with C#/C++ to develop game app.

Next
Previous

Related