One of the historical drawbacks of moving away from a database-driven CMS like WordPress was the loss of native search functionality. How do you search thousands of posts if you don’t have an SQL database to query?
Older solutions relied on heavy client-side JavaScript libraries (like Lunr.js) that downloaded your entire site index on every page load—ruining the performance benefits of going static in the first place.
ZeroPress solves this elegantly by integrating Pagefind, the industry-leading static search solution.
What is Pagefind?
Pagefind is a fully static search library written in Rust. Instead of a database or an external API layer (like Algolia), Pagefind analyzes your generated HTML files after the Jekyll build completes. It outputs a pre-calculated index of highly compressed Search chunk files.
How ZeroPress Uses Pagefind
ZeroPress’s build script runs Pagefind automatically: npx pagefind --site _site.
This generates an index folder. When a user types a query into your site’s search bar, the UI dynamically fetches only the micro-chunks of data required for that specific query.
The Benefits:
- Zero Server Overhead: The search index consists of static files served from Cloudflare’s Edge CDN. No backend needed.
- Incredible Speed: Search results appear instantly, without any client-side lag.
- Minimal Bandwidth: It only downloads the exact bytes needed, maintaining perfect Core Web Vitals.
- Rich Results: Pagefind automatically extracts images and excerpts from your content to display highly visual results.
Customizing Your Search UI
If you are using one of the Pro themes provided by ZeroPress, the UI is already built and styled to match your site perfectly.
You can easily customize what parts of your site are indexed by adding custom HTML data attributes to your layout files. For example, if you want to exclude your sidebar or footer from search results:
<main data-pagefind-body>
<!-- Only content in here will be indexed -->
<article>
<header class="w-full h-64 md:h-96 relative mb-8 overflow-hidden rounded-xl group">
<img src="/images/blog/hero-sveltia-cms.webp" alt="Setting Up Sveltia CMS: Git-Based Content Editing"
class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
style="view-transition-name: hero-setting-up-sveltia-cms;">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex items-end">
<div class="container mx-auto px-4 py-8 text-white">
<a href="/features/"
class="uppercase tracking-wide text-xs font-bold mb-3 bg-primary text-primary-content px-3 py-1 inline-block rounded-md shadow-sm border border-white/20 hover:opacity-90">
Features
</a>
<h1 class="text-3xl md:text-5xl font-extrabold drop-shadow-lg leading-tight mb-2">Setting Up Sveltia CMS: Git-Based Content Editing</h1>
<p class="text-sm md:text-base text-gray-200 font-medium opacity-90">
24 Feb, 2026 • 3 min read
</p>
</div>
</div>
</header>
<div class="container mx-auto px-4">
<nav class="w-full mt-2 mb-8 text-sm text-gray-500" aria-label="Breadcrumb">
<ol class="list-none p-0 flex flex-wrap items-center">
<li class="flex items-center">
<a href="/" class="hover:text-primary transition-colors hover:underline">Inicio</a>
<span class="mx-2 text-gray-500">/</span>
</li>
<!-- Fallback if category not in map -->
<li class="flex items-center whitespace-nowrap">
<span class="font-semibold text-gray-700">Features</span>
<span class="mx-2 text-gray-500">/</span>
</li>
<!-- Current Page Title -->
<li class="flex items-center text-gray-700 font-semibold">
<span aria-current="page">Setting Up Sveltia CMS: Git-Based Content Editing</span>
</li>
</ol>
</nav>
<div class="max-w-4xl mx-auto mt-8">
<!-- Main Content -->
<main>
<div
class="prose prose-lg prose-p:my-5 prose-headings:mt-8 prose-h2:text-3xl prose-h2:font-bold prose-h3:text-xl prose-h3:font-semibold max-w-none">
<p>The biggest misconception about static sites is that they are hard to edit. While technical users love writing in Markdown and pushing via Git, marketing teams and editors prefer a visual interface.</p>
<p>Enter <strong>Sveltia CMS</strong>: a lightweight, fast, and secure Content Management System that gives you a WordPress-like editing experience without the WordPress vulnerabilities.</p>
<h2 id="what-is-a-git-based-cms">What is a Git-Based CMS?</h2>
<p>Traditional CMS platforms save your articles in a database (like MySQL). Every time someone loads the page, the server queries the database. This is slow and prone to hacking.</p>
<p>Sveltia CMS works differently. It’s a “Decapitated” or “Headless” interface that connects directly to your GitHub repository. When you hit “Publish” in Sveltia, it doesn’t write to a database; it creates a new Markdown file and commits it to your <a href="/setup/private-github-repository/">Private GitHub Repository</a> holding the ZeroPress code.</p>
<h2 id="why-we-choose-sveltia-over-netlify-cms">Why We Choose Sveltia over Netlify CMS</h2>
<p>ZeroPress configures Sveltia CMS out-of-the-box for Pro users because of its significant advantages over older git-based alternatives like Netlify CMS (Decap CMS):</p>
<ul>
<li><strong>Unmatched Speed</strong>: Built with Svelte, the admin interface loads instantly.</li>
<li><strong>Modern UI</strong>: A clean, intuitive design that editors find familiar and easy to navigate.</li>
<li><strong>Zero Configuration</strong>: We pre-configure the <code class="language-plaintext highlighter-rouge">config.yml</code> so it perfectly maps to your ZeroPress categories, tags, and post structure.</li>
</ul>
<h2 id="how-to-edit-content">How to Edit Content</h2>
<p>If you are on a ZeroPress Pro plan, your Sveltia CMS is already set up.</p>
<ol>
<li>Navigate to your site’s admin panel (usually <code class="language-plaintext highlighter-rouge">yourdomain.com/admin/</code>).</li>
<li>Log in using your GitHub account (this is highly secure and leverages GitHub’s OAuth system).</li>
<li>You will see a dashboard displaying your <strong>Collections</strong> (Posts, Pages, Authors).</li>
<li>Click <strong>New Post</strong>.</li>
<li>Fill in the Title, Date, Category, and write your content in the Rich Text Editor. You can easily upload images directly into the editor; Sveltia will handle saving the images into the correct <code class="language-plaintext highlighter-rouge">images/uploads/</code> folder in your repository.</li>
<li>Click <strong>Publish</strong>.</li>
</ol>
<p>This action triggers an automatic rebuild on Cloudflare Pages. Within roughly 60 seconds, your new post will be live globally.</p>
<h2 id="the-best-of-both-worlds">The Best of Both Worlds</h2>
<p>By combining ZeroPress with Sveltia CMS, you get the absolute security and performance of a static site, paired with the easy, visual content management your team demands.</p>
<div class="mt-12 p-6 bg-base-200/50 rounded-2xl border border-base-200">
<h3 class="text-xl font-bold mb-6 text-center">ZeroPress Learning Path</h3>
<!-- Tracker Visual -->
<div class="flex items-center justify-between relative mb-8">
<!-- Connecting Line -->
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-1 bg-gray-200 -z-10 rounded-full"></div>
<div class="absolute left-0 top-1/2 -translate-y-1/2 h-1 bg-primary -z-10 rounded-full transition-all duration-500"
style="width: 99.99%;"></div>
<!-- Step 1 -->
<a href="/setup/private-github-repository/"
class="flex flex-col items-center gap-2 group w-1/4 no-underline hover:no-underline">
<div
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors bg-primary text-white shadow-lg shadow-primary/30">
1</div>
<span
class="text-sm text-center font-medium text-base-content group-hover:text-primary transition-colors">GitHub
Repo</span>
</a>
<!-- Step 2 -->
<a href="/setup/deploying-cloudflare-pages/"
class="flex flex-col items-center gap-2 group w-1/4 no-underline hover:no-underline">
<div
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors bg-primary text-white shadow-lg shadow-primary/30">
2</div>
<span
class="text-sm text-center font-medium text-base-content group-hover:text-primary transition-colors">Cloudflare
Pages</span>
</a>
<!-- Step 3 -->
<a href="/setup/configuring-custom-domain/"
class="flex flex-col items-center gap-2 group w-1/4 no-underline hover:no-underline">
<div
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors bg-primary text-white shadow-lg shadow-primary/30">
3</div>
<span
class="text-sm text-center font-medium text-base-content group-hover:text-primary transition-colors">Custom
Domain</span>
</a>
<!-- Step 4 -->
<a href="/features/setting-up-sveltia-cms/"
class="flex flex-col items-center gap-2 group w-1/4 no-underline hover:no-underline">
<div
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors bg-primary text-white shadow-lg shadow-primary/30">
4</div>
<span
class="text-sm text-center font-medium text-base-content group-hover:text-primary transition-colors">Sveltia
CMS</span>
</a>
</div>
<!-- Navigation Buttons -->
<div class="flex justify-between items-center pt-4 border-t border-base-200 mt-4">
<a href="/setup/configuring-custom-domain/" class="btn btn-ghost btn-sm gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back: Custom Domain
</a>
<a href="/dashboard/" class="btn btn-success text-white btn-sm gap-2">
Go to Dashboard
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-base-200">
<!-- Categories -->
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="font-bold text-base-content/70">Categories:</span>
<a href="/features/"
class="badge badge-primary badge-outline font-bold hover:badge-active transition-colors uppercase text-xs">
Features
</a>
</div>
<!-- Tags -->
<div class="flex flex-wrap items-center gap-2">
<span class="font-bold text-base-content/70">Tags:</span>
<a href="/tag/cms/"
class="text-primary hover:underline transition-colors">
cms
</a>
<a href="/tag/sveltia/"
class="text-primary hover:underline transition-colors">
sveltia
</a>
<a href="/tag/git/"
class="text-primary hover:underline transition-colors">
git
</a>
</div>
</div>
</div>
</main>
</div>
</div>
</article>
</main>
<footer data-pagefind-ignore>
<!-- This won't pollute your search results -->
Copyright 2026.
</footer>
This level of control ensures your users find exactly what they are looking for without the bloat of traditional WordPress search queries.
Categories:
Features