I recently learned enough HTML and CSS to build a cheesy old-web-style personal site, and it is currently hosted on a free static hosting service. I also bought a few inexpensive domains, and my roommate and I already use one of them with Nginx for a Jellyfin server. I would like to host my personal site on another domain, but I am unsure how to set it up.
Several people suggested Hugo, but I cannot get anything to appear at localhost:1313, and I am not sure whether Hugo is even reading the HTML files I placed in its directory. It also seems to expect me to choose a theme, even though I already spent a lot of time creating my own layout. The Hugo documentation feels much more advanced than my current skill level.
Would a different tool be better for an already-completed static HTML site, or is there a simple way to understand and configure Hugo for this use case?
3 Answers
You can skip Hugo entirely. Hugo is mainly for turning Markdown and templates into HTML, so putting finished HTML files into it is fighting against how the tool is designed. Since your pages already work, you can serve the files directly with Nginx. Put the HTML, CSS, images, and other assets in a web directory and point a new domain configuration at that folder. You can use Git or rsync later to make updates easier.
A static site does not necessarily need to run on your home server. Services such as Cloudflare Pages, Netlify, or GitHub Pages can host plain HTML and CSS for free, connect to a custom domain, and handle HTTPS automatically. If you do keep hosting it yourself, Caddy is another option because it has a simpler configuration and obtains certificates automatically. Either way, you do not need a generator unless you later want features like Markdown posts, reusable templates, or automatically generated navigation.
Because Nginx is already running, add a separate server block for the new domain. It can look roughly like this:
server {
listen 80;
server_name example.com www.example.com;
root /var/www/mysite;
index index.html;
location / {
try_files $uri $uri.html $uri/ =404;
}
}
Enable the configuration, run `sudo nginx -t`, and reload Nginx. Copy your site files into `/var/www/mysite`. The `$uri.html` part is optional, but it lets a URL such as `/about` find `about.html`. Once the domain points to the server, Certbot can add HTTPS with a command such as `sudo certbot --nginx -d example.com -d www.example.com`.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads