Hugo --bind Netzwerkzugriff auf den lokalen Entwicklungsrechner

Die Darstellung der Website kann sich durch unterschiedliche Betriebssysteme, Gerätegrößen und Browser verändern. Eine Kontrolle durch Vorschau auf unterschiedlichen Geräten, mit Zugriff auf den lokalen Hugo Entwicklungsrechner, verhindert fehlerhaftes Design.

Ist die neu entwickelte Website bei unterschiedlichen Geräten wirklich responsive? Zeigt der Browser auf einem anderen Betriebssystem das entwickelte Design auch so wie gewollt an? Hugo ermöglicht den externen Zugriff auf das Entwicklungssystem durch die optionale Startoption --bind. In der - Hugo Dokumentation - wird diese Option sehr kurz beschrieben.

Ziel

Mit anderen Betriebssystemen bzw. Gerätegrößen auf den eigenen Hugo Entwicklungsrechner - localhost - zugreifen und im Browser des Zielgerätes anzeigen. Dies kann sehr nützlich für das Anzeigen auf Smartphones und Tablets sein.

Google Chrome hat in der responsive Ansicht auch seine Grenzen. Parallax Hintergrundbilder werden in iOS auf dem iPad zum Beispiel nicht ohne Änderungen am Source angezeigt. In Google Chrome schon. Deshalb ist es sicherer mit entsprechenden Geräten auf den Entwicklungsrechner zuzugreifen. Aber auch Betriebssystem spezifische Eigenheiten in Bezug auf die eigene Website können so untersucht werden.

Voraussetzungen

• Zugriff auf unterschiedliche Geräte und Betriebssysteme.
• Entwicklungssystem und Zielgeräte müssen im gleiche WiFi-Netzwerk angemeldet sein.
• Die IP des Entwicklungssystems muss festgestellt werden. Unter macOS kann man das zum Beispiel in den Systemeinstellungen | Netzwerk anzeigen. In der Statusanzeige steht die eigene lokale IP-Adresse. Unter Windows stellt man die eigene IP mit dem CLI-Programm ipconfig fest.
• Beim Starten von Hugo muss die IP-Adresse des Entwicklungssystem 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.
• macOS fragt beim ersten, externen Zugriff: „Möchtest du, dass das Programm hugo eingehende Netzwerkverbindungen akzeptiert?“ - Mit Erlauben beantworten.
• Auf dem Zielgerät muss im Browser die IP-Adresse des Entwicklungssystems plus Port in der URL eingegeben werden:
  
  http://192.168.188.20:1313

Ergebnis

Ganz unterschiedliche Zielgeräte können im lokalen WiFi-Netzwerk auf die „Website in Entwicklung - localhost“ zugreifen. Das Design kann so in unterschiedlichen Browsern, Geräten und Betriebssystemen kontrolliert werden.

Linkliste zu diesem Beitrag