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
- Hugo - Tutorial Part 1 - Create i18n multilingual site
i18n - Part 1 of 3 sequential tutorials for creating a Hugo multilingual website.
- Use free Bootstrap SVG Icons in Hugo
Integrate SVG icons with HTML and CSS/SCSS in Hugo
- ahrefs.com - free webmaster tools
Technical SEO support.
With the German language setting, comments are not displayed in the English version of the website and vice versa.