In continuation of my previous post today I will talk about the website tanooja.com. I did this project on request of my wife because she wanted to pursue blogging and didn’t want to go through the ordeal needed to write, publish and manage SEO using most of the prominent blogging platforms like WordPress, Joomla, Drupal etc. So I decided to take Ghost for a ride and I realised that it’s awesome by the way. I want to bring back the list of tools from my previous post:
- React and React Router
- GatsbyJs
- Ghost Headless CMS
- MySQL
- NGINX
- LetsEncrypt
- AWS Lightsail Ubuntu 18.04 LTS VM
- AWS S3
- AWS CloudFront
- AWS Certificate Manager
The new stuff in this list that I didn’t discuss in the previous post is obviously the dynamic data requirements because this is an ever evolving blogging platform. The way this works is as follows:
- The Ghost Headless CMS is hosted on an AWS LightSail VM running Ubuntu 18.04 LTS with MySql, NodeJs based Ghost CMS running behind the NGINX server. This allows us to either use the Ghost Native application or the Web Interface hosted at backend endpoint. This way the authors on the blogging platform can either use the Native application or the web interface to publish the content. This application is served on a secure SSL channel using the SSL certificate obtained through LetsEncrypt bot. I believe that LetsEncrypt is a great initiative and it’s really easy to setup NGINX and LetsEncrypt based certificates. Once you follow the instructions the cert-bot will take care of renewal of your SSL certificate automatically. Ghost CMS provides REST API for both content and administration. I used this API to generate the static website using GatsbyJs.
- The next step was to use a static site generator that would generate a static React application based on the content available from the Ghost CMS. I knew about GatsbyJs and thought of using it, I was very happy to find that they already have a plugin for Ghost CMS. The reason I wanted to go down the static site route is because this way you don’t have scale any servers, secure the website against attacks because all you can do is perform a GET request. I used the starter template and customised it a bit and added a few additional GatsbyJs plugins for things like Google Analytics, Facebook Analytics, Google AdSense etc.
- Once finished I setup an AWS S3 bucket to host to static files. Next I created an AWS CloudFront distribution pointing to the S3 bucket and finally requested an SSL Certificate for tanooja.com using AWS Certificate manager (all this setup didn’t cost me a single penny – except for the LightSail VM which comes at $5 per month). AWS has very good documentation on their developers page which is easy to follow on developers page. There are certain gotchas that are there which you need to be careful about when hosting SPAs. This has mostly to do with the fact that your website is not running behind a web server like NGINX, Tomcat or IIS. AWS CloudFront is literally serving the HTML and JavaScript files from the S3 bucket and it knows nothing about Routing and Dynamic pages. I will probably do a follow up post about it at some point later (because I am still discovering some of these gotchas).
- The last step was automating the deployments. The website is deployed to the S3 bucket twice a day (using a scheduled build) and on check-ins to master branch in the private git repository.
- For managing deployment workflow to the AWS infrastructure I use my custom deployment script mentioned in the previous post. When I was able to re-use the script I realised that may be I should publish it as an NPM package (probably some day).
The website is running and I took me a couple of days to set this entire machinery. A weekend well spent.
Leave a Reply