We Have a New Blog!

Note: This is going to be a technical article about why we moved the Friendliest.app Blog from our Ruby on Rails web app to a standalone Gatsby site.

We have a new blog! Yes, it looks a lot like the old blog, almost identical in fact. But, under the hood it is quite different.

So why the change?

Short answer: Because we are nerds.

Longer answer: Because there wasn’t a compelling reason to use all the heavy lifting of our Ruby on Rails application to service simple articles. Decoupling our blog from our application allows us to reduce the complexity of our application and its database while also creating a faster browsing experience for folks reading the blog. Win-win.

Oh, and it also lets us play with more nerd stuff. Win-win-win.

But it seemed fast before…

Why thank you! We have been hard at work tuning our Rails app since we migrated it to Render a month or so ago. The entire app, blog included was pretty speedy, but it was still carrying unnecessary bulk.

Viewing a blog article would issue a request to Rails, which would then query our database to pull the content. Blog content was stored in the db as a Rails Action Text field which in turn uses Active Storage to store the blog images in our Amazon S3 bucket.

So, viewing a blog post was hitting our app, hitting our database, hitting S3 and then assembling everything together to display it. Not slow, but unnecessary.

After we moved our applicaltion and database to Render, we noticed they offered “static site” hosting, which included several JAMStack options like Vue.js, Next,js, Hugo, Jekyll and Gatsby. After a bit of research and general nerd-ery, we decided to test migrating our blog to Gatsby.

And why Gatsby vs…?

We chose Gatsby for a number of reasons including:

• Image handling - some nifty wizardry for selecting the optimal-sized image for the device and progressively loading it into a placeholder.
• GraphQL - awesome query language for pulling and structing data from static files.
• Authentication - at some point we’ll want to leverage our app’s Devise authentication for our Premium blog content.

There is also great TailwindCSS support, so we were able to duplicate the look and feel of our Rails apps with very little effort.

Altogether it only took about a day of work to stand up our Gatsby site on Render, configure metadata for SEO/social media sharing, migrate our themeing and content and perform testing. Everything worked well, really well, so we moved our blog to its new subdomain https://blog.friendliest.app and dropped in our redirects.

We also re-implemented the home-grown social media sharing buttons we built for our Rails app, which we have made availabe (the Rails code/example) on GitHub @ https://github.com/CrankyOldITGuy-Dev/simple-social.

Performance-wise the page data for an average blog post has decreased from over 700kb to around 250kb and we are seeing consistent load times in the 800-900ms range. We were also able to trim down our Rails app, retiring the Blog_posts model and associated cruff.

All in all, calling this one a success. And can’t say enough good things about Render’s hosting.