Hugo --bind Netzwerkzugriff auf den lokalen Entwicklungsrechner

Die Darstellung der Website kann je nach Betriebssystem, Gerätegröße und Browser variieren. Eine Vorschau auf verschiedenen Geräten mit Zugriff auf den lokalen Hugo-Entwicklungsrechner vermeidet Designfehler.

Beitrag aktualisiert am 19.06.2023

Der Inhalt wurde etwas überarbeitet und das Header-Bild ausgetauscht.

Fragen zum Design auf verschiedenen Geräten

• Ist die neu entwickelte Website auf verschiedenen Geräten wirklich responsiv?
• Zeigt der Browser auch auf einem anderen Betriebssystem das entwickelte Design wie gewünscht an?
• Wird für Bilder die gerätespezifisch richtige Bildschirmauflösung verwendet?

Hugo ermöglicht den externen Zugriff auf das Entwicklungssystem durch die optionale Startoption --bind. In der - Hugo Dokumentation - hugo server - ist diese Option kurz beschrieben.

Ziel

Zugriff auf den eigenen “Hugo-Entwicklungsrechner - localhost” für andere Betriebssysteme oder Gerätegrößen und Anzeige im Browser des Zielgeräts. Dies kann für die Darstellung auf Smartphones und Tablets sehr nützlich sein.

Auch Google Chrome hat seine Grenzen in der responsiven Darstellung. Parallax-Hintergrundbilder werden z.B. unter iPadOS auf dem iPad nicht ohne Änderungen an der Quelle angezeigt. In Google Chrome schon. Daher ist es sicherer, mit entsprechenden Geräten auf den Entwicklungsrechner zuzugreifen. Aber auch betriebssystemspezifische Eigenheiten der eigenen Website können so untersucht werden.

Voraussetzungen

• Zugriff auf unterschiedliche Geräte und Betriebssysteme.
• Das Entwicklungssystem und die Zielgeräte müssen mit demselben WiFi-Netzwerk verbunden sein.
• Die IP des Entwicklungssystems muss bekannt sein. Unter macOS kann diese z.B. in den Systemeinstellungen | Netzwerk | WLAN | Details angezeigt werden. Unter Windows ermittelt man die eigene IP mit dem CLI-Programm ipconfig.
• Beim Start von Hugo muss die IP-Adresse des Entwicklungssystems wie folgt übergeben werden:
  
  hugo server -D --bind=0.0.0.0 --baseURL=http://192.168.188.20
  
  Damit wird Hugo angewiesen, eingehende Netzwerkverbindungen zu akzeptieren.
• Auf dem Zielgerät muss im Browser die IP-Adresse des Entwicklungssystems plus Port in die URL eingegeben werden:
  
  http://192.168.188.20:1313/
• macOS fragt beim ersten Zugriff von außen: „Möchtest du, dass das Programm hugo eingehende Netzwerkverbindungen akzeptiert?“ - Mit Erlauben beantworten.

Fazit

Verschiedene Zielgeräte können auf die „Website in Entwicklung - localhost“ im lokalen WiFi-Netzwerk zugreifen. So kann das Design in verschiedenen Browsern, Geräten und Betriebssystemen kontrolliert werden.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren