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" >}} {{< 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 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 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)], 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. 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 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 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 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 as-is, and only rewrites the _frontmatter_ (the little blurb of YAML metadata at the top of each
file). Two notable problems: 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 ✅ #### Attempt 2: Skeleton ✅
I decide to do this one step at a time. First, I create a completely new website `hugo new site 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. 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 Now comes a fun part: going over the `notrack` theme's SCSS to adjust it to look and feel similar to
Jekyll `minima` theme. I change a bunch of stuff in the skeleton of the website theme. 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 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... 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" articles = "/s/articles/:year/:month/:day/:slug"
``` ```
That solves the main directory problem (I chose `s/articles/` in Jekyll). Then, adding the URL That solves the main directory problem, as back then, I chose `s/articles/` in Jekyll. Then, adding
redirect is a simple matter of looking up which filename Jekyll ultimately used, and adding a little the URL redirect is a simple matter of looking up which filename Jekyll ultimately used, and adding
frontmatter at the top of each article, for example my [[VPP #1]({{< ref 2024-08-12-jekyll-hugo a little frontmatter at the top of each article, for example my [[VPP #1]({{< ref
>}})] article would get this addition: 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 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 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 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 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 available. For this, I use a realtively new feature in Hugo, which allows for `params` to be set in
frontmatter, for example in the [[VPP OSPF]({{< ref 2024-06-22-vpp-ospf-2 >}})] article: 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 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 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. 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 Drone can be enabled for any Git repo in Gitea, and given the presence of a `.drone.yml` file,
repository events, called _triggers_. It can then run a sequence of steps, hermetically in a Docker execute a set of steps upon repository events, called _triggers_. It can then run a sequence of
container called a _drone-runner_, which first checks out the repository at the latest commit, and steps, hermetically in a Docker container called a _drone-runner_, which first checks out the
then does whatever I'd like with it. I'd like to build a Hugo site, please! 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 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 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 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 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! 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 I build a docker image and upload it to my private repo at IPng which is hosted as well on Gitea, by
way. As I said, it really is a great piece of kit! In case anybody else would like to give it a 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. whirl, ping me on Mastodon or e-mail and I'll upload one to public Docker Hub as well.
### Putting it all together ### Putting it all together