Building CMBox.io in a week with CM Box Site Builder & CMS.

It’s been a full year since the Fishbowl Solutions team set out to create the ultimate replacement for Oracle Content Management (OCM). Since then, we've been heads-down building CM Box—a flexible, modern platform designed to deliver seamless digital experiences.

While the Sales and Marketing team has done an incredible job driving awareness—connecting with current OCM customers, launching targeted campaigns  and updating the Fishbowl Solutions website—it was time to do more than talk about it.

That’s why we built and launched CMBox.io in just one week using the CM Box Site Builder and CMS. This dedicated site is your go-to resource for exploring everything CM Box has to offer: key features, real-world solutions, and a transparent roadmap that shows where the platform is headed. Our goal? To deliver a powerful, future-ready Digital Experience Platform you can trust.

Check it out

In this post, I’ll walk you through how we designed, built, and launched the new responsive CMBox.io website—without using AI—and all in just one week!

A future post on using AI with CM Box to build automed sites with MCP coming soon.. ;)

Steps to Build a Microsite with CM Box

From Zero to Hero...

• Plan & Design the Website (Designer)
  Plan UX flow, layout requirements using wireframes and design tools & apply UI brand.
• Architect the Content Model (Architect)
  Structure content types, metadata, and relationships to support scalable and reusable content.
• Build Reusable Site Components (Developer)
  Develop modular block components (e.g., banners, CTAs, content sections) using your preferred front-end stack.
• Create a New Site in CM Box (Architect)
  Setup CM Box’s site builder, create repository and assign content models, permissions & configure Stage instance to preview site updates.
• Contribute & Curate Content (Editor)
  Add, review, and manage content for each section using the built-in CMS and content workflows.
• Publish to Production (Editor)
  Approve and deploy the site to your live environment through CM Box’s publishing tools.
• Enable CI/CD for Auto Publishing via Webhooks (Architect)
  Integrate Git workflows with CM Box to auto-deploy builds triggered by CM Box Content Lifecycle publish webhook.
• Configure CDN (DevOps / Architect)
  Optimize performance and global delivery by linking your site to a CDN (e.g., Cloudflare, Akamai).

1. Plan & Design the Website (Designer)

Before you write a single line of code or configure a CMS, it all starts with a plan. This is where we sketch out your vision for the site—its structure, layout, branding, and user experience.

You can use tools like Figma, Adobe XD, Photoshop, or like I do a sketch pad to draw and plan a draft —whatever helps you quickly map out your ideas.

I then jump into Adobe XD, which in many ways feels like a lightweight version of Figma. It’s fast, simple, and gets the job done when you need to show your ideas to the team and create a quick prototype without overcomplicating things.

2. Architect Content Model (Architect)

With the design sketched out & prototyped, the next step is to map out the content model—essentially the backbone of how content would be structured, reused, and managed across the site by the editors.

This part is all about thinking ahead:

What types of content will be needed?
(e.g., hero banners, testimonials, blog posts, feature cards)

What fields should each type have?
(e.g., title, image, description, CTA)

Which pieces of content will be reused across multiple pages or contexts?

As well as defining reusable content block components that editors could use to assemble pages. These blocks act like flexible Lego pieces—things like Hero Container, Section Block, Article, FAQs —that can be dragged, reordered, or toggled as needed.

The goal here is to empower your editors to build pages freely without needing a developers support every time. By getting the content model right up front, we ensure scalability which makes the build phase far easier.

2.1 Deep Dive into the Content Model

Let’s take a look at a few of the core components created for the CMBox.io site:

Hero Block
The Hero is typically the first content block on a page—right below the navigation. It’s designed to make a strong first impression and introduce the key message of the page.

Fields Included:

• Header Title – Main heading for the section.
• Sub Title – Supporting copy that adds context or emphasis.
• Button List – One or more CTA buttons (e.g., “Request a demo”, “Product Brief”).
• Hero Image – Visual element to reinforce the message (can be full-width, right-aligned, or background).
• Layout Control – Options to define how the content is arranged (e.g., image left/right, text alignment, background styles etc).

Section Block
The Section block acts as a wrapper or container for other content blocks on the page. Think of it as the scaffolding that helps organize and visually separate different parts of a page.

It’s not meant to display content on its own—instead, it provides structural context and styling for nested components like carousels, article blocks, or even another full-width feature section.

Fields Included:

• Section Label – The title or label for the section (e.g., “Latest News”, “Case Studies”).
• Label Placement – Controls where the label appears (top, inline, hidden, etc.).
• Width – Layout width options such as Full Width, Constrained, or Content Width for more precise page design.
• Label Style – Choose from different visual styles for the section label display.
• Slot – The most powerful part of the Section block: a Slot field that references other Asset Type Definitions (e.g., Article Block, Carousel, Hero). This turns the Section into a flexible container that can dynamically load and render multiple child components.

Article Block
The Article block is a core content component designed to give editors a flexible way to add rich, long-form content to a page—ideal for blog posts, news updates, product overviews etc.

It’s built to balance editor simplicity with content versatility, offering just the right structure to present information clearly while keeping the layout visually engaging.

Fields Included:

• Article Title – The main heading for the article or section.
• Hero Image – An optional featured image that sits at the side of the article block, ideal for grabbing attention.
• Body Copy – Rich text content where editors can format paragraphs, lists, links, and more using the built-in WYSIWYG editor.
• Content Cards (optional) – Structured sub-elements used to break up longer content into digestible sections—perfect for highlighting stats, quotes, product features, or key takeaways.

Card Group Block
The Card Group block is a flexible layout component used to display a collection of individual Card blocks in a unified, styled format. It’s ideal for showcasing things like benefits, features, team members, case studies, resources, or any structured, repeatable content.

This block gives editors control over how the cards are visually arranged, making it easy to create responsive, grid-style content sections that look great on any screen.

Fields Included:

• Layout Control – Options to adjust how the cards are displayed (e.g., number of columns, alignment, spacing, and responsive behavior).
• Cards (Asset Reference Field) – A reference field that allows editors to select and associate multiple Card components. These can be pulled in from the content model and reused across different pages or groups.

In this example, we’ve associated six individual Card blocks to the Card Group, allowing for quick assembly of a section like “Benefits”, “Features” —all without duplicating effort.

Card List Block
The Card List block provides editors with a quick and efficient way to display a simple list of cards—each containing an image, title, and content body. It’s perfect for use cases like feature overviews, service listings, blog teasers, or team profiles.

Unlike the Card Group block, which emphasizes layout control and reusability, the Card List block is streamlined for rapid content entry and presentation.

Contact Form
The Contact Form block empowers editors to easily create and configure custom contact forms directly within CM Box—perfect for capturing user inquiries, lead generation, demo requests, or event sign-ups.

Our forms are integrated with Oracle Eloqua, enabling seamless tracking, lead capture, and marketing automation downstream.

To power the Contact Form block, we use a dedicated Form Field asset type. This modular approach gives editors the ability to craft custom forms field-by-field, with full flexibility and no need for custom code.

Each Form Field asset represents a single input within a form—whether it's a simple text field or a more complex input type.

Asset Type Definitions

To bring all of these components together, CM Box leverages a set of Asset Type Definitions—the building blocks behind every piece of content and configuration available to editors.

Below is a visual snapshot of the full list of 18 Asset Types used for building the CMBox.io site. Some of these were custom-defined to support our site structure and components, while others are out-of-the-box (OOTB) definitions that come standard with every CM Box repository.

3. Build Site Reusable Block Components (Developer)

With the architecture in place—asset types defined and the content model locked in—its time to move on to building the reusable content blocks. Allowing editors to quickly create content pages from within the CM Box Site Builder.

⚙️ Component Islands Architecture

One of the key reasons we chose Astro is its framework-agnostic “islands” model, which allows developers to build UI components using the framework they’re most comfortable with—including Svelte, React, Vue, Solid, or even just plain HTML and JS.

For this project, we leaned into Svelte behind the scenes due to its clean syntax, low bundle size, and built-in reactivity. But the beauty of Astro is that you don’t have to use Svelte—your team can plug in any component framework they already know.

🧠 Why Not Just Use Astro Alone?

You absolutely can build purely with Astro and vanilla JavaScript. But when you're developing components that require dynamic behavior—such as:

• State management
• User interactions
• Form validation
• Animations
• Real-time UI updates

…it’s much more productive to use a reactive framework like Svelte (or React, Vue, etc.). These frameworks help you move faster when building dynamic widgets and interactive UI controls, especially when working inside a modular CMS like CM Box.

So while Astro handles the structure, routing, and performance, frameworks like Svelte help deliver the rich, interactive content blocks editors expect.

3.1 Example: Creating a CM Box Content Block

Let’s walk through how we create a CM Box content block in practice. In this example, we’re building a Hero block using AstroJS and Svelte, where the content is dynamically populated from CM Box's editor-defined asset created from the site builder.

Even though this particular Hero component doesn’t currently require interactivity, we chose to implement it in Svelte so we can extend it later with animations, interactions, or dynamic behavior. For now, Astro compiles it down to static HTML, keeping performance high.

Hero.astro
– Data Preparation Layer

This file acts as the wrapper and controller for the Hero component. It:

• Imports the dynamic Svelte component (Hero.svelte)
• Pulls in image renditions from CM Box using a helper function
• Passes structured props to the rendering component

Hero.svelte
– The UI Component

This is the actual rendering component—receiving item and heroImg as props and displaying them using Tailwind CSS for styling.

✅ Why This Pattern Works

• Editor-driven: Editors control the content through CM Box Site Builder.
• Component-driven: Developers build isolated, testable components using tools like storybook.
• Performance-first: Astro compiles to static HTML, with zero-JS output unless needed.
• Future-proof: Swapping out Svelte for React or Vue is trivial thanks to Astro’s flexibility.

4. Create a New Site in CM Box (Architect)

Now that the content blocks are developed and ready to go, it’s time to stand up a new site instance inside CM Box. This is where all the planning, architecture, and development start to come together.

The first step in this process is to create a new repository and assign the asset type definitions and assign users or groups who can manage the content within the CM Box repository.

This repository becomes the central hub where all content, components, and configuration for the site live.

🏗️ Creating the Site Instance in CM Box
Next to create your site, simply go to the Sites section in CM Box and follow these steps:

1. Add a Site Name
   This will be the human-readable name of your microsite (e.g., “CMBox.io Microsite”).
2. Add a Description
   Use this field to give editors or collaborators context about the site—its purpose, target audience, or lifecycle status (e.g., "Product launch campaign site for 2025").
3. Assign the Repository
   Here’s where you link the repository you just created. This connection tells CM Box which asset types should power this specific site instance.

Once created, this site becomes your working canvas—and the starting point for content editors to begin contributing, previewing, and ultimately publishing the live site.

🔍 Configuring Site Preview URLs

After creating your site instance and linking it to the repository, the next important step is to define the Preview URLs. This is where a developer has deployed a staging site to preview site updates using the CMBox base template.

These URLs allow editors to view a live, real-time rendering of the site as they create and update content—without needing to wait for a production publish.

For our CMBox.io microsite, we configured a preview environment using Netlify, which provides fast, flexible static hosting with CI/CD and Node.js support. This makes it ideal for previewing CM Box content-driven sites during the editorial process.

📍 Preview URL used in this project:
https://cmbox-product-site-preview.netlify.app

🧩 How It Works

When editors open a content item or page in CM Box, the system uses the defined preview URL to:

• Fetch the latest version of the site from CM Box Sites Repository
• Update site structure to load in updated content from GraphQL.
• Display a live preview of how the page will look with the current content

This means editors can see changes in context—how content will be laid out, how components render, and how different blocks interact—before hitting publish.

⚙️ Platform Flexibility

While we used Netlify for this example, CM Box is platform-agnostic. You can host your staging environment on:

• Vercel
• AWS Amplify
• Render
• Cloudflare Pages
• Custom Node.js servers
• Or even inside your enterprise infrastructure

As long as the platform can run a Node.js-based SSR build, it will work perfectly with CM Box’s preview system.

5. Contribute & Curate Content (Editor)

With the site infrastructure set up and the content blocks in place, editors can now step in and begin bringing the site to life. The CM Box Site Builder provides a full in-browser content authoring experience, making it easy for non-technical users to build and manage content-rich pages—without touching code.

🧭 Intuitive Editing Environment

When an editor logs into the Site Builder, they’re greeted with a visual interface that combines structure, flexibility, and real-time previewing:

• Left Panel:
  Page Tree & Navigation Structure
  Editors can define the site hierarchy, create new pages, and manage navigation models. This gives full control over how the site is organized and how users flow through it.
• Center Panel:
  Live Preview Window
  This is where the action happens—editors can see a live rendering of the staging site, powered by the preview URL (e.g., from Netlify), as they build and modify content.
• Right Panel:
  Content Properties
  Here, editors can:
    - Add or rearrange content blocks
    (like Hero, Article, FAQ, etc.) to build out a page.
  
    - Fill in field values
    —titles, subtitles, images, links, etc.
  
    - Set SEO metadata
    for each page, including title tags, meta descriptions, and Open Graph info.
  
    - Reference other assets like Cards or Form Fields using dropdown  
    selectors powered by the repository’s content model.
  
    - Manage Content Personalisation
    using taxonomy categories to define content personalised to the end user.
  

Building Pages with Blocks

Using the content model we defined earlier, editors can add multiple blocks per page in any order they choose. Whether they’re building a landing page, blog article, or feature showcase—they have the flexibility to:

• Select from pre-configured reusable components
• Customize each block’s content and appearance
• Nest components inside Sections for more advanced layouts
• The block-based approach allows editors to compose highly structured, design-consistent pages, while still retaining creative freedom.

🧠 Why it Matters:

This workflow dramatically reduces the dependency on developers for content changes or layout tweaks. Editors can create, preview, and refine their work quickly, while developers focus on expanding functionality and evolving the component library.

It’s collaborative, scalable, and efficient—exactly what a modern CMS experience should be.

5.1 Pages Are Asset Types Too!

Here’s something powerful that’s easy to miss but absolutely fundamental:
When an editor creates a new page in CM Box, they’re not just spinning up a blank canvas—they’re selecting from a pre-defined Asset Type created by the architect.

This means that pages themselves are content models—just like any other asset in the system. And that opens the door to incredible flexibility and structure for how your site is built and managed.

📐 Architect-Defined Page Model

In our setup, we defined a custom Page asset type with the following fields:

• Body (Slot Reference Field):
  This is the core of the page—a Slot field that allows editors to drag in and arrange any number of component blocks (Hero, Article, Section, Card Group, etc.).
• Settings (Structured JSON Field):
  For advanced editors and developers, this optional field supports custom JSON-based structured data, giving you an easy place to inject advanced configuration, feature flags, or component-level overrides.
• SEO Settings (Grouped Fields):
  A set of dedicated fields for optimizing the page for search engines and social media platforms:
• - Title
  Sets the HTML <title> tag
• -Page Description
  Used for meta description
• -Canonical URL
  Helps search engines understand preferred page location
• -JSON-LD Schema
  Supports structured data in schema.org format for enhanced search features
• -Open Graph Fields
  For controlling how the page appears when shared on social platforms (e.g., OG type, title, image, description)

🧠 Why This Matters

By making pages a first-class asset type, CM Box gives you:

• Stronger content governance
  Pages inherit the structure and constraints you define.
• Cleaner editorial experience
  Editors only see fields that are relevant and context-aware.
• Better SEO and metadata control
  All built into the CMS, not bolted on as afterthoughts.
• Easier extension and customization
  JSON fields allow for future enhancements without needing schema migrations.

This approach transforms your CMS into a true content-first, layout-agnostic platform, and ensures that every page follows best practices while remaining completely customizable.

6. Publish to Production (Editor)

Once the content team has created, previewed, and curated their pages in the CM Box Site Builder, the final step is to push those updates live.

Whether it’s a new page, an updated Hero block, or revised SEO metadata, editors can publish changes directly from the interface with just a few clicks.

One powerful feature we haven’t fully covered in this post is CM Box’s support for editor sandboxing using a concept we call Packages.

Packages allow editors to work in a private, isolated snapshot of the content repository—essentially their own workspace. Within a package, editors can:

• Build out new pages or update existing content
• Preview their changes in isolation
• Test layouts and messaging freely without affecting the live site
• Publish and merge their changes back into the main repository when ready

This opens the door to parallel content development, campaign-specific edits, and a more Git-like content workflow—perfect for larger teams or editorial groups working on long-form projects and gated releases.

📝 I’ll cover Packages in detail—including workflows, best practices, and real-world examples—in a follow-up blog post. Stay tuned!

7. Enable CI/CD for Auto Publishing via Webhooks (DevOps / Architect)

To streamline deployments and reduce manual publishing overhead, we’ve integrated CM Box with CI/CD pipelines that automatically build and deploy the site whenever content is published.

This gives your team the best of both worlds:

• Editors publish content with a click.
• The system handles the deployment in the background
  —no dev involvement needed.

🔁 Multi-Environment Deployment Strategy

To demonstrate how flexible CM Box is when it comes to deployment targets, we configured two separate environments:

• Stage Environment → Netlify
  This is our content preview environment for editors to work in. It’s fast, easy to set up, and integrates perfectly with the CM Box preview system.
• Production Environment → Cloudflare Pages
  For production, we opted to use Cloudflare Pages—a powerful, globally-distributed static hosting platform with built-in CI/CD support. This setup proves that CM Box isn’t tied to any single platform. If it supports Node.js and static builds, it’s a fit.

🔗 Live production deployment URL:
https://cmbsite.pages.dev/

Why It Matters:

• Ensures real-time publishing across environments
• Reduces friction between editorial and development teams
• Makes your content lifecycle fully automated, scalable, and production-grade

8. Configure CDN (DevOps / Architect)

With the site now live and publishing automatically to production via Cloudflare Pages, the final step in our setup was to optimize asset delivery using a dedicated CDN layer for all media files—images, videos, documents, etc.—served by the CM Box platform.

This ensures fast, globally distributed access to content and offloads repetitive asset requests from the core content service.

🌍 CDN Setup Using Cloudflare Workers

We created a custom Cloudflare Worker that acts as a proxy cache in front of CM Box's media endpoints. The worker intercepts all requests to

/api/assets/published/*

... and applies caching rules, and responds with optimized assets via a dedicated CDN domain.

📦 CDN endpoint: https://cdn.cmbox.io

Key Features:

• 1-Year Cache TTL for long-lived asset caching
• Cache busting using the query string ?cb={item.updatedDate}
• Security restrictions (only allowing specific paths)
• CORS headers for cross-origin use in site

🧑‍💻 Cloudflare Worker Code

Here’s a simplified version of the Worker used for asset proxying and CDN caching:

🧠 Why Cache Busting Matters

To avoid serving stale assets, all image and video URLs include a ?cb= (cache bust) query parameter—set to the asset’s last updated timestamp. T

This ensures:

• Browsers and CDNs only refresh when the content actually changes
• You retain aggressive caching without sacrificing freshness

Example usage in templates:

<img src="{asset.url}?cb={item.updatedDate}" alt="{item.imageAlt}" />

Final Result:

• Ultra-fast asset delivery via cdn.cmbox.io
• Consistent cache control for all media
• Complete separation of static content from dynamic editorial workflows

Wrapping Up: From Vision to Live in One Week

In just seven days, we went from a blank canvas to a fully functional, high-performance, editor-friendly website—powered entirely by CM Box and deployed across modern infrastructure.

Here’s a quick recap of what we covered:

• We planned and designed the site visually using tools like Adobe XD.
• Architected a flexible content model with reusable block components.
• Built and structured the UI using AstroJS and Svelte, leaning on performance-first design.
• Created a new repository and site instance in CM Box, complete with preview environments.
• Enabled editors to contribute content visually—block by block—with SEO support baked in.
• Configured CI/CD pipelines with Netlify and Cloudflare for hands-off publishing.
• Set up a dedicated CDN with cache-busting and CORS for scalable asset delivery.

All of this is designed not just for speed, but for sustainability, collaboration, and extensibility—giving developers and content teams the best tools to do their best work, without bottlenecks.

If you’re looking for a future-ready replacement for Oracle Content Management—or just want a modern, composable CMS that doesn’t get in your way—CM Box is ready.

If you’ve got questions, feedback, or want to see CM Box in action, feel free to reach out or connect with the Fishbowl Solutions team.

Let’s build better content experiences—faster.