Setting up this website

This is mostly a collection of notes for myself, to be sure I remember what I did and to give credit.

The site is built using hugo using the theme hello-friend-ng.

I added math support by creating a partial in layouts/partials/head.html to override the theme’s default. I copied from the theme and added:

{{ if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
    onload='renderMathInElement(document.body, { delimiters:[
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false},
      {left: "\\(", right: "\\)", display: false},
      {left: "\\[", right: "\\]", display: true}
        ]} );'></script>
{{ end }}

so that any post with:

math: true

will automagically make the katex render in the body element. There could be some conflicts with using single ‘$’ but I left it for now to make it easier to paste in existing math content.

I can preview the site with:

hugo server -D

Note that the -D allows draft posts to be visible.

I created a new html page for my existing talk list with

hugo new talk-list.html

and a new markdown page for my curriculum vitae with:

hugo new curriculum-vitae.md

I was able to add these to the homepage top bar with these lines in the config (near similar):

[[menu.main]]
  identifier = "talks"
  name       = "Talks"
  url        = "/talk-list"
[[menu.main]]
  identifier = "cv"
  name       = "CV"
  url        = "/curriculum-vitae"

This site is hosted on a digital ocean droplet (smallest one) on Ubuntu 18.04. I use the caddy reverse proxy:

curl https://getcaddy.com | sudo bash -s personal

~# which caddy
/usr/local/bin/caddy
~# caddy -version
v1.0.4
~#

directions here: https://computingforgeeks.com/install-caddy-web-server-on-an-ubuntu-18-04-with-lets-encrypt-ssl/

sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy
sudo groupadd -g 33 www-data
sudo useradd \
  -g www-data --no-user-group \
  --home-dir /var/www --no-create-home \
  --shell /usr/sbin/nologin \
  --system --uid 33 www-data

sudo mkdir /etc/caddy
sudo chown -R root:root /etc/caddy
sudo mkdir /etc/ssl/caddy
sudo chown -R root:www-data /etc/ssl/caddy
sudo chmod 0770 /etc/ssl/caddy

NOT using the part from above website, but different:

wget https://raw.githubusercontent.com/caddyserver/caddy/master/dist/init/linux-systemd/caddy.service
sudo cp caddy.service /etc/systemd/system/
sudo chown root:root /etc/systemd/system/caddy.service
sudo chmod 644 /etc/systemd/system/caddy.service
sudo systemctl daemon-reload
sudo systemctl start caddy.service

Unfortunately the caddy service file is no longer available. I copied from my previous working caddy systemd. Digital Ocean has a caddy image, maybe it is best to use that in the future.

Deploying the site

A few options exist, not sure what to use yet:

  1. Build local, push site as tarball, extract on server
  2. Install hugo (any and all dependencies) on server. Cron job to git pull and rebuild site. Performance on server?
  3. Use a CI service to build the site (it runs for less than a second), push artifacts to server??

Both 2. and 3. require all assets in the git repo, maybe that is fine. But I wonder if I plan to ever include large assets that it could be a problem. Maybe that means assets should be stored elsewhere (CDN)?