50bvd … …
setup installation quickstart docker github-pages

Getting Started with jekyll-infops-theme

Install and configure jekyll-infops-theme in under 5 minutes — Ruby, Docker, or fork directly on GitHub.

Table of Contents

Welcome to jekyll-infops-theme — a modern Jekyll theme built for DevOps, SysOps and infrastructure engineers who want a clean, fast, opinionated technical blog without fighting the toolchain.

What you get out of the box

  • CRT-style interactive terminal with 4 canvas games (Pong, Pac-Man, Snake, Tetris)
  • Dark / light mode with zero flash on load
  • Particle canvas background, cursor-reactive
  • Prism.js syntax highlighting with Copy button on every block
  • Auto-generated Table of Contents with scroll-aware active link
  • Client-side search (no external service)
  • Callout blocks (note, tip, info, warning, danger, success)
  • Analytics: GoatCounter, GA4, Plausible, Umami — production only
  • Comments via Utterances or Disqus
  • GitHub Actions workflow for GitHub Pages — push to main, site deploys in ~2 min

Prerequisites

Option A — Ruby:

  • Ruby ≥ 3.1
  • Bundler (gem install bundler)
  • Git

Option B — Docker (recommended, no Ruby needed):

  • Docker Desktop or Docker + Compose plugin

Installation

Option A — Ruby local

git clone https://github.com/50bvd/jekyll-infops-theme.git my-blog
cd my-blog
bundle install
bundle exec jekyll serve --livereload

Open http://localhost:4000. The --livereload flag auto-refreshes the browser on any file save.

Option B — Docker

git clone https://github.com/50bvd/jekyll-infops-theme.git my-blog
cd my-blog
docker compose up

Open http://localhost:4000. Sources are mounted as a volume — changes reflect instantly without rebuilding the image.

# Rebuild after Gemfile changes
docker compose up --build
First build

The first docker compose up downloads the Ruby base image and installs gems — this takes 2–3 minutes. Subsequent starts are instant thanks to the bundler cache volume.

First configuration

Open _config.yml and replace the YOUR_* placeholders:

title:       "My InfOps Blog"
tagline:     "DevOps · SysOps · Infrastructure"
url:         "https://your-username.github.io"

author:
  name:   "Your Name"
  github: "your-username"

# Terminal boot screen
theme_config:
  terminal_user: "user@myblog"
  terminal_boot:
    user:  "loup"
    host:  "myblog"
    os:    "AlmaLinux 10"
    shell: "bash 5.2"
    role:  "SysOps"
    motd:  "Type /help for commands."
Live reload & _config.yml

Jekyll does not hot-reload _config.yml — you need to restart jekyll serve after any change to this file. All other files (_posts/, _includes/, SCSS…) reload automatically.

Writing your first post

Create _posts/YYYY-MM-DD-my-post.md:

---
layout: post
title:  "Deploying a Proxmox cluster — step by step"
date:   2025-03-01 09:00:00 +0100
tags:   [proxmox, virtualization, homelab]
categories: [infrastructure]
description: "A practical guide to bootstrapping a 3-node Proxmox VE cluster."
toc: true
---

Your Markdown content here.
Date in filename vs front matter

The date in the filename (2025-03-01-my-post.md) must match the date: field in front matter. A mismatch causes Jekyll to silently skip the file or publish it at the wrong URL.

The post appears on the homepage immediately after a rebuild. Tags and categories are indexed automatically.

Deploying to GitHub Pages

The .github/workflows/pages.yml workflow handles everything:

  1. Create a public GitHub repository
  2. Push: git push -u origin main
  3. Go to Settings → Pages → Source → GitHub Actions
  4. The workflow triggers on every push to main
  5. Site is live at https://your-username.github.io/repo-name/ in ~2 minutes
User/org site

For a root site at your-username.github.io, name the repo exactly your-username.github.io. Leave baseurl empty in _config.yml.

Project tour

jekyll-infops-theme/
├── _config.yml          ← all theme options
├── _data/
│   ├── theme.yml        ← colors, fonts, layout (no SCSS needed)
│   └── social.yml       ← footer social links
├── _posts/              ← your articles (Markdown)
├── _sass/               ← 6 SCSS modules (Dart Sass @use)
├── assets/js/
│   ├── modules/         ← 12 JS modules (search, TOC, canvas…)
│   └── terminal-commands/  ← 8 terminal commands + games
└── pages/               ← about, archives, tags, search, test

Check the documentation posts (this series) for a deep dive into each subsystem. Type /help in the terminal for the full command list.

Related Posts

Comments