How we manage our company website in BCMS

By Momčilo Popov

Read time 2 min

Posted on September 14, 2022

Updated on August 24, 2023

Share it on:

We manage all our websites in BCMS, perhaps an apparent admission since it's our product. But it's less obvious somehow that's possible, given the evident lack of affordance to immediately preview content, quickly install 3rd-party plugins or add designs through the CMS.

Some teams who are BCMS curious can't seem to get over this conceptual hump: How can we produce, maintain and scale a website if everything isn't visually editable? The simple answer is: don't. You don't need to be able to edit every paragraph's color, line height, or text alignment. You don't need to install 3rd party plugins. Having that flexibility appeals to superficial neatness but without much (if any) payoff in additional ease of editing, scalability, or website performance. Modern website development tools are already packed with all you could ever need to develop websites with thousands of pages that load fast, look beautiful, and are cheap to host. That's all you need.

The entire story is told in two parts: The BCMS instance that holds the content in any structure and form (text, video, a toggle…), users, and file storage. The GitHub repository contains the Nuxt.js code and the results of continuous integration testing. Let's take the Features page we just launched for the BCMS website. We structured all the content we wanted editable in the CMS and designed the page.

The structure of the Features' page content is:

1. title 2. slug
3. section with the list of features that has: title and description
4. list of features, where each Feature has: title, slug, description, icon and image
5. a few more general benefits of BCMS, where each benefit has: title, description and icon
6. performance boost, with a list where each item has: title, description and icon.

Isn't this just nicely structured data? And structured data is exactly what we need.

Since we plan to release an individual page for each Feature soon, we simply put each Feature on its entry to be able to add more content to each Feature when the time comes. So, in CMS, we created two templates:

Alongside this content, we used the BCMS to store all the images and icons in the dedicated folders in the media manager.

Then in the Nuxt.js codebase, we'd use the BCMS Nuxt Plugin to request and process data for the /features page:

      
async asyncData({ $bcms }) { 
  const locale = "en"; 

  const page = await $bcms.findOne<FeaturesTemplateType>("features",
     { variables: { 
       locale, 
     }, 
     query: (vars, item: any) => { 
        const locale = vars.locale as string; 

        return { 
            meta: item.meta[locale],
            content: item.content[locale], 
        } as any; 
     }, 
  }); 

  return { 
     title: page.meta.title, 
	 hero: page.content.find((e) => e.name === "features_hero"),
     build: page.content.find((e) => e.name === "features_build"),
     content: page.content.filter( 
       (e) => e.name !== "features_hero" && e.name !== "features_build"
     ), 
  }; 
}

Then we pass "hero" to FeaturesHero Vue component, build to FeaturesBuild component, and so on. And we followed the same approach for retrieving all Features from the BCMS and passing them to the FeaturesList component. And as you can see on the features page, none of those sections would have been successfully created using a 3rd-party plugin in a CMS or some drag-n-drop layout builder. It's only about what we wanted to be editable through the BCMS. This way, we have a bulletproof web page. Everything is just as much editable as it should be. Should one be able to change the color of the Feature's description? On our features page - certainly not. So it's not a default. When that becomes a feature we need, we'll just add a color picker property. I get that this might feel somewhat alien if you're working on a website with less visual hierarchy, where everyone on the team should be able to create basic layouts and sections. That's a very different environment from the one we're cultivating at BCMS through our creative development studio, Becomes. And as long as you're stuck in that drag-and-drop mindset, I think BCMS probably does seem incompatible. But that's why we're so keen to share the fully integrated story about how we work. We're here to help people set their sights on the right motivations and give them organizational ideas and new approaches to planning, designing, developing, and maintaining their websites.

It's all in and from the BCMS headless CMS.