How to Self-Host a Static Website with Hugo and Nginx

Introduction

Hugo is a fast and flexible static site generator, perfect for creating blogs and documentation sites. Pairing it with Nginx allows you to self-host your website efficiently. This guide will walk you through setting up Hugo, generating a static website, and serving it with Nginx.

Step 1: Installing Hugo

  1. Update your system’s package list:

    sudo apt update && sudo apt upgrade -y

  2. Install Hugo:

    sudo apt install -y hugo

  3. Verify that Hugo is installed:

    hugo version

Step 2: Creating a New Hugo Site

  1. Create a new Hugo project:

    hugo new site mywebsite

  2. Navigate into the project directory:

    cd mywebsite

  3. Add a theme (example: “ananke”):

    git init && git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

  4. Enable the theme in config.toml:

    echo 'theme = "ananke"' >> config.toml

Step 3: Creating and Building Your Content

  1. Create a new page:

    hugo new posts/my-first-post.md

  2. Edit the post with a text editor:

    nano content/posts/my-first-post.md

  3. Generate the static site:

    hugo -D

  4. The generated files will be in the public directory.

Step 4: Installing and Configuring Nginx

  1. Install Nginx:

    sudo apt install -y nginx

  2. Create a configuration file for your site:

    sudo nano /etc/nginx/sites-available/mywebsite

  3. Add the following content:

    server {

    listen 80;

    server_name yourdomain.com;

    root /var/www/mywebsite/public;

    index index.html;

    }

  4. Enable the configuration:

    sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled

  5. Restart Nginx:

    sudo systemctl restart nginx

Step 5: Deploying Your Hugo Site

  1. Copy the generated files to the web root:

    sudo cp -r public/* /var/www/mywebsite

  2. Ensure the proper permissions:

    sudo chown -R www-data:www-data /var/www/mywebsite

  3. Test the Nginx configuration:

    sudo nginx -t

  4. Open a browser and visit http://yourdomain.com to see your site live.

Conclusion

By following this guide, you have successfully created a static website using Hugo and served it with Nginx. This setup is lightweight, fast, and easy to maintain.