Building a Custom Content Management System from Scratch
Written on
Chapter 1: Introduction to Our CMS Journey
In this narrative, we will explore how we developed a personalized content management system (CMS) for our website, iHateReading. Initially, we considered existing CMS options like ButterCMS and Strapi. However, these platforms often come with restrictions that limit our creative freedom. Our primary goal was to forge a long-lasting, sustainable solution that aligns with our vision.
To facilitate article creation, we aimed to build a custom editor that mirrors the ease of Medium's writing interface. We found a JavaScript npm module that allowed us to design our own editor while incorporating essential plugins from the outset.
Section 1.1: Understanding the Challenge
Our primary challenge was straightforward: we wanted users visiting our site to be able to read articles directly on our platform without being redirected elsewhere. The reading experience should be seamless and intuitive, ensuring easy access to the content.
Subsection 1.1.1: Exploring Potential Solutions
There are various approaches to this issue, and different companies have their own unique solutions. Some use platforms like Hashnode, while others rely on conventional CMS options. Ultimately, the right choice hinges on what you find most efficient and scalable.
While we encountered challenges with both CMS options and Hashnode, which offers a customized domain interface beneficial for individual developers, we were seeking a more tailored solution suitable for a larger organization like ours.
Section 1.2: Crafting Our Custom Solution
At iHateReading, we desired an in-house solution devoid of limitations. We aimed for an extensible and scalable approach that required minimal investment beyond our development time.
To tackle this, we divided our problem into several key steps:
- Create a single editor for story writing akin to Medium.
- Ensure the editor supports all fundamental features—code snippets, GitHub gists, links, images, videos, headings, and paragraphs.
- Design the editor to return data suitable for database storage.
- Finally, implement a system to retrieve and display this data effectively.
Chapter 2: Execution of Our Vision
With our solutions outlined, the next phase was execution. Let’s break down each component we worked on.
The first video provides a tutorial on building a CMS from scratch, detailing the steps involved in creating a functional system.
Section 2.1: Developing the Custom Editor
After extensive exploration, we decided on Editor.js as our preferred module after evaluating alternatives like Draft.js and Slate.js. Its ease of integration and user-friendly interface, coupled with useful plugins, made it an excellent choice.
The Editor.js framework allows for data extraction through an onchange event listener, addressing our data handling requirements. Kudos to the CodeX team for their outstanding work!
The second video demonstrates how to create a CMS using PHP, offering insights that complement our approach.
Section 2.2: Rendering Data and Building the UI
The final challenge was to create an interface for article writing and effectively store the data in the database. Many companies charge for similar solutions, but our implementation saved costs while allowing for extensive customization with Editor.js.
Once the data is stored, the next step involves fetching it and rendering the UI. Each object in our data array indicates the type of component and its corresponding value, enabling us to dynamically adjust the interface.
Example data structure:
const data = [
{
type: 'Heading',
data: {
text: 'I am heading component'}
},
{
type: 'Paragraph',
data: {
text: 'I am paragraph component'}
},
];
In this structure, we render each object based on its type, facilitating a flexible UI.
Conclusion: Our Journey to a Custom CMS
In conclusion, we've successfully tackled the challenge of creating our own CMS from the ground up. While the execution may have had its complexities, the journey was rewarding. We look forward to enhancing our article UI and data structures in the future.
Thank you for following along with our story. Until next time, take care and don’t forget to subscribe for more insights from iHateReading!