We’re delighted to launch Bookshop: an open-source framework to speed up development and reduce maintenance on static websites by developing components in isolation.
The key to avoiding this jungle is a component-driven workflow. Ideally, you isolate each component’s template and CSS. Doing this makes the website far easier to maintain and gives you a framework for adding as many components as you’d like, without your codebase getting out of control.
In a traditional React application, you might reach for Storybook to solve this problem. Storybook provides the tooling needed to build components in isolation, and we’re big fans of the workflow that it brings to our React projects.
When we started tackling static websites with a component-driven methodology, however, we hit some limitations working with Storybook outside of the JS framework world.
Bookshop is a component browser and playground, which addresses these limitations and brings component-driven development to static site generators (SSGs).
The benefits include:
Finally, Bookshop integrates tightly with CloudCannon for your content management needs. Editors can see the full catalog of components available and use them to build pages visually, all powered by your custom-built component library. No extra steps are necessary.
And did we mention that Bookshop adds a local component browser to your static webdev process? With a hot-reloading live-preview UI explorer for static template components, your workflow will thank you.
HTML-based SSGs such as 11ty, Jekyll, and Hugo (support coming soon) benefit the most for Bookshop, as existing tooling doesn’t support their native templating languages. However, there will still be benefits to using Bookshop with React or Vue-based SSGs, particularly if you want content editors to manage content visually on CloudCannon. Support for a Bookshop workflow with these SSGs will be coming later this year.
To help get you started with Bookshop, we’ve created a starter theme (Jekyll, 11ty) to give you a boilerplate to build the rest of you site on. We’re also launching a collection of free, high quality templates. These production-ready templates make full use of Bookshop, are optimized for CloudCannon and can be used for free for any project, commercial or not.
We can’t wait to see how you start using Bookshop on your web projects and reach new productivity levels. To get started, check out the readme for Bookshop in the GitHub repository. We’re always open to any feedback. If you hit a problem or have an idea to improve Bookshop, open an issue on the repository, and we’ll be there to help.