How to Build Your Own Website - Check Out Our Experience
Tech
6 min read
In this article we will explain the reason we abandoned a ready-made web development platform, why we use Headless CMS for our backend, Markdown to store content, and how all this reflects our SEO standing.
We had a WP site before, Even though it has a lot of features and plugins, we lost control. All ready-made system compromise control. In the beginning it was alright – we managed to plug-in most of the holes that emerged we went along.
Once we advanced further, we realized our goals are not going to be met by the system. A closer look at our time slots revealed our team collectively spent most time fixing the structure than developing the ideas we have set in mind. Working around the limitations of our development platform as turned into our main job.
What’s interesting about websites is that they try to duplicate what any interactive document can do. An animated PowerPoint presentation has fancy text, images, and even videos. A web page has all that too, but it has a strict division of labor. The HTML handles all the text, images, and video, formatting is a responsibility of CSS, and every page interaction goes to JavaScript.
For SEO purposes, HTML is the leading factor since all the important meta tags reside within it. There are many HTML tags but focusing on those that matter is important. We host all our relevant tags within the overarching
tag while we mark the actual content (text images and videos) within the tag.We need a content management system to organize our web assets. However, we also need to find a universal way that the backend communicates with the front end (API) so that no matter the display logic, we always know the viewer sees what we intended. To do this, we need a backend end front end that communicates flawlessly but, at the same time, is not strongly codependent. It means that we want to be able to do a complete website changeover without making core changes to our platform, or worse – start from scratch.
One way to do this is via an approach called Headless CMS . This management system does not run a front-end logic, which means that whatever comes on display can be changed easily without any heavy lifting – it can be fit to match any technology we want. It also means we can have the backend in one language and the front-end – in another. This condition is extremely liberating: by decoupling the website management system from the display end, we could work separately on one without affecting the other. For example, we can quickly convert our web app into a mobile app without changing too much.
Searching for the right Headless CMS, I came across Contentful , which does a great job but comes with a bitter price tag. A more affordable alternative is that Strapi comes with a bit of limited capabilities. Then I found Directus . To put it simply in words: it was love from the first Docker deployment. Directus is a headless CMS solution that you can also run on your server, provided you are not happy with the option.
Directus has a very intelligent approach to content display. Apart from the clever markdown-friendly interface, with this platform, you can automatically resize or compress images and choose which image version you want to apply or the right format (JPG/WEBP). Not sure how different image parameters stand in the browser? Enter them in the address bar, and you can live preview and apply them.
When content creators store their work, it ends up in a file. To store everything in a file, we have to save it somewhere; usually, that depository item takes a binary form. Whether your content manager saves data in an MS Word file, .ODT , or WordPress editor, it end up holding the text but also a lot of code, tables, and strings. Thanks to this number of involved components, you are bound to rely on a specific software to de-code this and present it in a human-friendly way. You can confirm this by simply opening any text document with Notepad++ or Sublime Text . The sad news is that even WordPress editor does the same thing.
** Bottom line: conventional text files and editors are messy** and there is no universal way to keep content without being stuck to using the original software used to create it.
Because of its neat nature of data display, Markdown is already widely used in smart text-based solutions like Trello or Asana . A clean, logical chart of simple rules determines how plain text can take a more sophisticated form without complicating storage or how it is read or managed. In the old ways, when we exchanged a Word file with somebody, we trusted they had the same software as us, sometimes the same software version .
In conventional editors, a piece of code does not stand out from the rest of the normal text with sentences and paragraphs. In contrast, Markdown identifies specialized text it and highlights it.
Markdown nails two birds with one stone: it is clearer for humans and machines can decode it easier too. We don’t need a middle men to interpret the simple text we exchange.
Markdown, although very simple, is a revolutionary way we think about and handle content, especially in a collab environment . No one owns the syntax rules by Markdown, so it is a much greater tool from a business continuity perspective. In contrast, if you open an MS Word file fifty years from now, you trust that this software will still be available and with proper maintenance and support. If Word ceases to exist for some reason, you are challenged to reverse engineering those files to extract the data.
Another key benefit of Markdown is that you can use it to produce multiple formats from it . The reverse action would take some serious reverse engineering or direct manual labor. Convert your markdown text into HTML, and it will automatically include all the styling you previously applied to it. You now have a universal file, ready to be shared with anyone. All they need to review is drop it in any browser. Additionally, because of the open-source standard of Markdown and depending on your purpose and intent, you can also quickly convert your content into multiple other convenient formats like EPUB, LATEX, or PDF.
Google loves HTML . Although search engines are getting much better at interpreting complex code like JavaScript, simple markup has always been better. Client-side-rendering and the spectacular reach of Cloudflare services contribute to a supreme user experience.
When I test my website with Page Insights and Lighthouse , one thing comes to mind: while Google algorithms have always been an enigma, Lighthouse checks your meta tag integrity . Google’s so-called total score includes intricate factors, including UX.
Mobile testing is a breeze when we use the powerful virtual environment of BrowserStack , with thousands of supported browsers and devices.
The success of web development comes from the right team and the right technology, where both must be in perfect synergy. After trying and failing with standard approaches, we reached a point where we could make informed decisions in building the ideal management system. All the available tech online is great when used wisely in a sophisticated plan with multiple resource points.
We decoupled the back end with what clients see, enabling thousands of possible front-end transformations without having to backtrack or start from scratch. Practice shows that the available tech is more than enough to achieve any goal. What matters is the strategy behind the goal and the people who execute it.
Should you use a custom CMS? Despite the undeniable benefits of a custom CMS, not every company is fit for it, at least not right away. However, every forward-thinking company in web development should seriously consider using it. Every business evolves differently but they all share the same path to perfection: through trial and error. Without a custom CMS you are bound to invest time and effort adapting your ready-made platform to your ever changing ideas. The sooner you turn towards a tailor-made solution for your web development environment, the better.
Share: