[Quick Notes] "Docker-fying" my Portfolio Website
Notes to my future self, in plain English. What I Was Trying To Do I already had my portfolio website working on my computer using Hugo and a template for the design. I wanted to package it up in Docker so I could run it the same way anywhere, instead of relying on my machine's setup. Lesson 1: Hugo Doesn't Actually "Run" a Website When I ran hugo server on my computer, it felt like a website was…
In pursuit of a Dockerized portfolio website, the author had already made the website functional on their computer using Hugo and a design template. The goal was to package the website in Docker, enabling it to run consistently across various systems without depending on the machine's setup. The initial step involved understanding that Hugo does not actually run a website.
The command `hugo server` is a preview tool for editing, not for deploying the website to real traffic. The actual file conversion is achieved through `hugo --minify`, which transforms content and the template into static HTML, CSS, and image files stored in a `public/` folder. This marks the first lesson: Docker requires two stages—`Hugo` for building files and a web server, like `nginx`, for serving those files to visitors.
The author then learned that a Dockerfile needs two parts: a build stage with Hugo and a final stage with `nginx` for serving. However, the template used for the website required additional JavaScript and CSS tooling (Node.js and npm), which was not initially set up, leading to styling issues. The solution was to include Node.js and npm in the build stage, run the necessary setup commands, and then proceed to minify the Hugo-built files.
Additionally, the author faced two port-related mistakes when running the Docker container. Initially, they mapped ports incorrectly (`-p 80:8080`) and also had a computer port already in use. The correct approach was to use Docker's port mapping format (`-p my_computer_port:container_port`), and if port 80 on the host computer was occupied, choosing an unused port like 8888 to map (`docker run -p 8888:80 portfolio`).
Lastly, a bug with the `/cv` page redirect was addressed by configuring `nginx.conf` to use a relative path, ensuring the redirect would function correctly without guessing the wrong port. The final Dockerfile incorporated these learnings, highlighting the necessity of setting up tooling within the build stage and configuring `nginx` to handle redirects properly.
The entire setup demonstrates Docker's capability to streamline website deployment by separating the build and serving processes, avoiding conflicts with host ports, and ensuring that redirects function correctly within the Docker environment.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
