In the ever-evolving world of web technology, the choices we make for our platforms can significantly impact performance, user experience, and overall success. While our blog is built on the dependable WordPress platform, the hosting site for our Webvacy apps tells a different story. Here, I proudly present a custom Micro CMS that I developed from scratch, utilizing a combination of HTML, CSS, and JavaScript (including React) frontend with a MySQL & PHP backend. This blend of technologies enables a highly responsive and tailored experience for our users.
Why a Custom Micro CMS?
Why not? Webvacy and it’s apps are a way for me to continue learning on my Web Development journey – it only makes sense to make the platform that hosts the apps!
Whilst WordPress is an excellent tool (and powers the blog because making 2 of my own CMS platforms was just a little too much), Having to understand the core principles of SEO and optimizing a platform for the best user experience is just a great way to learn.
Core Technologies Behind WebvacyCMS
It’s quite simple really – HTML, CSS and Javascript powers the frontend. I haven’t used any frameworks for CSS (but tailwind is on my list on things to learn) and Javascript is largely Vanilla. There is an admin area that uses React and I’m looking to rebuild the app library in react too.
On the backend you’ll find PHP and MySQL – a classic really! PHP is used to authenticate requests and access the MySQL data as well as optimize images and runs the caching for the app details pages.
I would love to try to rebuild it all using NextJS but the servers for those are not as affordable as a simple hosting space like the one I currently have so that’s on the list for the future.
Features of WebvacyCMS
One of the drawbacks of making your own CMS is that it’s a bloody big job! That means I’ve had to be selective of features and they’re probably not very optimized! Currently I have:
- Limited Page Caching: Currently limited to the app details page, they’re cached for quicker access.
- SEO Focused Data: The database supports SEO optimizing the app details pages as well as storing additional image information for those precious lighthouse scores.
- Dynamic Tags/Categories: Database driven meaning a tag can be updated and it’ll change for all apps.
- Image Optimization: Images are automatically resized, converted and put in the correct folder – the system checks the size of the images and automates width/height attributes to prevent CLS and other page speed insight issues.
- Sitemap Generation: Scripts to generate sitemap and image sitemaps.
Performance Metrics: Google Lighthouse
Not quite perfect but not far off! One of my main focuses has been to nail lighthouse and get 100 across the board. I have optimized the gallery and animations to ensure that there’s 0 CLS.
Achieving high scores across these categories not only provides an excellent experience for users but also has a positive impact on SEO.
A Work in Progress
As of now, WebvacyCMS is still in the very early stages of development and it’ll be a project I continue to develop along with this blog and the apps hosted on Webvacy.
Whilst it’ll never be finished, I do hope to get it to a point where I would be happy releasing it to the public so others can give it a go.
Future Plans for the Micro CMS
Looking ahead, I am excited to expand the capabilities of Webvacy. Here’s some of my current plans:
Full Page Caching
Currently limited to the app details page – I want all of my pages to be cached and every image optimized. This is going to take some fundamental changes but worth it in the long run.
Better Image Optimization
I have very simple rules with my image optimization as it stands, I’ll like this to be far more flexible with the possibility of providing the image caching scripts some context about target size and location on the page.
Page Builder for Static Content
I’ll start with a WYSIWYG editor because TinyMCE exists so it’s a quick solution, but, if WordPress and other CMS platforms have shown anything, it’s that there is a lot of value in ready-made drap-and-drop blocks. This’ll be a long term goal but one I’d love to get done.
Conclusion
Whilst I’m at the start of my journey with WebvacyCMS, I have learned a great deal and I look forward to improving on this going forward. If you’re looking to get into web development, I encourage you to take a look at Webvacy and some of the apps, hopefully you’ll find inspiration and find something you can start making – often “doing” is the best way to learn.
You can take a look at WebvacyCMS in action by checking it out here