diff --git a/content/articles/2024-08-12-jekyll-hugo.md b/content/articles/2024-08-12-jekyll-hugo.md index f8387f8..e7415e1 100644 --- a/content/articles/2024-08-12-jekyll-hugo.md +++ b/content/articles/2024-08-12-jekyll-hugo.md @@ -60,7 +60,7 @@ with `sass-embedded` gem, and I spent waaaay too long fixing this incredibly fru {{< image width="9em" float="right" src="/assets/jekyll-hugo/hugo-logo-wide.svg" alt="Hugo" >}} When I made my roadtrip from Zurich to the North Cape with my buddy Paul, we took extensive notes on -our daily travels, and put them on [[2022roadtripnose](https://2022roadtripnose.weirdnet.nl/)] +our daily travels, and put them on a [[2022roadtripnose](https://2022roadtripnose.weirdnet.nl/)] website. At the time, I was looking for a photo caroussel for Jekyll, and while I found a few, none of them really worked in the way I wanted them to. I stumbled across [[Hugo](https://gohugo.io)], which says on its website that it is one of the most popular open-source static site generators. @@ -89,7 +89,7 @@ I have only a few strong requirements if I am to move my website: With that in mind, I notice that Hugo has a site _importer_, that can import a site from Jekyll! I run it, but it produces completely broken code, and Hugo doesn't even want to compile the site. This -turns out to be a _theme_ issue, so I take Hugo's advice and install the recommended them. The site +turns out to be a _theme_ issue, so I take Hugo's advice and install the recommended theme. The site comes up, but is pretty screwed up. I now realize that the `hugo import jekyll` imports the markdown as-is, and only rewrites the _frontmatter_ (the little blurb of YAML metadata at the top of each file). Two notable problems: @@ -111,11 +111,11 @@ I do some grepping, and have 246 such Jekyll template expansions, and 272 images #### Attempt 2: Skeleton ✅ I decide to do this one step at a time. First, I create a completely new website `hugo new site -hugo.ipng.ch`, download the `notrack` theme, and add only the front page `index.md` from the +ipng.ch`, download the `notrack` theme, and add only the front page `index.md` from the original IPng site. OK, that renders. -Now comes a fun part: going over the theme's SCSS to adjust it to look and feel similar to the -Jekyll `minima` theme. I change a bunch of stuff in the skeleton of the website theme. +Now comes a fun part: going over the `notrack` theme's SCSS to adjust it to look and feel similar to +the Jekyll `minima` theme. I change a bunch of stuff in the skeleton of the website: First, I take a look at the site media breakpoints, to feel correct for desktop screen, tablet screen and iPhone/Android screens. Then, I inspect the font family, size and H1/H2/H3... @@ -239,10 +239,10 @@ The first change I make is to the main `hugo.toml` config file: articles = "/s/articles/:year/:month/:day/:slug" ``` -That solves the main directory problem (I chose `s/articles/` in Jekyll). Then, adding the URL -redirect is a simple matter of looking up which filename Jekyll ultimately used, and adding a little -frontmatter at the top of each article, for example my [[VPP #1]({{< ref 2024-08-12-jekyll-hugo ->}})] article would get this addition: +That solves the main directory problem, as back then, I chose `s/articles/` in Jekyll. Then, adding +the URL redirect is a simple matter of looking up which filename Jekyll ultimately used, and adding +a little frontmatter at the top of each article, for example my [[VPP #1]({{< ref +2024-08-12-jekyll-hugo >}})] article would get this addition: ``` --- @@ -291,11 +291,11 @@ $ cat themes/hugo-theme-ipng/layouts/shortcodes/asciinema.html This file creates the `id` of the `
` by means of stripping all non-alphanumeric characters from the `src` argument of the _shortcode_. So if I were to create an `{{}}`, the resulting DIV will be uniquely called `castsmycast`. This way, I -can add multiple screencasts in the same document, which is dope +can add multiple screencasts in the same document, which is dope. But, as I now know, I need to load some CSS and JS so that the `AsciinemaPlayer` class becomes -available. For this, I use a feature in Hugo, which allows for `params` to be set in the -frontmatter, for example in the [[VPP OSPF]({{< ref 2024-06-22-vpp-ospf-2 >}})] article: +available. For this, I use a realtively new feature in Hugo, which allows for `params` to be set in +the frontmatter, for example in the [[VPP OSPF #2]({{< ref 2024-06-22-vpp-ospf-2 >}})] article: ``` --- @@ -353,20 +353,21 @@ becomes easier once it grows. A really nice feature! At IPng, I run a [[Gitea](https://gitea.io)] server, which is one of the coolest pieces of open source that I use on a daily basis. There's a very clean integration of a continuous integration tool called [[Drone](https://drone.io/)] and these two tools are literally made for each other. -Drone can be enabled for any Git repo in Gitea, and upon the presence of a `.drone.yml` file, upon -repository events, called _triggers_. It can then run a sequence of steps, hermetically in a Docker -container called a _drone-runner_, which first checks out the repository at the latest commit, and -then does whatever I'd like with it. I'd like to build a Hugo site, please! +Drone can be enabled for any Git repo in Gitea, and given the presence of a `.drone.yml` file, +execute a set of steps upon repository events, called _triggers_. It can then run a sequence of +steps, hermetically in a Docker container called a _drone-runner_, which first checks out the +repository at the latest commit, and then does whatever I'd like with it. I'd like to build and +distribute a Hugo website, please! -As it turns out, there is a [[Drone Hugo](https://plugins.drone.io/plugins/hugo)] readily available, +As it turns out, there is a [[Drone Hugo](https://plugins.drone.io/plugins/hugo)] plugin available, but it seems to be very outdated. Luckily, this being open source and all, I can download the source on [[GitHub](https://github.com/drone-plugins/drone-hugo)], and in the `Dockerfile`, bump the Alpine version, the Go version and build the latest Hugo release, which is 0.130.1 at the moment. I really do need this version, because the `params` feature was introduced in 0.123 and the upstream package is still for 0.77 -- which is about four years old. Ouch! -I build a docker image and upload it to my private repo at IPng, hosted as well on Gitea, by the -way. As I said, it really is a great piece of kit! In case anybody else would like to give it a +I build a docker image and upload it to my private repo at IPng which is hosted as well on Gitea, by +the way. As I said, it really is a great piece of kit! In case anybody else would like to give it a whirl, ping me on Mastodon or e-mail and I'll upload one to public Docker Hub as well. ### Putting it all together