This repository contains the complete source for my personal site - a fast, minimal static site built with Zola and served via Cloudflare Pages. The theme used is my own open-source theme, zola-slate, which was originally customized from its bearblog roots, with significant UX improvements, a Geist + Instrument Serif + JetBrains Mono font stack, a stone-palette WCAG-compliant color system, and a range of interactive features built in vanilla JavaScript.
The site covers writing, homelab notes, read-the-docs references, project logs, and travel - all accessible under a unified search and tag taxonomy.
| Layer | Technology |
|---|---|
| Static Site Generator | Zola (Rust) |
| Hosting & CDN | Cloudflare Pages |
| Search | elasticlunr.js |
| Syntax Highlighting | Zola native (built-in) |
| Diagrams | Mermaid.js |
| Math Rendering | KaTeX |
| OG Image Generation | Python + Pillow via uv |
| Analytics | Umami (self-hosted, privacy-first) |
| Theme Lineage | zola-slate (my open-source theme) → mr-karan.dev → zola-bearblog |
🤖 AI Readiness
- Fully optimized for LLM ingestion and AI search bots (Claude, ChatGPT, Gemini etc.)
- Auto-generated
/llms.txtindex of all site content - Auto-generated
/llms-full.txtcontaining the entire site corpus in clean Markdown - Hidden HTML directives to route AI scrapers away from HTML and directly to the clean Markdown endpoints
🧭 Navigation & UX
- Overhauled Header and Nav Menu UI with shell-language prefixes (
>,./) matching the terminal aesthetic - Smooth
@view-transitionpage transitions with clip-path reveal for theme toggling - Responsive sticky Table of Contents (mobile, tablet, desktop)
- Custom interactive tooltips for mouse hover events
- Floating back-to-top button for long reads
🔍 Content & Discovery
- Full-text site search via enhanced elasticlunr modal
- Topics taxonomy - unified tag browsing across posts and notes
- AJAX pagination - seamless page turns without full reloads
- Next / Previous post navigation
- Convenient "Copy URL" functionality below post titles and auto-generated anchor links for H2 sections
- Social sharing buttons ("Worth sharing?")
💻 Code & Writing
- Native diff highlighting support
- Mermaid diagram rendering (auto-detected fenced code blocks, with race-condition safeguards)
- Enhanced Footnote UI for improved readability and navigation
- Code copy button with correct handling of soft-wrapped lines
- JetBrains Mono monospace stack for all code surfaces
- Custom icon system for Read Time indicators
🎨 Design & Theming
- Stone-palette dark/light color system with WCAG-compliant three-tier text hierarchy
- Light/dark theme toggle with View Transitions API clip-path reveal
- Dynamic Open Graph image generation for social sharing
- PWA manifest
- Custom inline SVG icon system using macro
☁️ Deployment
- Cloudflare Pages with custom
_headersfor correct CSP and MIME types - Automated OG image generation in the Pages build pipeline
# Clone the repo
git clone https://github.com/iPankajKumar93/zola-slate.git
cd zola-slate
# Serve locally with drafts enabled
zola serve --drafts
# or via make
make previewThe site will be available at http://127.0.0.1:1111.
OG images are generated automatically during Cloudflare Pages builds. To preview them locally:
uv run scripts/generate_og_images.py
# or via make
make og-imagesNew content is scaffolded via make commands that generate Markdown files with pre-populated TOML frontmatter (slug, date, title, description) in the correct directory.
make <type> <Title>[, <Description>]<Title> is required. <Description> is optional, separated by a comma. No quotes needed.
| Type | Directory | Command Example |
|---|---|---|
post |
content/posts/ |
make post Setting Up Pi-hole, A guide to a HA Pi-hole cluster |
travel |
content/travel/ |
make travel My Trip to Tokyo |
rtd |
content/rtd/ |
make rtd How to configure Nginx, A quick Nginx reference |
These are intentional style choices baked into the site's voice:
- Article signatures:
Flush! - Footer: Crafted with ❤️ by Pankaj Kumar
- Nav prefixes:
>and./(shell-language aesthetic)
📖 For a full reference of supported Markdown syntax, formatting elements, and content patterns used across the site, see the Post Syntax Guide.
Zola natively supports diff highlighting in code blocks:
```diff
- println("Hello Old World")
+ println("Hello New World")
```Embed diagrams using a standard fenced code block with mermaid as the language identifier. The site auto-detects these, loads the renderer, and outputs interactive SVGs.
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```| Section | Path | Description |
|---|---|---|
| Posts | /posts/ |
Long-form articles and technical write-ups |
| Topics | /topics/ |
Global tag taxonomy across all content |
| RTD | /rtd/ |
Read the Docs - quick-reference notes |
| Projects | /projects/ |
Side projects and builds |
| Services | /services/ |
Tools and services I run |
| Travel | /travel/ |
Travel logs |
| Contact | /contact/ |
Get in touch |
This project uses separate licenses for code and content.
| Component | License |
|---|---|
| Source code, templates, scripts | GNU General Public License v3.0 (GPLv3) |
| Articles, writing, images | Creative Commons BY-SA 4.0 |
| Third-party components | THIRD-PARTY-LICENSES |
Third-party components and their licenses are fully documented in THIRD-PARTY-LICENSES. They include:
| Component | Purpose | License |
|---|---|---|
| Zola | Static site generator | MIT |
| zola-bearblog | Base theme (via mr-karan.dev) | MIT |
| Mermaid.js | Diagram rendering | MIT |
| KaTeX | Math rendering | MIT |
| Geist | Primary sans-serif font | OFL 1.1 |
| Instrument Serif | Typography accent font | OFL 1.1 |
| JetBrains Mono | Monospace / code font | OFL 1.1 |
| Pillow | OG image generation | HPND |
| Requests | GitHub API data fetching | Apache 2.0 |
Crafted with ❤️ by Pankaj Kumar