Workflow Examples

See Content Mode in action with real-world workflow examples for blogs, portfolios, and documentation sites.

Blog Setup

Create a simple blog with Content Mode in just a few steps:

Step 1: Enable Content Mode

Enable Content Mode in your site's Build Settings.

Step 2: Create Posts Collection

Add a posts collection to content.config.json:

{
  "collections": {
    "posts": {
      "path": "content/posts",
      "format": "md",
      "template": "templates/post.html",
      "output": {
        "filename": "blog/{{ slug }}/index.html"
      },
      "fields": {
        "title": { "type": "string", "required": true },
        "date": { "type": "datetime", "required": true }
      }
    }
  }
}

Step 3: Create Template

Create templates/post.html:

<!DOCTYPE html>
<html>
<head>
  <title><!-- $doc.title --></title>
</head>
<body>
  <article>
    <h1><!-- $doc.title --></h1>
    <p><!-- $helpers.formatDate(doc.date, "dd MMM yyyy") --></p>
    <div><!-- $!doc.body --></div>
  </article>
</body>
</html>

Step 4: Add Blog Posts

Create Markdown files in content/posts/:

---
title: "My First Blog Post"
date: "2024-01-15T10:00:00Z"



This is my first blog post!

Step 5: Build

Build your site. Each post will be generated at blog/{slug}/index.html.

Multi-Author Blog

Extend the blog setup to support multiple authors with relations:

Step 1: Create Authors Collection

Add an authors collection to your config:

{
  "collections": {
    "posts": {
      "path": "content/posts",
      "format": "md",
      "template": "templates/post.html",
      "output": {
        "filename": "blog/{{ slug }}/index.html"
      },
      "fields": {
        "title": { "type": "string", "required": true },
        "date": { "type": "datetime", "required": true },
        "author": {
          "type": "relation",
          "collection": "authors",
          "valueField": "slug"
        }
      }
    },
    "authors": {
      "path": "content/authors",
      "format": "yaml",
      "template": "templates/author.html",
      "output": {
        "filename": "authors/{{ slug }}/index.html"
      }
    }
  }
}

Step 2: Create Author Files

Create YAML files in content/authors/:

name: "John Doe"
slug: "john"
bio: "Writer and developer"
avatar: "/uploads/john.jpg"

Step 3: Reference Authors in Posts

Reference authors in post front matter:

---
title: "My Post"
date: "2024-01-15T10:00:00Z"
author: "authors/john"
---

Step 4: Display Author Info

Update your template to show author information:

<!-- @if doc.author -->
  <p>By <!-- $doc.author.name --></p>
  <img src="<!-- $doc.author.avatar -->" alt="<!-- $doc.author.name -->">
<!-- @endif -->

Product Catalog

Create a product catalog using YAML files for structured product data:

Step 1: Create Products Collection

{
  "collections": {
    "products": {
      "path": "content/products",
      "format": "yaml",
      "template": "templates/product.html",
      "output": {
        "filename": "products/{{ slug }}/index.html"
      },
      "fields": {
        "name": { "type": "string", "required": true },
        "price": { "type": "number", "required": true },
        "description": { "type": "text", "required": true },
        "image": { "type": "image", "required": true }
      }
    }
  }
}

Step 2: Create Product Files

Create YAML files for each product:

name: "Widget Pro"
slug: "widget-pro"
price: 29.99
description: "A premium widget for all your needs."
image: "/uploads/widget-pro.jpg"
category: "categories/widgets"

Step 3: Create Product Template

Create a template to display product information:

<!DOCTYPE html>
<html>
<body>
  <div class="product">
    <h1><!-- $doc.name --></h1>
    <img src="<!-- $doc.image -->" alt="<!-- $doc.name -->">
    <p class="price">$<!-- $doc.price --></p>
    <p><!-- $doc.description --></p>
  </div>
</body>
</html>

Step 4: Create Product List

Create a list template to show all products:

<!DOCTYPE html>
<html>
<body>
  <h1>Products</h1>
  <div class="products-grid">
    <!-- @loop product in collections.products -->
      <div class="product-card">
        <h2><a href="/products/<!-- $product.slug -->/"><!-- $product.name --></a></h2>
        <p>$<!-- $product.price --></p>
      </div>
    <!-- @endloop -->
  </div>
</body>
</html>

Documentation Site

Create a documentation site with organized pages and navigation:

Step 1: Create Pages Collection

{
  "collections": {
    "pages": {
      "path": "content/pages",
      "format": "md",
      "template": "templates/page.html",
      "output": {
        "filename": "docs/{{ slug }}/index.html"
      },
      "fields": {
        "title": { "type": "string", "required": true },
        "order": { "type": "number", "required": false }
      }
    }
  }
}

Step 2: Organize with Nested Directories

Organize documentation pages in nested directories:

content/pages/
├── getting-started/
│   └── introduction.md
├── guides/
│   ├── installation.md
│   └── configuration.md
└── reference/
    └── api.md

Step 3: Create Navigation Template

Create a navigation component that lists all pages:

<nav>
  <ul>
    <!-- @loop page in collections.pages -->
      <li>
        <a href="/docs/<!-- $page.slug -->/"><!-- $page.title --></a>
      </li>
    <!-- @endloop -->
  </ul>
</nav>

Step 4: Use Relations for Cross-References

Link related pages using relations:

---
title: "Installation Guide"
relatedPages:

    

  • "pages/getting-started"
    • 

  • "pages/configuration"
    • 


---

Next Steps

Now that you've seen workflow examples, explore: