| examples | ||
| src | ||
| .gitignore | ||
| build.zig | ||
| build.zig.zon | ||
| README.md | ||
| TODO.md | ||
Sprinkyll
A static blog generator written in Zig, inspired by Jekyll.
Features
- YAML Front Matter: Configure posts with YAML metadata
- Markdown to HTML: Converts markdown to HTML with support for:
- Headings (h1, h2, h3)
- Bold and italic text
- Inline code and code blocks
- Links
- Layouts: Template your blog with reusable layouts
- Svelte Integration: Embed Svelte apps directly in your posts with
<sprinkyll:svelte>tags - Inlined Output: All JavaScript is inlined into the final HTML for maximum portability
- Dev Server: Built-in HTTP server for local development
- Pagination: Jekyll-compatible pagination with configurable posts per page
- Root-level Pages: Support for index.md, about.md, and other pages in the project root
- Date-based URLs: Posts are organized by date (e.g., /2024/01/15/title.html)
Installation
zig build
The binary will be available at ./zig-out/bin/sprinkyll.
Usage
Build your blog
sprinkyll build
This will:
- Read all markdown files from
_posts/ - Convert them to HTML
- Apply layouts from
_layouts/ - Generate static HTML files in
_site/
Start development server
sprinkyll dev
This will:
- Build your blog
- Start a local HTTP server on port 8000
- Serve your blog at
http://localhost:8000
Directory Structure
my-blog/
├── _config.yaml # Site configuration (or _config.yml)
├── _posts/ # Blog posts (markdown files)
├── _layouts/ # Layout templates
├── _includes/ # Reusable includes (not yet implemented)
├── _data/ # Data files (not yet implemented)
└── _site/ # Generated static files
Post Format
Posts use Jekyll-style filenames: YYYY-MM-DD-title.md
Example post:
---
published: true
title: My First Post
layout: default
---
Welcome to my blog! This is **bold** and this is *italic*.
## Section Header
Here's some `inline code` and a code block:
\```
const std = @import("std");
\```
Layouts
Layouts use template variables:
{{ content }}- Replaced with the post content{{ title }}- Replaced with the post title
Example layout (_layouts/default.html):
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<main>
{{ content }}
</main>
</body>
</html>
Svelte Integration
You can embed Svelte apps in your posts. Sprinkyll will:
- Detect the
<sprinkyll:svelte>tag in your markdown - Modify the Svelte app's mount point to use a unique ID
- Build the Svelte app with Vite
- Extract and inline all JavaScript and CSS
- Restore the original source files
Example post:
---
title: Interactive Visualization
---
Check out this interactive chart:
<sprinkyll:svelte src="data-viz"/>
The app will be built and inlined automatically!
The Svelte app should be in the specified directory (e.g., data-viz/) with a standard Vite/Svelte setup.
Important: The final HTML is completely self-contained with all JS and CSS inlined. No external files are needed!
Pagination
Sprinkyll supports Jekyll-style pagination for your blog index. Configure it in your config file (_config.yml or _config.yaml):
paginate: 5 # Number of posts per page
paginate_path: /page:num/ # URL pattern for paginated pages
Create an index.md in the project root (not in _posts/):
---
title: Blog Home
layout: home
---
# My Blog
{{ paginator.posts }}
**Page {{ paginator.page }} of {{ paginator.total_pages }}**
The following paginator variables are available:
{{ paginator.posts }}- List of posts for the current page (in markdown format){{ paginator.page }}- Current page number{{ paginator.total_pages }}- Total number of pages{{ paginator.previous_page }}- Link to previous page (in layout only){{ paginator.next_page }}- Link to next page (in layout only)
Posts are automatically sorted by date (newest first).
Requirements
- Zig 0.15.2 or later
- Node.js and npm (for Svelte app building)
License
MIT