As 2022 came to an end I thought about what I wanted to achieve in 2023, and that began with a rewrite of my existing website, including building my own CMS.
A Content Management System, or CMS, does exactly what it says on the tin, it manages content, whether it’s images, blog posts or videos. They come in two flavours nowadays, traditional and headless. Traditional CMS come with a website such as WordPress and Ghost to display the content to readers, whilst Headless let you build your own.
But why would anyone want to build their own Content Management System? There’s plenty of existing solutions that, within no time, would allow me to write until the cows came home.
Three reasons; The first being that existing solutions tend to do 99% of what everyone needs them to do but the minute you need that 1 tiny feature, they charge a massive monthly, or annual, fee. I didn't want to run into this issue further down the line and have to fiddle with migrating platforms, which can be difficult as many solutions block importing/exporting data to prevent you moving to other solutions.
The second reason is that to get a blog running how I wanted it to, I'd need to use third party tools such as Zapier to do things like post to Twitter, Discord Servers, etc. And it felt a lot easier to just code those solutions into my own CMS than have to deal with third-party integrations.
Additionally, I had recently started trying out Adonis and wanted a new project that I could really sink my teeth into and get a feel for the framework
So the answer, at least in my mind, was simple. I’ll use Adonis and build my own Content Management System. I had the spare time at the end of the year, and it’ll make great content to write about throughout 2023 as I add more features to it.
The API.
The plan was to have an API running somewhere in the wild that my website (built in Astro) would call during the build process so that it could statically generate all the content, similar to how headless CMS’s work with frontend frameworks.
The starting point for this project was the API, which turned out to be the easiest part to build. This is because the framework comes packaged with cli tools for generating key files such as Controllers, setting up authentication and managing the database.
I started by generating migration files for a User and Posts table, before moving onto adding admin routes, and finally the public routes for fetching content. With some time to spare, I quickly added Tags to Posts, allowing them to be categorised by the nature of their content.
The website.
The next step was building the website, I didn’t want to spend forever and a day working on a new design so I copied my existed design and tweaked a few bits, this time adding a Call To Action button, some logos of languages and frameworks I’m proficient in and some cards for projects I’ve already done.
Once this was finished, I deployed it to Netlify which was surprising fast on it’s first build, just 6.7s. This is due to there only being a handful of small pages, so it will be fun to see this number increase in time as more pages are added.
And the Admin Panel.
Finally, it was time to build an user interface for managing all the content. I went with a quick Vue 3 and Tailwind solution and solely focused on functionality over looks.
It’s not the world’s best looking app, but I’d place it in the top 10(million). Functionality such as the logging in I copied across from previous projects, including the dashboard-like layout. To no one’s surprise, I’m using Tailwind CSS with some custom components such as buttons.
The most interesting part of the admin panel is the WYSIWYG editor used for writing content. I didn’t want to write a custom editor that could support markdown and image upload as a) it would take forever and b) it wouldn’t look great. So I looked around the internet and finally came upon v-md-editor.
This saved time when building the app and writing the code to upload images to S3 was easy as the editor did most of the heavy lifting. I added some other input fields for title, excerpt, cover image and whether to publish the article or not and voila, the admin app was basically done. Again, I deployed this to Netlify under a random domain.
Conclusion
In total, the project so far has taken around 7 hours to build including bug fixes and refactoring. In it’s current form, it’s nowhere near the existing solutions in terms of features but over time I plan on adding my own tailored features and writing about them here on the blog, just recently I added a Tweet Scheduling feature that will one day automatically tweet out articles when they go live on the blog.
Thanks for reading! This article was a long one, there’ll be a new article next Monday at the same time. 😄
Happy coding! ☕