krata/_posts/2024-04-11-jekyll.md

---
title: Creating a Personal Website with Jekyll
author: cscherr
date: 2024-04-11 21:30:00 +0200
categories: [Hosting, Blogging]
tags: [jekyll]
---

If you're someone like me and like to host various services, you might also want
to have your own personal website. There are many approaches to this, for
example you could use a <abbr title="Content Management System">CMS</abbr> like
[WordPress](https://wordpress.org) or [ghost](https://ghost.org), you could use
a static site generator like [Jekyll](https://jekyllrb.com/) (that's what GitHub
Pages use) or you could program your own site if you want.

I've tried a bit of all of them, but it never really worked for me. Eventually I
landed on Jekyll, so this is also where you're reading this on now. To be honest,
I don't have too much expertise on the topic, but I made it work, and a Blog
needs posts.

## Pros of Jekyll

### Dead Simple

Usage of Jekyll is really easy in my opinion. You kind of just write markdown
files and add some front matter. That is if you're using a pre-made template
of course, you can make it as complicated as you want, just note that Jekyll
generates static sites, so no fancy server side computation.

### A lot of modern themes

There are a lot of modern and good-looking themes for Jekyll. At the time this
post is written, cscherr.de uses [chirpy](https://github.com/cotes2020/jekyll-theme-chirpy).

A large collection of Jekyll themes can be found
[here](http://jekyllthemes.org/) (note: this site does not use HTTPS for
some reason).

The ones I'd recommend:

- [Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy) - This is what this website uses too!
- [Digital Garden](https://github.com/maximevaillancourt/digital-garden-jekyll-template) -
  Excellent for notes instead of a blog, I'm customizing this for a private novel. This template even features a graph showing the relationships between the notes!

### Insane extendability

As Jekyll is just a generator for static html pages, we can make use of the
endless amount of web technologies without worrying how they will play with our
backend. Want to use your favorite CSS framework, or even add your own CSS? No
problem. Using existing template websites is easy too! Jekyll even has builtin
SCSS support, which makes adding your own custom CSS much more comfortable.

## Cons of Jekyll

### Multilingual sucks

With the chirpy theme at least, I couldn't get Multilingual content to work
without going into the rabbit hole. You can select from a good amount of main
languages, but you cannot have multiple versions of your website for various
languages in a single project.

Various projects for multilingual Jekyll sites exist, but the only one that
seems to be still maintained is [polyglot](https://github.com/untra/polyglot).

## Deployment with Docker

**[Docker](https://www.docker.com)** is a really useful service that can be
used to deploy many services, Jekyll too. I won't go into the details here,
but the idea is that your kernel runs a separate mini OS, which reproduces the
same environment every time and streamlines deployment. It's also good for
security, as someone who takes over the webserver will only have the rights
of the webserver inside the docker container, instead of on your real OS.

The "official" Jekyll Docker container is unmaintained since 2022, so if you
want to deploy Jekyll with docker you need to create your own container. I based
this on the standard [ruby image](https://hub.docker.com/_/ruby/).

We can use a `Dockerfile` like this:

```Dockerfile
# syntax=docker/dockerfile:1
FROM ruby:3.2
WORKDIR /app

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 4000
```
{: file="Dockerfile" }

We need to mount our Jekyll project to `/app`, it is not included with this
Dockerfile.
{: .prompt-tip }

```bash
#!/bin/bash
set -e

git config --global --add safe.directory /app
rm -f /app/tmp/pids/server.pid
gem update --system
bundle install

# Then exec the container's main process (what's set as CMD in the Dockerfile or
# as command in the docker-compose.yml).
exec "$@"
```
{: file="entrypoint.sh" }

We can then use a `docker-compose.yml`{: .filepath} file to deploy our config

```yaml
services:
  jekyll:
    build: .
    volumes:
      - .:/app
    container_name: jekyll
    ports:
      - 127.0.0.1:4000:4000
    command: bundle exec jekyll serve --host 0.0.0.0 --port 4000 --liveserve
```
{: file="docker-compose.yml" }

> Remove the `--liveserve` flag for production environments, or if hosting with a
> reverse proxy. Be sure to rebuild the image if needed. Otherwise, the
> connection might wait for the `liveserve` port (which will probably not exist).
{: .prompt-warning }

Now you should be able to start the docker container with Jekyll inside by using
`docker compose up`. Access your site on [localhost:4000](http://localhost:4000).

> The source code for this website is public at
> [git.cscherr.de](https://git.cscherr.de/PlexSheep/krata). It uses Docker too!
{: .prompt-info }