Welcome back to our series on building a blog with Ruby on Rails 7, Hotwire, and Turbo! In Part 1, we set up the foundation of our blog, including creating the Post, Category, and Tag models. In this post, we'll focus on creating the frontend using Bootstrap, setting up a rich text editor, and implementing ActiveStorage for image uploads, all while using the Simple Form gem.
Step 1: Integrating Bootstrap
We already created our Rails application with the --css bootstrap flag, which adds Bootstrap to our application. Now, let's customize the layout file (app/views/layouts/application.html.erb) to utilize Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<%= link_to "My Blog", root_path, class: "navbar-brand" %>
<!-- Add navigation items here -->
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>Now our blog has a basic Bootstrap-based layout.
Step 2: Setting up a Rich Text Editor
We'll use the Trix editor for our rich text editing needs. First, let's add the Trix gem to our Gemfile:
gem 'trix'
Run bundle install to install the gem.
Next, we need to import Trix's CSS and JavaScript files. Add the following lines to app/javascript/packs/application.js:
import 'trix/dist/trix';
And in app/assets/stylesheets/application.css:
@import "trix/dist/trix";
Step 3: Install and set up Simple Form
To install Simple Form, add the following to your Gemfile and run bundle install:
gem 'simple_form'
Next, run the Simple Form generator with the --bootstrap option:
rails generate simple_form:install --bootstrap
Now, we can use Simple Form in our post form. Replace the form in app/views/posts/_form.html.erb with the following:
<%= simple_form_for(@post) do |f| %> <%= f.error_notification %> <%= f.input :title %> <%= f.association :category %> <%= f.hidden_field :body, id: dom_id(post, :body) %> <trix-editor input="<%= dom_id(post, :body) %>"></trix-editor> <%= f.input :featured_image, as: :file %> <%= f.button :submit, class: "btn btn-primary" %> <% end %>
Our blog now supports rich text editing for post content, and we're using Simple Form to handle the form fields.
Step 4: Implementing ActiveStorage for Image Uploads
First, let's install ActiveStorage:
rails active_storage:install rails db:migrate
Next, add the following association to the Post model (`app/models/post.rb`):
class Post < ApplicationRecord # ... has_one_attached :featured_image end
Now, let's display the featured image in the post view (app/views/posts/show.html.erb):
<% if @post.featured_image.attached? %> <%= image_tag @post.featured_image, class: "img-fluid" %> <% end %>
Step 5: Switching to Sass
To switch to Sass, first rename your app/assets/stylesheets/application.css file to app/assets/stylesheets/application.scss. Then, update the @import statements in application.scss to use Sass syntax:
@import "bootstrap"; @import "trix/dist/trix";
Now, we're using Sass instead of vanilla CSS, and our blog has a basic Bootstrap-based layout, a rich text editor, and image uploads using ActiveStorage.
In the next part of this series, we'll cover adding comments to our blog posts, making the blog SEO-friendly, implementing analytics, and discussing various deployment options, including hosting the blog on AWS using a virtual machine or a Docker container.
Stay tuned for Part 3!