Migration to Astro


I have been using Jekyll for quite some time to host this website.

Why Jekyll?

I have come across Jekyll thanks to GitHub, where Jekyll is utilized as the go-to-method for publishing GitHub pages. This was way before most of the JavaScript solutions were developed and got popular. Part of the appeal lies in the ability to utilize markdown. Compare to HTML, markdown is much better to create simple content. Also, when in need you can still mix HTML into markdown. I have been also using the blog feature. In a nutshell, you could just dump bunch of files into a directory and Jekyll would create a list you can easily render. Add some html, css and you got all you need to run a simple blog.

Running Jekyll

As a non-linux user I have decided to utilize Docker image to run Jekyll locally. In theory the setup was quite easy.

First start the Docker image:

docker run -it --rm -p 4000:4000 -v "${PWD}:/srv/jekyll" -v "jekyll-gem:/usr/gem" jekyll/jekyll:4.2.2 sh

Now, in the Docker image just install the bundles and start Jekyll.

# Install using Gemfile.
# Using "bundle config set --local path '.vendor'" to create files in project directory.
# This would slow start of the jekyll command.
bundle install
# Start server.
jekyll serve --force_polling --drafts --config _config.yml,._config.yml

Breaking point

Yet, as you may expect there were some issues.

Could this issues be solved? The answer is definite yes. For example, I could run Jekyll under Linux distribution using WSL without Docker. That would probably solved all the issues but, it would also mean that I would need to put the source into the WSL. That is why, this was not acceptable.

Welcome Astro

Long story short, I have decided to replace Jekyll with something else. As of time of writing, there are plethora of tools to get the job done. It just happen that I have recall Astro as the first one and decided to give it a go. There is no need to write how to install it, create project, etc.. Like Jekyll, Astro has very good documentation. The only thing missing for me right now, is the ability to put HTML into the post description.

Let me explain. When writing posts, you can specify post data, like title, date of publication, author, you name it. You can then easily list all posts in a collection, basically a directory, and get those data. So, if you want to render a list of posts, you just utilize this to create a list of post. For each post you just take data.title, data.description, … and render them in a list. The problem is they are primitive values like strings. In addition, Astro do sanitization, as it should, so any HTML in data.description is sanitized and thus not rendered as HTML. A solution is to output the value without a sanitization.

<div class="mb-0" set:html={post.data.description}/>