Hugo --bind Network access to the local development computer

The display of the website may vary depending on the operating system, device size and browser. Previewing on different devices with access to the local Hugo development computer avoids design errors.

Post updated on June 19, 2023

The content has been revised somewhat and the header image has been replaced.

Questions about the design on different devices

• Is the newly developed website really responsive on different devices?
• Does the browser also display the developed design as desired on a different operating system?
• Is the correct device-specific screen resolution used for images?

Hugo enables external access to the development system through the optional start option --bind. In the - Hugo documentation - hugo server - this option is briefly described.

Target

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

Google Chrome also has its limitations in responsive display. Parallax background images, for example, do not display under iPadOS 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 of one’s own website can also be examined in this way.

Requirements

• Access to different devices and operating systems.
• The development system and the target devices must be connected to the same WiFi network.
• The IP of the development system must be known. Under macOS, this can be displayed, for example, in the System Preferences | Network | WLAN | Details. Under Windows, one determines one's own IP with the CLI programme ipconfig.
• When Hugo is started, the IP address of the development system must be passed as follows:
  
  hugo server -D --bind=0.0.0.0 --baseURL=http://192.168.188.20
  
  This tells Hugo to accept incoming network connections.
• 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/
• macOS asks on first access from outside: "Do you want the hugo program to accept incoming network connections?" - Answer with Allow.

Conclusion

Different target devices can access the “Website in development - localhost” on the local WiFi network. This allows the design to be controlled in different browsers, devices and operating systems.

Link list to this article

This might also interest you