Welcome to the guide for setting up an Eleventy website using Bookshop. Through this guide, we'll cover what Bookshop is and what it brings to the table, how to integrate it into an Eleventy website, and how to connect everything together to produce a fully static website that can be edited live in the browser using CloudCannon.
What is Bookshop?#
Bookshop is a collection of tooling that provides a component development workflow for static websites, and aids in the creation of a page-building interface in the CloudCannon CMS.
An important facet of Bookshop is that it is fully open-source, and available on Github at CloudCannon/bookshop. As a tool that integrates into your codebase, we want to ensure that you aren't vendor-locked to our platform. Sites built using Bookshop remain fully portable, and can be built or hosted anywhere on the web.
What does Bookshop bring to Eleventy?#
For developers working locally, Bookshop first provides an Eleventy plugin that is used to load your components.
When dealing with your components, this plugin replaces the include tag that you would otherwise use. In a layout, this looks like:
{% bookshop "hero" text: "My title text" %}
The semantics of this tag are the same as the standard include tag,
but instead of loading an include Bookshop will, in this case, locate and load the hero component.
We'll cover more about components in another chapter; for now, the important thing to know is that Bookshop components
use the templating language of your SSG, and in most cases can be directly migrated from your existing templating.
Another tool that Bookshop provides is the Bookshop Component Browser. This allows you to view and test your components locally without adding them to pages on your site.
What does Bookshop bring to CloudCannon?#
Once your site is connected to CloudCannon, Bookshop's live editing features use your component files to generate CloudCannon configuration as part of your site build. Under the hood Bookshop creates CloudCannon Structures for each of your components, which allows your team to add and remove component objects in the CMS.
Next, when your site is loaded into CloudCannon's Visual Editor, an additional Bookshop script is loaded. This script loads your component files into the browser, alongside a Bookshop engine that understands Eleventy components. Using this, Bookshop can subscribe to data in the CMS using the CloudCannon Visual Data Preview API to render changes to your components live on the page.
Finally, after rendering components, the Bookshop script tags them with CloudCannon Visual Data Bindings. These data bindings allow you to click on elements directly in the Visual Editor, and add, edit, or rearrange them visually.