Will Murphy's personal home page

Serving Hugo Site to Local Network

This blog is built with hugo. When I’m working on draft posts, I like to run hugo server so that I can see how they look in a browser right away. Recently, I’ve started modifying the hugo server command to make the post also readable from other devices on my home WiFi network. Having other devices means I can read posts from a phone before they’re published, which helps in two ways: I can make sure things look OK on phone screens, and I can then text the link to my wife so that she can read it when she has a chance; her feedback is super valuable, and letting her read the unpublished posts on her own phone makes getting this valuable feedback easier.

If you’e in a hurry and just want the answer to “how to do this”, here it is. I’ll talk about how it works more below.

#!/usr/bin/env bash

LAN_IP_ADDR=$(ipconfig getifaddr en0)
PORT="1313"
BASE_URL="http://${LAN_IP_ADDR}:${PORT}"

hugo server --buildDrafts --buildFuture --bind "${LAN_IP_ADDR}" \
--port ${PORT} --baseURL "${BASE_URL}" 

By default, hugo server binds to localhost, AKA 127.0.01. This default config makes sense, but it doesn’t allow computers besides the one running hugo server to browse see the content. In order to solve this problem I need to do two things:

  1. Learn the IP address of my laptop on the local network.
  2. Tell hugo to bind to this IP address, instead of to localhost.

I always had to look up the command to get by current computer’s IP address on the local network, which is why I wrote the above script.

As an aside, If you google, “what’s my IP?”, you’ll get the answer, but it will be what Google sees as your client IP address when you hit their servers, which is not the same as your IP address on your local network. (I think it’s the internet-facing IP address of your router, but I’m not sure). For example, right now, if I search “what’s my IP”, DuckDuckGo says, 174.73.71.152, but if I run ipconfig getifaddr en0, I get 100.80.29.182 (here at my favorite coffee shop). I also need to pick a port number, but I’ve had good luck just using 1313, which is hugo’s default for some reason.

So that would give me the command hugo server --bind $(ipconfig getifaddr en0) --port 1313. However, when running this command, I noticed some inconsistencies in formatting. It turns out that hugo has a baseURL in its config.toml that can sometimes be written into absolute links. That led me to add the --baseURL option. This keeps hugo from mixing links between my local IP and https://willmurphy.me.

The other two flags I pass to hugo are --buildDrafts and --buildFuture. These flags tell hugo to serve pages that are marked as drafts, or whose publication dates are in the future. Having posts that aren’t live yet is great, because it lets me commit a draft to version control without immediately publishing it.

Feel free to use the script above to serve your locally-built hugo site on your LAN so you can see how it looks on your phone or share it with guests!

Till next time, happy learning!
– Will

Comments

Note: recently submitted comments may not be visible yet; the approval process is manual. Please be patient, and check back soon!

Join the conversation!