About Jekyll

Jekyll is an awesome tool that allows anyone to transform plain text (markdown) into a full website. It is super great when you do not want to think too much about all the CSS classes and HTML tags but want a pretty and easy to maintain personal website. Moreover, with its integration with GitHub pages, it offers the possibility to anyone of having a free website. If you want to go even faster, you can start with a free template.

About my usage of Jekyll

I used Jekyll during 7/8 years, and it basically works super well.

So, why changing?

I would say, three reasons:

1. to revamp the visual aspect of my website, the old one was not too bad, but not as I wanted
2. to discover another front-end framework. I am a research engineer, and I work massively with the Pharo programming language and the Moose framework. I also play often with Angular at work, or with more JS libraries (such as Jackson-JS)
3. to rediscover vim (and neovim) that I will try to use instead of VSCode for some tasks.

I do not think all these reasons are good. Still, I am happy with all of them 😄.

The stuff to migrate

So, my first step was to define what I wanted to keep, and what I accept to leave (old website also mean useless stuff). Basically, my website was divided in 6 sections: Home, Teaching, Posts, Projects, Research, and the hidden French story section.

Out of them, I wanted to keep: Home, Post (that will become Blog), Projects, and Research.

The other sections are not use anymore and I did not want to loose time with them.

Features to keep

Out of all the features I had, some are super essential to me:

• Being able to write blog post in markdown
• Using the MermaidJS library
• List my research publication based on a .bib file

Moving to NextJS

First step

First question: why NextJS. I would say... why not?.

In fact, I already know Angular and always heard a lot good about React (even if I know about Svelte, Vue, and many other and the thousand of blog posts about which one is the best 😀). So, first, I did the NextJS tutorial. It was useful to understand the basic about server-side rendering vs client-side rendering and so on.

Then, I created the website with npx create-next-app@latest . --use-npm and the fun part begins. It proposes me to use many frameworks and configuration I did not know (tailwind was a stranger to me, I also wanted to learn about it).

Because I wanted to keep thing simple, I decided to say yes to everything. I thought: like this, everything will be as in the learn NextJS tutorial. It was absolutely wrong. Indeed, the tutorial and the default template did not follow the same strategy for the application routing. I discovered latter that today we use the app routing, and before it was the page routing. So, I decided to keep the app routing one (because it is the new one).

Choosing libraries

Once I have played a bit with the features and created the first pages, I had to find libraries for three major features I needed.

• Markdown integration
• MermaidJS
• Bib

Markdown and MermaidJS

For Markdown and MermaidJS, I first read some blog post about mdxjs and I decided super fast that it is not a good idea to me. I always want to keep markdown file as native as possible. It was one of the point I disliked with Jekyll, I had to add plain HTML and other additional information in my markdown file.

So, to keep plain markdown, I opted for react-markdown that allows me to keep thing simple. I use the TailwindCSS to make the generated HTML beautiful.

Making MermaidJS usable was another challenging tasks. I had to dig into remark and rehype plugins for MermaidJS... Without any success. This package has a dependency to playwright I was simply unable to install in my ArchLinux distro.

Thus, I decided to keep thing simple (as always). First I loaded the mermaid package (npm install mermaid) and I created nextjs component that render a code block using mermaid if necessary and keep the classic behavior instead.

1'use client';
2
3import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
4import Mermaid from './mermaid';
5import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
6
7export default function CodeBlock({ language, children }: {
8  language: string;
9  children: string;
10}) {
11  return (
12    <div>
13      {language == 'mermaid' && <Mermaid>{children}</Mermaid>}
14      {!(language == 'mermaid') && (
15        <SyntaxHighlighter
16          language={language}
17          style={dracula}
18          showLineNumbers={true}
19          PreTag={'div'}
20        >
21          {children}
22        </SyntaxHighlighter>
23      )}
24    </div>
25  );
26}

This solution is not the best and result in a large JS file to load when navigating to a page that comes from a markdown file, but it is still better to what I had with jekyll 😄.

Bibliography

I thought it would be easy to mimic the jekyll-scholar plugin. NOPE

First, I looked for a bib parser in npmjs.com. I did not find one that work properly easily, for instance, my personal .bib file has additional fields (and some packages did not support that). I also have authors with accent in their name (such as Benoît and Stéphane), and many library do not convert these accent when written in the Latex format (\^\i -> î).

Finally, I found the @retorquere/bibtex-parser that lacks of documentation in the readme, but is used by Zotero. So I dig into the dev documentation and it appears to be the best choice, so it is used now in my website.

Conclusion

Welcome in this new website!