ipng/ipng.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some typo and clarification changes

Browse Source
This commit is contained in:
Pim van Pelt
2024-08-13 01:08:50 +02:00
parent d017f1c2cf
commit 52d3606b1b
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
content/articles/2024-08-12-jekyll-hugo.md
View File

@ -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 `<div>` by means of stripping all non-alphanumeric characters from
the `src` argument of the _shortcode_. So if I were to create an `{{</* asciinema
src='/casts/my.cast' */>}}`, 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