The goal of this tutorial it’s to show how create a static website with GoHugo.io and Nginx as a reverse proxy.

About Hugo

GoHugo.io is is one of the most popular open-source static site generators. Have we turned to the past? For some kind of things, we may say yes.
Lately, with the explosion of Javascript and client-side application, the server applications sometimes have been transformed in resources providers. With reources I mean also dynamic resources (maybe retrieved form a DB).
Hogo.io doesn’t have a database and don’t need that for provide a beatiful and very performant website. With Hugo, you can publish your Web App where ever you want (even on github), because they are only html, css, … files.
Obiusly you don’t have a dynamic server information, but that does not mean that you couldn’t have a dynamic page!
Do you need to be a developer for use Hugo.io? No, the baseline content of Hugo is the Markdown language, that is a language very simple and not technique.

Installation of GoHugo.io

For install Hugo you can follow that Hugo installation guide

GoHugo.io website building

Since the Hugo was programmed with GO language, it is very fast. With that command:

hugo -s . -d ./build/public

You create the html files of all your marketdown content under the /build/public directory Output of the building:

                   | EN  
+------------------+----+
  Pages            | 37  
  Paginator pages  |  0  
  Non-page files   | 12  
  Static files     | 23
  Processed images |  0
  Aliases          | 13
  Sitemaps         |  1
  Cleaned          |  0

Runnig your Hugo Web Site

I love Docker, so I suggest to use it. To do so, you need to configure your Dockerfile like this:

# base nginx image
FROM nginx:alpine

# an arbitrary directory to build our site in
WORKDIR .

# copy the project into the container
COPY . .

# download hugo and make it available in PATH
ENV HUGO_VERSION 0.55.6
ENV HUGO_BINARY hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
RUN set -x && \
  apk add --update wget ca-certificates && \
  wget https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/${HUGO_BINARY} && \
  tar xzf ${HUGO_BINARY} && \
  mv hugo /usr/bin

# build the project and copy the result to the nginx folder
RUN /usr/bin/hugo && ls -l
RUN cp -fR /build/public/* /usr/share/nginx/html

In that docker image you can find two things:

  • Hugo.io
  • Nginx

Run your Hugo Web Site

First you need to build you docker image:

docker build -t yourwebsite .

Once you have your docker image, you can run it:

docker run -ti -p 8000:80 yourwebsite

Now you have an instance of your website running on port 8080

Public your Hugo Web Site

If you want to create a safe website you need to integrate a SSL configuration maybe with Let’s Encrypt. If you are running just your website, you need to go inside of your docker container:

docker exec -it CONTAINER_ID(docker ps) /bin/bash

And configure the Ngnix configuration file /etc/nginx/sites-available/default with thats inscructions:

ssl    on;
ssl_certificate    PATH/fullchain.pem;
ssl_certificate_key    PATH/privkey.pem;
error_page 404 http://yourwebsite/404.html;

If you prefer to have a reverse proxy on the top, maybe because you have another services more than your website, you need to carry that ngnix configuration on your top reverse proxy.

References:

https://riccardo.im/podcast/