Skip to content

refactor: Migrate from Jekyll to Eleventy 3.0#52

Merged
lizell merged 4 commits intomasterfrom
migrate-to-eleventy
Jan 25, 2026
Merged

refactor: Migrate from Jekyll to Eleventy 3.0#52
lizell merged 4 commits intomasterfrom
migrate-to-eleventy

Conversation

@lizell
Copy link
Copy Markdown
Member

@lizell lizell commented Jan 24, 2026

This migrates the entire website from Jekyll (Ruby) to Eleventy (Node.js). Eleventy was chosen because it has native support for Liquid templates, which minimizes changes to existing templates.

New files

Configuration

  • eleventy.config.js: Main configuration in ESM format with collections, filters, and passthrough copy rules
  • package.json: Node.js dependencies (Eleventy, syntax highlighting, Sass)
  • .nvmrc: Node.js version 24 (current LTS)
  • .nojekyll: Prevents GitHub Pages from running Jekyll

Data

  • _data/site.json: Site variables (url)
  • _data/home/roles.yml: Moved from _includes/

Layouts and templates

  • _layouts/employee.html: New layout for employee pages with content wrapper
  • _includes/lib/prism.scss: Syntax highlighting theme (replaces Rouge)
  • assets/site.js.liquid: JavaScript concatenation via Liquid template

Directory data (for layout inheritance)

  • jobba/jobba.json
  • om-oss/om-oss.json
  • konsultnatverk/konsultnatverk.json
  • ai-labbet/ai-labbet.json
  • roller/roller.json
  • _posts/_posts.json

CI/CD

  • .github/workflows/deploy.yml: GitHub Actions for automatic deployment

Documentation

  • CLAUDE.md: Instructions for AI assistants and lessons learned from migration
  • AGENTS.md: Symbolic link to CLAUDE.md
  • README.md: Updated with new instructions for nvm and npm

Deleted files

  • Gemfile, Gemfile.lock: Ruby dependencies
  • _config.yml: Jekyll configuration
  • .ruby-version: Ruby version
  • _includes/lib/rouge-github.scss: Rouge syntax highlighting (replaced by Prism)
  • assets/site.js: Replaced by site.js.liquid

Template changes

Variable access

Jekyll: {{ page.title }}, {{ site.posts }}
Eleventy: {{ title }}, {{ collections.posts }}

Collection loops

Jekyll: {% for post in site.posts %}{{ post.title }} Eleventy: {% for post in collections.posts %}{{ post.data.title }}

Updated includes

  • _includes/home/blog.html: collections.posts, post.data.*
  • _includes/home/roles.html: home.roles instead of site.data.home.roles
  • _includes/blog/.html: collections.posts, post.data., swedishDate filter
  • _includes/employees/index.html: collections.employees, employee.data.*

Content changes

Employee pages (_employees/*.md)

  • Added layout: employee for correct content wrapper

Blog posts

  • Fixed {{page.image_url}} to {{image_url}} in 7 posts
  • Fixed markdown rendering after HTML blocks in acb2013.md (added blank lines after

    and tags)

  • Updated old /images/employees/ paths to /assets/img/employees/

Other pages

  • Fixed {{page.}} to {{}} in ai-labbet, jobba, konsultnatverk, om-oss, roller

SCSS changes

  • assets/site.scss: Changed from @import to @use (modern Sass syntax)
  • Sass is now compiled separately via npm script, not by Eleventy

Configuration details

Collections

  • posts: Sorted by date (newest first) with next/previous links
  • employees: Sorted alphabetically by filename

Filters

  • swedishDate: Formats dates in Swedish (e.g., "24 januari 2025")
  • removeHtmlExtension: Removes .html from URLs

Passthrough copy

  • assets/
  • All image formats (jpg, png, gif, svg, webp) in all directories
  • favicon.ico

Ignores

  • README.md, CLAUDE.md, AGENTS.md (documentation)
  • assets/blog/**/*.html and .md (demo files with Mustache syntax)
  • **/*.scss (compiled separately)

Christian Lizell added 4 commits January 24, 2026 15:49
This commit migrates the entire website from Jekyll (Ruby) to Eleventy (Node.js).
Eleventy was chosen because it has native support for Liquid templates, which
minimizes changes to existing templates.

## New files

### Configuration
- eleventy.config.js: Main configuration in ESM format with collections,
  filters, and passthrough copy rules
- package.json: Node.js dependencies (Eleventy, syntax highlighting, Sass)
- .nvmrc: Node.js version 24 (current LTS)
- .nojekyll: Prevents GitHub Pages from running Jekyll

### Data
- _data/site.json: Site variables (url)
- _data/home/roles.yml: Moved from _includes/

### Layouts and templates
- _layouts/employee.html: New layout for employee pages with content wrapper
- _includes/lib/prism.scss: Syntax highlighting theme (replaces Rouge)
- assets/site.js.liquid: JavaScript concatenation via Liquid template

### Directory data (for layout inheritance)
- jobba/jobba.json
- om-oss/om-oss.json
- konsultnatverk/konsultnatverk.json
- ai-labbet/ai-labbet.json
- roller/roller.json
- _posts/_posts.json

### CI/CD
- .github/workflows/deploy.yml: GitHub Actions for automatic deployment

### Documentation
- CLAUDE.md: Instructions for AI assistants and lessons learned from migration
- AGENTS.md: Symbolic link to CLAUDE.md
- README.md: Updated with new instructions for nvm and npm

## Deleted files

- Gemfile, Gemfile.lock: Ruby dependencies
- _config.yml: Jekyll configuration
- .ruby-version: Ruby version
- _includes/lib/rouge-github.scss: Rouge syntax highlighting (replaced by Prism)
- assets/site.js: Replaced by site.js.liquid

## Template changes

### Variable access
Jekyll: {{ page.title }}, {{ site.posts }}
Eleventy: {{ title }}, {{ collections.posts }}

### Collection loops
Jekyll: {% for post in site.posts %}{{ post.title }}
Eleventy: {% for post in collections.posts %}{{ post.data.title }}

### Updated includes
- _includes/home/blog.html: collections.posts, post.data.*
- _includes/home/roles.html: home.roles instead of site.data.home.roles
- _includes/blog/*.html: collections.posts, post.data.*, swedishDate filter
- _includes/employees/index.html: collections.employees, employee.data.*

## Content changes

### Employee pages (_employees/*.md)
- Added layout: employee for correct content wrapper

### Blog posts
- Fixed {{page.image_url}} to {{image_url}} in 7 posts
- Fixed markdown rendering after HTML blocks in acb2013.md
  (added blank lines after <h3> and <img> tags)
- Updated old /images/employees/ paths to /assets/img/employees/

### Other pages
- Fixed {{page.*}} to {{*}} in ai-labbet, jobba, konsultnatverk, om-oss, roller

## SCSS changes

- assets/site.scss: Changed from @import to @use (modern Sass syntax)
- Sass is now compiled separately via npm script, not by Eleventy

## Configuration details

### Collections
- posts: Sorted by date (newest first) with next/previous links
- employees: Sorted alphabetically by filename

### Filters
- swedishDate: Formats dates in Swedish (e.g., "24 januari 2025")
- removeHtmlExtension: Removes .html from URLs

### Passthrough copy
- assets/
- All image formats (jpg, png, gif, svg, webp) in all directories
- favicon.ico

### Ignores
- README.md, CLAUDE.md, AGENTS.md (documentation)
- assets/blog/**/*.html and .md (demo files with Mustache syntax)
- **/*.scss (compiled separately)
- Bump Node.js version to 24 in workflow, package.json and .nvmrc
- Add sass:watch script for live SCSS recompilation
- Run Eleventy and Sass watch in parallel during development
Changes:
- Update Node.js requirement to version 24 (current LTS)
- Add scripts/dev.mjs for parallel Eleventy and SCSS watch in development
- Add sass:watch npm script for SCSS file watching
- Fix intro_image variable name (was intro-image, now uses underscore)
- Add pagination support to blog archive and index templates
- Update deploy workflow to use Node.js 24
@lizell lizell merged commit 42e57af into master Jan 25, 2026
@lizell lizell deleted the migrate-to-eleventy branch January 25, 2026 20:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant