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

Add Stackbit to Your Theme

1) Add a stackbit.yaml

Add a stackbit.yaml file to your theme. Specify which folders your content and data files reside in, the build command, the output folder etc.

2) Model your content

Define content models in the stackbit.yaml. For any CMS to edit pages and content it needs to understand your content in a structured format.

Example

Let's say you have a basic 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.

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

A blog post has the following front-matter.

---
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...

And here is the corresponding content model in the stackbit.yaml.

# 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, import the theme into Stackbit. We perform a range of tests to validate the theme. Once the import completes, you can select any CMS to connect 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 use the Create With Stackbit button to construct a direct link to the new project flow with your custom theme URL preset.

Uniform Docs

Read our complete documentation.

stackbit.yaml

Uniform Theme Requirements

Content Models

Page Models

Data Models

Object Models

Field Models