Rankveo for Eleventy

Publish in rankveo, render on your Eleventy site. One global data file, and your templates read articles like any other data.

@rankveo/eleventy

Installation

Install the package in your existing Eleventy project.

terminal

npm install @rankveo/eleventy

Create a Rankveo account View source on GitHub

Two steps

Add the data file

Eleventy picks it up automatically.

// _data/blog.js
import { rankveoData } from
  '@rankveo/eleventy';

export default async () =>
  rankveoData();

Paginate as usual

Articles are data, so Eleventy’s pagination just works.

---
pagination:
  data: blog.articles
  size: 9
  alias: articles
---

Render the body

Already HTML, so nothing to convert.

{% raw %}<div class="article-body">
  {{ article.html | safe }}
</div>{% endraw %}

Small on purpose

Eleventy’s appeal is that it stays out of the way. The integration is one data function and a handful of templates you own - no abstraction between you and your own site.

Bodies fetched up front A template cannot await, so everything a page renders exists in the cascade.
Batched, not blasted A large archive stays inside your rate limit on a cold build.
Sitemap and RSS as templates Two small .11ty.js files, with the image entries plugins miss.

# a build

[11ty] Writing _site/blog/index.html
[11ty] Writing _site/blog/rss.xml
[11ty] Writing _site/blog/sitemap.xml
[11ty] Writing _site/blog/
         how-to-rank-in-ai-answers/
[11ty] Copied 1 Wrote 9 files in 0.12s

Worth knowing before you start

Static means rebuild Eleventy output has no runtime. Point rankveo at your host’s deploy hook and publishing triggers a build.

Any template language The starter is Nunjucks, but articles are plain data - Liquid, Handlebars or JavaScript templates work the same way.

Cache between builds Eleventy can persist fetched data locally, so day-to-day rebuilds do not refetch the whole archive.

Style the article HTML blog.css ships with the starter and restores what CSS resets strip: list markers, heading sizes, table borders.