## Table of Contents

- [Jekyll](#jekyll)

---

[API](https://microlink.io/docs/api/getting-started/overview)

[GUIDES](https://microlink.io/docs/guides) [MQL](https://microlink.io/docs/mql/getting-started/overview) [SDK](https://microlink.io/docs/sdk/getting-started/overview) [CARDS](https://microlink.io/docs/cards/getting-started/overview)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

## Jekyll

[Copy for LLM](https://microlink.io/docs/sdk/integrations/jekyll.md "Copy content for LLM")

\|

[View as Markdown](https://microlink.io/docs/sdk/integrations/jekyll.md "View content as Markdown")

The

[Jekyll](https://jekyllrb.com/)

integration is pretty similar to the [Vanilla](https://microlink.io/docs/sdk/integrations/vanilla) approach.

Just you need to be sure to load the script. A good place to put it's `_layouts/default.html`:

```html
<script src="//cdn.jsdelivr.net/npm/@microlink/vanilla@latest/umd/microlink.min.js"></script>

<script>

  document.addEventListener('DOMContentLoaded', function (event) {

    microlink('.card-preview')

  })

</script>
```

In the code above, we are associating microlink cards with the class name `card-preview`.

So now, when we write a new jekyll post, we are going to associate `card-preview` class name with the links we want to convert into previews.

```markdown
[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview}
```

Then the link will be rendered as

You can pass any [Microlink API](https://microlink.io/docs/api/getting-started/overview) query parameter as a `data-*` field.

```markdown
[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-size="large"}
```

It's the equivalent to passing `{size: 'large'}` with the [Vanilla](https://microlink.io/docs/sdk/integrations/vanilla) integration.

If you want to customize the style, it can be done using

[CSS variables](https://microlink.io/docs/sdk/getting-started/styling#css-variables)

or [CSS classes](https://microlink.io/docs/sdk/getting-started/styling#css-classes).

Last updated on January 10, 2026

[Edit on GitHub](https://github.com/microlinkhq/www/blob/master/src/content/docs/sdk/integrations/jekyll.md)