Hugo --bind Network access to the local development computer

The display of the website may change due to different operating systems, device sizes and browsers. Checking by previewing on different devices, with access to the local Hugo development computer, prevents faulty design.

Is the newly developed website really responsive on different devices? Does the browser on a different operating system also display the developed design as intended? Hugo allows external access to the development system through the optional start option --bind. The - Hugo Documentation - describes this option very briefly.

Goal

Access the own Hugo development computer - localhost - with other operating systems or device sizes and display it in the browser of the target device. This can be very useful for viewing on smartphones and tablets.

Google Chrome also has its limitations in responsive viewing. Parallax background images, for example, will not display in iOS on the iPad without changes to the source. In Google Chrome they do. Therefore, it is safer to access the development computer with appropriate devices. But operating system-specific peculiarities in relation to one’s own website can also be examined in this way.

Requirements

• Access to different devices and operating systems.
• Development system and target devices must be logged into the same WiFi network.
• The IP of the development system must be determined. Under macOS, for example, this can be displayed in System Preferences | Network. The status display shows your own local IP address. Under Windows, you can determine your own IP with the CLI programme ipconfig.
• When starting Hugo, the IP address of the development system must be transferred as follows:
  
  hugo server -D --bind=0.0.0.0 --baseURL=http://192.168.188.20
  
  This tells Hugo to accept incoming network connections.
• macOS asks on first, external access: "Do you want the hugo program to accept incoming network connections?" - Answer with Allow.
• On the target device, the IP address of the development system plus port must be entered in the URL in the browser:
  
  http://192.168.188.20:1313

Result

Completely different target devices can access the “website in development - localhost” in the local WiFi network. The design can thus be controlled in different browsers, devices and operating systems.

Link list to this article