How I work with Jekyll

#blog #jekyll #markdown

I’m slowly losing my interest in frameworks and tools. It came as a surprise to me but I’m “actively” picking plain HTML, CSS, and as little JavaScript as possible over Vue.js, Alpine.js or others. I don’t remember the last time I used a Bootstrap component or even a Bootstrap class. I’m not saying that I’ve become an expert in web development, like an artist, who can spit out elements and styles from his mind. Quite the opposite actually. Not being dependent on something leaves you with time to think about what you can do differently. That’s something I’ve found with Jekyll.

I’ve used Flask and Quart a lot and I’m familiar with the Jinja2 templating engine. Jekyll uses Liquid, which is similar to Jinja2. Writing posts with Jekyll is a breeze. However, I have a very opinionated way of working with it, at least to some extend.

Jekyll and Docker?

First, I open my repository with Zed. Then I run the script I’ve prepared to run Jekyll locally. Here’s the script:

#!/bin/bash

# Check if no arguments passed
if [ $# -eq 0 ]; then
    echo "No arguments provided, exiting..."
    exit 1
fi

# Show help
if [ "$1" == "help" ]; then
    echo "Usage: jekyll <command>"
    echo ""
    echo "Commands:"
    echo "  build       Build the site"
    echo "  serve       Serve the site"
    echo "  deploy      Deploy the site"
    echo "  help        Show this help message"
fi

# Build
if [ "$1" == "build" ]; then
    echo "Building site with docker image..."
    docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll jekyll build -d docs
    echo "Site built to the ./docs folder."
fi

# Serve
if [ "$1" == "serve" ]; then
    echo "Serving the site with docker image..."
    docker run --rm --volume="$PWD:/srv/jekyll" -p 4000:4000 -p 3000:3000 -it jekyll/jekyll sh -c "bundle install ; echo '==> ignoring any errors ʅʕ•ᴥ•ʔʃ' ; jekyll serve --livereload --watch --drafts --livereload-port 3000"
fi

# Deploy
if [ "$1" == "deploy" ]; then
    echo "Building site with docker image..."
    docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll jekyll build -d docs
    echo "Site built to the ./docs folder."
    echo "Pushing to GitHub..."
    git add -A && git commit -m "Update site" && git push
    echo "done."
fi

It comes with three commands: build, serve, and deploy. But since GitHub Pages automatically builds the website for me, I only use serve. You may see that it runs a Docker container with the Jekyll image and question yourself; is he stupid? Why doesn’t he just install Jekyll on his machine? Well, Jekyll simply doesn’t work on my (arch) linux machine. At this point I’m too lazy to inspect and fix the problem. So I just use Docker.

The script runs jekyll with the --watch and --drafts flags, which indicates that it should rebuild the site on file changes and include the `drafts folder, where I keep my unpublished posts, in the build.

With the site running, I just open the draft and start writing, and constantly checking the site every second to see how it looks. There are other ways to write posts probably, but until I start writing plain Markdown in my paper notebook, I think I’ll stick with this one.