From quite a long I was thinking of building my own blogging platform, so after two years of procrastination here I am writing about How I built my own blogging platform on my very own Blogging Platform.
So let's talk about my motivation behind creating my own blogging platform. So mostly it is about the control that self hosted web apps provide such as themes, SEO, website layout, promotions and the custom functionality. It is like if I want I can have all my blogs look different, act different on different platforms. And Yeah this is the kind of control I was looking for.
Expectations from the platform
- Should be very cost effective (almost free 😅),
- Should be easy to add new blogs,
- Should be easy to migrate,
- And should be simple to add custom functionality.
Considering all the above factors, I started my research. And I figured out that I need something that can support a backend service which provide me some rich interface to write blogs and at the same time provides a REST based interface to get the list and details of the blogs (basically a headless CMS). And then by using some front-end framework I can easily build an website. But the problem is most of the frameworks are for SPA and SPA is not very browser performant nor SEO friendly (especially in case of blogging site) so I started looking for something where can I still use React Framework but at the end I can get static html file which can be hosted somewhere.
Architecture
So I ended up using NextJs with Ghost CMS. I could easily run Ghost CMS in my local system and use it to write blogs and generate site using NextJs but I wanted to avoid much of reinstallation/ repetitive setup in case I change my laptop. And that why I decided to go with following setup -
So basically what I have done is storing all CMS database and config related files(persistent files) to some cloud based storage ( like Github/ google drive ) and written a script where all runtime CMS files are downloaded from there respective repository (such as npm) and db/config files are retrieved from my cloud so at the end of the script I get my local system with my headless CMS configured and Ghost Server Running (In this way I avoided deploying my headless CMS to some continuously running Compute Resource).
One more thing that I did was using one of the Ghost Storage Adapter to put all my media on some third party storage (such as firebase storage in my case) so that my media files is available globally instead served from CMS.
Once the Ghost Server is running I can use the UI provided by Ghost to write my blogs( as I am doing this right now while writing this blog). Once blog is done, I can publish my blog locally. After publishing I use my NextJs setup(which also exists at same place as CMS persistent files) and Ghost CMS content apis to generate server side code and since NextJs setup provides a developer interface via next dev command to view the generated site, I use that to view any styling difference or proof read my work.
Once all proof reading is done finally I generate static site using next export command and deploy this website to firebase hosting.
So yeah thats it, I have my blogs up and available. My in-house serverless comment system is up and running. Please feel free to drop comments/feedback below.