Blog Series: Building a website with a headless CMS, Part 1: Prepare the code

Or: How to build the squidex website with squidex CMS.

This is post #1 in my new series about the headless journey:

Unfortunately we are still not ready to get started with the headless CMS. We designed our new website with the help of an external design agency and also got the implementation as HTML, CSS and JavaScript code. Today we have three things to do:

1. Integrate the code to our web framework

The next step is to integrate the code to the web framework of our choice. I am a big fan of ASP.NET Core, docker and kubernetes but the process is very similar if you use another programming language and tools.

  • If you use core or another MVC framework you will create views or templates and controllers.
  • If you use react you will create components with JSX.
  • If you use angular you will create components with html templates.

Whatever you use it should be relatively straight forward (and boring). I watched a movie while doing this.

You also want to make some improvements, e.g:

  • Create shared views or components for stuff live SVG icons or shared elements.
  • Create parent components or master/layout pages for elements like the header, navigation and the footer.
  • Create many small views or components if a page becomes too big, but be pragmatic and try not to build a perfect solution.
My structure

2. Make your views dynamic

Lets say your site contains a list of unique selling points or features.

Your probably got HTML code like this:

Of course this is not what we want. When we add a new feature we have to copy and paste the markdown for an item and changes become harder than necessary. But we can easily improve it by creating a static model of our content and by using this model in the views:

I just inlined the model into the view, because in core the views are compiled dynamically when you change them and you do not have to rebuild your application to see the changes.

I also noticed that some parts of the HTML code are much harder to realize and adapt to the model than expected. For example on the squidex website there is a gallery where images are alternately displayed left aligned and right aligned.

We also have a section with the different plans and prices for our cloud solution and one of the plans has a label to promote it. You should not add the logic and texts into the view, but add it to the model instead. You can also test what happens if you add or remove items from a list. You will find edge cases that have not been handled and discussed yet.

3. Get ready for deployments

You want to deploy and get feedback often. Get ready for it and establish a process where you can publish the website with as few clicks as possible. But keep it simple and stupid, you do not have to start with the best continuous integration solution ever.

We are done for today. In the next part we will create models in the headless CMS and pull the data from there.