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

title	author	date	categories	tags
Creating a Personal Website with Jekyll	cscherr	2024-04-11 21:30:00 +0200	Hosting Blogging	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 CMS like WordPress or ghost, you could use a static site generator like Jekyll (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.

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

The ones I'd recommend:

• Chirpy - This is what this website uses too!
• Digital Garden - 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.

Deployment with Docker

Docker 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.

We can use a Dockerfile like this:

# 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 }

#!/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

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.

The source code for this website is public at git.cscherr.de. It uses Docker too! {: .prompt-info }