maliMirkec / 11ty-liquid-live-preview

Live preview with Eleventy, Contentful, and Liquid templating.

Eleventy Liquid Live Preview

This is a starter project for the simple Eleventy site that pulls the data from Contentful, but also allows the live preview on Contentful.

See the demo site: 11ty-llp.netlify.app/.

The project

Clone the project.

Install dependencies.

Contentful

Create a new Contentful project.

Use the following content type structure:

Settings

Name	Field Type
Name (Entry title)	Short text
Description	Long text
OG Image	Media
Collaborators	Short text, list
URL	Short text
Source	Short text
Twitter	Short text

Page

Name	Field Type
Title (Entry title)	Short text
Slug	Short text
Description	Long text
Og Image	Media
Components	References, many

Components

Name	Field Type
Name (Entry title)	Short text
Title	Short text
Subtitle	Short text
Text	Long text
CTA	References, many
Cards	References, many
Media	Media, many files
Note	Long text
Type	Short text

CTA

Name	Field Type
Name (Entry title)	Short text
Text	Short text
Href	Short text

The Visual Modeler

Environment variables

Add the .env file to the root of the project.

Use the data from the Contentful.

CONTENTFUL_SPACE_ID=xyz
CONTENTFUL_ACCESS_TOKEN_DELIVERY=xyz
CONTENTFUL_ACCESS_TOKEN_PREVIEW=xyz
CONTENTFUL_ENVIRONMENT=master

Run or build

Run the project.

npm run dev

Open localhost:8080.

Preview Contentful page by page's id localhost:8080/preview/?id=xyz

Deploy

Don't forget to create your Contentful project and .env file.

Deploy to Netlify

Try on StackBlitz

Resources

Blog post: Building a Live Preview with Eleventy, Contentful, and Liquid Templating