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

Sebastian Stehle
Sep 25, 2018 · 3 min read

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.
Image for post
Image for post
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.

Squidex is a headless CMS and content managment hub.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store