Turn any theme into a CMS-powered website with Stackbit's Uniform theme model.

Stackbit enables you to take any custom theme and make it capable of connecting to a wide range of supported CMS. In order to add your custom theme, you'll need to provide Stackbit with some details about how the content in your CMS backend maps to the content displayed in your theme. Here are the steps:

1) Add a stackbit.yaml

The stackbit.yaml file holds the configuration necessary to make your theme work on Stackbit. This includes specifying which folders your content and data files reside in, the build command for your project, the output folder where your project gets build, and more. The full list of configuration parameters and their usage can be found here.

2) Model your content

For any CMS to edit the content on your pages, it needs to understand your content in a structured format. Stackbit does this by defining content models in the stackbit.yaml. There are a lot of options when configuring your content model that we cover in detail here. However, let's look at basic example.

Example

Let's say you have a blog theme with some markdown files for your blog posts.

A CMS must be able to a) create new blog posts b) edit blog posts and c) provide input fields in the GUI to edit individual front-matter fields. When you define content models you are writing a schema which tells the CMS where pages are located and what fields they have.

In our example, posts live in a posts folder under content:

├── content
│   └── posts
│       ├── learning-css-grid.md
│       └── flexbox-tutorial.md

Each post contains a few front-matter fields:

---
title: "Learning CSS Grid"
draft: true
thumbnail: "images/css-grid.png"
---

# CSS Grid is the new way to layout your pages

This is a blog post about using CSS grid to layout our pages...

The stackbit.yaml for the above example would define where content is located (pagesDir) and then define the page model for the posts (given the label article in this example). Within that content model, a field model is created that defines the type and label for all of the front matter metadata.

# stackbit.yaml
...
pagesDir: content
models: # content models go inside here
  article: # a page model called "article"
    type: page # the content model type, can be: page, data, object
    label: Post
    folder: posts # all .md files in `content/posts` will use this model
    fields: # define the frontmatter fields
      - type: string # this will use a  text input field in the CMS
        name: title # this identifies the front-matter field "title"
        label: Blog Post Title
      - type: boolean # this will use a toggle input in the CMS
        name: draft
        label: Save as a draft
      - type: image # this will use a file upload widget in the CMS
        name: thumbnail
        label: Blog Post Thumbnail

3) Import your theme

Once you have modelled your content, it's time to import the theme into Stackbit. We will perform a range of tests to validate the theme. Once the import is complete, you'll be able to select any CMS and 1-click deploy to Netlify.

  1. Create a new Stackbit project (No sign-up required)
  2. On the right hand side where it says "Use Your Own Theme" click "Learn More >"
  3. Paste the Github URL of your theme, it will be validated and you'll be on your way to creating a new website.
  4. You can also add a Create With Stackbit button to your Github project to allow anyone to launch new sites on Stackbit powered by your theme.

Custom themes Docs

Read our complete documentation or view our tutorial.

stackbit.yaml

Uniform Theme Requirements

Content Models

Page Models

Data Models

Object Models

Field Models

Tutorial

Ready to get started?