[Series] Build a blog with Ruby on Rails

Written by

Juan Gallardo

Published

January 12, 2025

Last updated

January 22, 2025

Table of Contents

• Table of contents:
• Features
• General principles:
  • Have a system in place
  • Content first
  • Functionality second
  • Design last

This guide shows you how I built the very site you’re reading this on! Here I will document the cool features I develop so you can roll your own.

Table of contents:

1. Start a new Rails project
2. Set up Phlex UI components
3. Set up an Article resource
4. Deploy your Rails app along with Directus CMS and PostgreSQL database to Render.com
5. Render markdown articles with code block syntax highlighting and automatic Table of Contents

Features

• Phlex UI components
• Phlex Icons
• PostCSS styling
• Desing Tokens
• Stimulus controllers for user interaction and animations
• Directus CMS to host our content
• Contact form via SMTP2GO
• Email templates built in DesignModo
• Hosted on Render.com
• A blog managed via Directus CMS. Articles are written in Markdown. Our app generates a dynamic Table of Contents complete with links and progress indicator, and adds syntax highlighting to our code blocks

General principles:

Have a system in place

The idea is to have a template we can come back to each time we need to build a website. It should be easy to populate a brand new project by composing it with ready-to-go UI components, replacing some assets, and one of our themes to create a brand new design.

Content first

Only once we have a page fully populated with real content can we really build a design system that will do justice to our content. We don’t want to build UI components that we will have to change once we see that they don’t work with the actual site content

Functionality second

Now that we have content, we can start adding functionality. We’re talking about functional email forms, shopping carts, booking, or whatever else your app is meant to do

Design last

Now we can build our design using Progressive Enhancement. At this point we have a fully functional website with no CSS or JavaScript. It’s time to upgrade it in this order:

1. Use a solid set of engineering principles to write CSS. A good place to start is with Harry Roberts’ CSS Guidelines.
2. Design for mobile first, use fluid design as much as possible, and responsive design when necessary
3. User interactions. Implement these in CSS when possible, use Stimulus controllers to enhance these. Your site experience should not rely on JavaScript