In this post, I will describe how my web server is set up. I am using a DigitalOcean droplet to host my website built with Hugo static site generator and the Tranquilpeak theme.

The first post I wrote on my website was about content management systems (CMS) and static site generators (SSG). In the second post, I explained the main reasons why I chose an SSG over a CMS to make my site. Here is a copy of the criteria I used to choose a solution and put together my website:

  1. My own personal domain name.
  2. Custom pages including pages about me and how to contact me.
  3. Blog to write about data and other interests.
  4. Room to grow and host any projects I want.
  5. Not too much HTML, CSS, or JavaScript required. (I know a little bit, but I have no plans to be a full-time web developer.)

In this third and final post, I will detail the technology I am using to run my website.

My website is hosted on DigitalOcean

First, I registered timothystehulak.com as my domain name. There is generally a fee to register a .com domain name, and you can purchase from many domain name registrars including Namecheap, GoDaddy, or Google domains, to name a few. I purchased timothystehulak.com on Namecheap for a long duration.

For some time, I thought that I would use a CMS to make my website, so I looked for a host which could support that plus other side projects. Namely, I have been working on a coronavirus dashboard that wanted to host on the same server. Having full control of a server would guarantee I would have the flexibility to do both in the same place.

The hosting solution I settled on was a basic droplet on DigitalOcean. The basic droplets are virtual machines built to host blogs and other web apps. In March 2021, you can get 1 virtual processor, 25 GB SSD space and 1 TB transfer for $5/month. If I outgrow the basic droplet, I can resize the droplet to get more CPU, memory, or disk space for a higher monthly fee. I liked this solution because it’s affordable and gives me full control over the droplet.

Side note: If I were planning to host only the static site without wanting capacity for my dashboard and other side projects on the same server, then I would have considered a free static site host. If you are interested in that, you may want to consider DigitalOcean app platform starter level, Netlify starter level, GitHub pages, or GitLab pages.

Droplet setup

Once I started my basic droplet, I initially set up SSH login and uncomplicated firewall (ufw). Then I pointed my domain name at the droplet: first, I located my domain name in Namecheap, went to the management settings, and changed the nameservers from Namecheap DNS to custom DNS, and entered the DigitalOcean nameservers. Second, I configured the DNS on DigitalOcean. I added the following DNS records: 3 NS records for the DigitalOcean name servers, an A record for my IPv4 address, an AAAA record for my IPv6 address, and a CNAME for www.timothystehulak.com. When I set up additional projects, I can set up more CNAMES for those projects.

Next, I needed to run a web server on my droplet. There are a few options like Nginx or Apache. Instead of installing it on the server itself, I installed Docker and run the webserver in a container. Specifically, I am using the container swag (secure web application gateway) by linuxserver, which runs an Nginx webserver and reverse proxy and obtains a free SSL certificate from ZeroSSL, among other features. This was exactly what I was looking for and was straightforward to set up.

My website is built by Hugo

This website and blog are generated with the open-source Hugo static site generator and elegant Tranquilpeak theme. Narrowing it down to this generator and template was difficult because there are so many great choices. In March 2021, Jamstack.org lists 300+ SSG options, not to mention the templates! I was a nervous about choosing some of the JavaScript heavy SSGs because I thought that I would face a steep learning curve to customize them. I do not have experience in React or Vue JavaScript frameworks which would help to implement a Next.js or Gatsby site. I really am not aiming to be a full-time full-stack or front-end web developer! I am interested in data and analytics.

Fortunately, Hugo was not difficult to install and start using. Adding the theme was easy, and it is simple to run Hugo locally for previewing and development. Both Hugo and Tranquilpeak have great documentation for getting started. The theme configuration has straightforward instructions for modifying the menus and other aspects of the site. I created a simple background and selected some photos of myself from previous travels. I decided to customize the standard homepage with a welcome message and a smaller selection of the latest posts.