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:
- Learn the IP address of my laptop on the local network.
- 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
Love this post? Hate it? Is someone wrong on the internet? Is it me? Please feel free to @me on mastodon
I used to host comments on the blog, but have recently stopped. Previously posted comments will still appear, but for new ones please use the mastodon link above.
Discussion