I understand that Hugo is a static site builder and thus generates pre-rendered HTML files. But I don’t understand how the server side works when a Hugo site is deployed. I have deployed my site to Netlify and it works great, but how do pretty URLs work?
E.g., how is a request to mysite/posts/a-pretty-url actually mapped to the file /a-pretty-url/index.html?
Also I noticed that if I hit a page that has no file, I get a nice 404 page, but how does the Netlify webserver know how to do that? Seems like some non-static things are also happening.
What you are looking for has nothing to do with hugo but with how a webserver works. Netlify and co have all a webserver running which serves your files.
Quick rundown about the function of webservers:
- Check whether the request url points to a folder/file. In your example your url points to
a-pretty-url which happens to be a folder inside of the webroot of the website. This rule has it’s exceptions for example when you’re using PHP as it’s possible to rewrite rules
- If it’s a folder, check for a default file inside of it otherwise serve the requested file.The name of the default file is configurable but defaults to index.html/index.php.
- If nothing can be found at the requested path, then send a error header to the browser and show an error message. This can also be configured to be a nice site or something else
Note that this is a really basic rundown, normally there are way more things which happen when a url is requested. I wanted to keep things simple because it’s offtopic. For more information please check the documentation for the webserver. The most common webservers are Apache and Nginx.
Thanks for the response. Is it a webserver standard to request a folder and automatically serve the index.html below that folder?
I see a 404.html in the root of my public folder. Is that also a webserver standard to serve that file when there is a 404?
As said, please check the documentation for the webserver you want to know more about as it got nothing to do with hugo. That said, to answer your follow up questions:
It can be basically considered standard that a webserver serves a index.html should it find one in the requested path, if it resolves to a folder. This is as said configurable so it would be possible to let the webserver serve
30platforms.html as default, making index.html a normal file which has to be requested manually should you replace it’s name in the config instead of extending the list of default file names
For serving the 404, the webserver has to be instructed to do so, it will not automatically serve any file because it has default error messages which it will send. Here you have to check if Netlify allows you to set a 404 page, then you can use the one you see in your public folder. If Netlify allows you to set a custom config for the webserver, you can also tell the server to use that file. This would be again a case for the documentation of the webserver
I didn’t do any configuration on Netlify but I noticed it was serving 404.html for any 404 (which was very nice). I guess Netlify has a sensible default to look for a 404.html in the project’s root directly. Either way, Netlify was a zero config and super easy deployment process for me.
Yes, this is a common configuration. If you want to know more, try looking at the documentation for a widely used web server such as NGINX or Apache.