Getting Started with Content Mode

Enable Content Mode and set up your first content collection to start building content-driven sites.

Enabling Content Mode

To get started with Content Mode, you'll need to enable it in your site settings:

Step 1: Open Site Settings

Navigate to your site's settings and open the Build Settings section.

Step 2: Enable Content Mode

Find the "Enable Content Mode" toggle and turn it on. When you enable Content Mode, Hammer automatically:

  • Creates a content/ directory for your content files
  • Creates a templates/ directory for your HTML templates
  • Creates a public/ directory for static assets (images, uploads)
  • Creates an initial content.config.json configuration file
Tip: You can enable or disable Content Mode at any time. Disabling it won't delete your content files or templates, but they won't be processed during builds.

Project Structure Overview

Once Content Mode is enabled, your project structure will look like this:


                                your-site/
                                  ├── content/              # Content files (Markdown, YAML)
                                  │   ├── posts/           # Example: Blog posts collection
                                  │   └── authors/         # Example: Authors collection
                                  ├── templates/            # HTML templates with Hammer tags
                                  │   ├── post.html        # Template for blog posts
                                  │   └── author.html      # Template for author pages
                                  ├── public/               # Static assets (images, uploads)
                                  ├── content.config.json   # Content configuration
                                  └── hammer.json           # Site configuration

Directory Purposes

  • content/: Contains all your content files organized by collection
  • templates/: HTML templates that define how content is rendered
  • public/: Static assets that are copied as-is to the build output
  • content.config.json: Configuration file that defines collections, templates, and output paths

First Steps

After enabling Content Mode, follow these steps to create your first content-driven pages:

Step 1: Review the Configuration

Open the generated content.config.json file. This file defines your collections and how they're processed. Initially, it may be empty or contain example configurations.

Step 2: Create Your First Collection

Define a collection in content.config.json. For example, to create a blog posts collection:

{
                                  "collections": {
                                    "posts": {
                                      "path": "content/posts",
                                      "format": "md",
                                      "template": "templates/post.html",
                                      "output": {
                                        "filename": "blog/{{ slug }}/index.html"
                                      }
                                    }
                                  }
                                }

Step 3: Add Content Files

Create your first content file in the collection directory. For example, create content/posts/my-first-post.md:

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



                                  This is my first blog post using Content Mode!

Step 4: Create a Template

Create a template file that defines how your content is rendered. For example, create templates/post.html:

<!DOCTYPE html>
                                  <html>
                                  <head>
                                    <title><!-- $doc.title --></title>
                                  </head>
                                  <body>
                                    <article>
                                      <h1><!-- $doc.title --></h1>
                                      <div><!-- $!doc.body --></div>
                                    </article>
                                  </body>
                                  </html>

Step 5: Build Your Site

Build your site as usual. Hammer will process all content files in your collections and generate pages using your templates. Your first post will be available at the output path you specified (e.g., blog/my-first-post/index.html).

Next Steps

Now that you've enabled Content Mode and created your first collection, learn more: