
Aprenda a criar um blog personalizado do zero utilizando os frameworks Ruby on Rails e Bulma e se surpreenda com a facilidade do desenvolvimento e a beleza final deste projeto.
Ruby on Rails é um framework maduro que se destaca pela alta performance de desenvolvimento. Essas são características interessantes para serem utilizadas em conjunto com o Bulma, que é um framework CSS inspirado no Bootstrap, 100% responsivo e que não requer o uso de JavaScript.
O que você vai criar?
Você criará um Blog muito bonito e personalizado de forma fácil utilizando as ferramentas Ruby on Rails e Bulma.
Por meio do projeto desenvolvido será possível realizar cadastro, se autenticar, escrever uma nova publicação utilizando uma ferramenta de Texto Enriquecido, visualizar a lista de publicações e ler uma publicação.
Ferramentas utilizadas
- • Ruby on Rails 6.0
- • Bulma CSS
- • Action Text
- • Image Processing (software para processar imagens)
- • Devise
Passo a Passo
Criando e configurando o projeto
Dando início a parte prática deste aprendizado, esta etapa servirá para que você crie e realize as configurações necessárias do projeto.
- Crie o projeto com a seguinte instrução
1rails new blog-bulma - Para conseguir inserir links, imagens, html, tabelas,texto formatado em uma publicação, você utilizará uma ferramenta de Rich Text chamada Action Text.
Para adicioná-la ao projeto rode
1rails action_text:install - Adicione o Bulma executando:
1yarn add bulma - Faça a importação do Bulma adicionando o seguinte código ao final do arquivo application.js (app/javascript/packs/application.js)
1import 'bulma/css/bulma.css'
Incluindo o Devise
O devise será responsável por facilitar o processo de autenticação no seu projeto.
- Adicione a gem devise e image processing ao Gemfile.
12gem 'devise'gem 'image_processing' - Instale as dependências rodando
1bundle install - Execute o seguinte comando para gerar os arquivos de configuração do devise
1rails generate devise:install - Crie o Model de autenticação do Devise com o comando:
1rails generate devise User - Execute a migration gerada
1rails db:migrate - Por fim, exija autenticação do usuário exceto quando ele esteja tentando acessar a tela que lista as Publicações, em (app/controllers/application_controller.rb) coloque:
123class ApplicationController < ActionController::Basebefore_action :authenticate_user!, except: :indexend
Criando a estrutura de Posts
Nesta etapa você criará a estrutura de Publicação para seu blog.
- Rode um scaffold para gerar o CRUD da Publicação
1rails g scaffold Post title author --no-stylesheets - Depois execute a migrate
1rails db:migrate - Torne a Listagem de Publicações a página inicial da sua aplicação, em (config/routes.rb) coloque:
1root to: 'posts#index' - Adicione o Action Text e a Imagem de Destaque ao Model Post, em (app/models/post.rb) coloque:
1234class Post < ApplicationRecordhas_one_attached :featured_imagehas_rich_text :contentend - Atualize a permissão de parâmetros para conseguir salvar o que foi adicionado (app/controllers/posts_controller.rb):
1234# Only allow a list of trusted parameters through.def post_paramsparams.require(:post).permit(:title, :author, :featured_image, :content)end
Incluindo a Navbar
Aqui você criará uma Navbar contendo o logo do Blog, link para criar uma nova publicação, se cadastrar e realizar o Login.
- Crie a partial view (app/views/shared/_navbar.html.erb) que conterá a barra de navegação da aplicação.
12345678910111213141516171819202122232425262728293031323334353637383940<nav class="navbar is-dark" role="navigation" aria-label="main navigation"><div class="container"><div class="navbar-brand"><a class="navbar-item" href="/"><img src="https://onebitcode.com/wp-content/uploads/2020/01/logo-bg-escuro-400.png" width="auto" height='auto'></a><a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div id="navbarBasicExample" class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href='/posts/new'>+ Nova Publicação</a></div><div class="navbar-end"><div class="navbar-item"><div class="buttons"><% unless user_signed_in? %><a class="button is-primary" href='/users/sign_up'><strong>Cadastre-se</strong></a><a class="button is-light" href='/users/sign_in'>Entrar</a><% end %><% if user_signed_in? %><%= link_to "Sair", destroy_user_session_path, method: :delete, class: 'button is-light' %><% end %></div></div></div></div></div></nav>
Para construir esta Navbar foi utilizado como referência a documentação de Navbar do Bulma.. Estrutura da Navbar
. •navbar
. •navbrand
localizado no lado esquerdo, contém a logo.
. •navbar-menu
. •
navbar-start
concentrado no lado esquerdo do menu, após a logo. •
navbar-end
localizado no lado direito do menu - Insira a partial Navbar ao layout da Aplicação (app/views/layout/application.html.erb):
1234567891011121314151617181920<!DOCTYPE html><html><head><title>BlogBulma</title><%= csrf_meta_tags %><%= csp_meta_tag %><%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %><%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %></head><body><%= render 'shared/navbar' %><div class="container"><div class='row'><%= yield %></div></div></body></html>
Ajustando as Views
Agora você irá alterar o conteúdo das views para melhorar a visualização de suas páginas.
- Substitua o conteúdo de new.html.erb (app/views/posts/new.html.erb):
123</br></br> <h1 class="title is-1">Nova Publicação</h1><%= render 'form', post: @post %>
Note que dentro da tag h1 você tem as classes title e is-1
A classe title é utilizada para exibição de títulos e a classe is-1 para definir o tamanho deste título. (São 6 tamanhos disponíveis) - Depois sobrescreva o código do arquivo que contém o formulário para criação de uma nova publicação (app/views/posts/_form.html.erb):
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<%= form_with(model: post, local: true) do |form| %><% if post.errors.any? %><div id="error_explanation"><h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2><ul><% post.errors.full_messages.each do |message| %><li><%= message %></li><% end %></ul></div><% end %><div class="file"><label class="file-label"><%= form.file_field :featured_image, class: 'file-input' %><span class="file-cta"><span class="file-icon"><i class="fas fa-upload"></i></span><span class="file-label">Escolha a imagem de destaque…</span></span></label></div></br><div class="field"><%= form.label 'Título', class: 'label' %><div class="control"><%= form.text_field :title, class: 'input' %></div></div><div class="field"><%= form.label 'Autor', class: 'label' %><div class="control"><%= form.text_field :author, class: 'input' %></div></div><div class="field"><%= form.label 'Conteúdo', class: 'label' %><%= form.rich_text_area :content %></div><div class="field is-grouped"><div class="control"><%= form.submit 'Criar', class: 'button is-link' %></div><div class="control"><%= link_to 'Voltar', posts_path, class: 'button is-link is-light' %></div></div><% end %>
A div com a classe field cria um container para você colocar a label e o control.
A div com a classe control pode conter apenas elementos do tipo input, select, button e icon.Para comprender melhor o funcionamento dos formulários no Bulma acesse este link.
- A classe do Bulma chamada image torna imagens responsivas e na frente dessa classe é possível passar o tamanho de proporção dessa imagem.
Portanto, a classe image em conjunto com is-3by1 define que a base de proporção será de 720×240 pixels.Sobrescreva o código de exibição de uma Publicação (app/views/posts/show.html.erb):123456789101112</br></br><figure class="image is-3by1"><%= image_tag @post.featured_image %></figure></br><div class="columns"><div class="column"><p class="title"><%= @post.title %></p></div></div></br></br><div class="columns"><div class="column is-three-quarters"><%= @post.content %></div> - O sistema de Grid utilizado pelo Bulma é similar ao do Bootstrap, podendo ser dividido em até 12 colunas.
Para isso você precisa ter umadiv
com a classe.columns
e suas filhas com a classe.column
.
Quando você utiliza apenas uma coluna dentro de.columns
, você pode definir o tamanho dela com as seguintes classes:is-three-quarters
,is-two-thirds
,is-half
,is-one-third
,is-one-quarter
,is-full
Crie a estrutura de Grid no arquivo de listagem de publicações (app/views/posts/index.html.erb):1234567891011</br></br><h1 class="title">Publicações</h1></br><% @posts.each do |post| %><div class="columns"><div class="column is-four-fifths"></div></div><% end %> - Por fim, adicione o componente card dentro da coluna criada anteriormente para exibir uma prévia da publicação.
123456789101112131415<div class="card"><div class="card-image"><figure class="image is-full is-marginless is-3by1"><%= image_tag post.featured_image %></figure></div><div class="card-content"><div class="media"><div class="media-content"><a href="<%= post_path(id: post.id) %>"><p class="title is-4"><%= post.author %></p></a></div></div><p>Autor: <%= post.author %> - <%= post.created_at.strftime("%d/%m/%Y") %></p></div></div>
O componente card compreende vários elementos que você pode misturar e combinar.
. Estrutura do Card criado:
. •card
. •card-image
destinado a uma imagem responsiva que ocupa toda a largura do card.. •
card-content
para inserção do conteúdo de um card.Caso tenha alguma dúvida veja alguns exemplos de cards e sua documentação através deste link
- Para subir o projeto rode:
1rails s
- Para ver o projeto funcionando visite: http://localhost:3000
Resultado
1 – Criando um novo post:
2 – Vendo todos os posts:
3 – Vendo um único post:
Conclusão
O Ruby on Rails oferece uma ótima integração com o Bulma CSS e possui ferramentas padrões para uma fácil implementação de Texto Enriquecido e Registro de Imagens, o que contribuiu para entregar o que foi prometido, ou seja, um Blog bonito e personalizado em poucos minutos.
Você já tinha utilizado o Bulma?
Gostou deste guia?
Responda pelos comentários e não deixe de compartilhar com seus amigos para que possamos continuar trazendo conteúdos de qualidade para você!
Tenha acesso a documentação completa do Bulma através deste link.

Artigo Show! Vou experimentar já aqui! Valeu Léo!
Boaaa
Valeu Léo por compartilhar! Estava pensando como fazer esse tutorial com Docker. =)
Deu certo? Como ficou? Posso ver?
Opa… bora reproduzir esse código.
Muito bom o artigo! Já coloquei em prática 🙂
Legalzão cara, fiz um projetinho no docker com seu exemplo, vou dar uma evoluida agora, muito obrigado mesmo!
link da repo https://github.com/k41n3w/rails-bulma-blog
Oi, eu dnv!
Fiz o deploy da aplicação no heroku e deu pau no Bulma, dai eu segui o as instruções de configuração do artigo sobre como fazer um sistema de votação e funcionou, segue o link: https://k41n3w-rails-blog.herokuapp.com/
Agora estou enfrentando outro problema, o action text esta salvando as fotos localmente e toda vez q existe um deploy (descida ou subida da maquina) eu perco os arquivos…
Vou corrigir e volto para contar como fazer
Voltei, rs.
Como tinha dito as imagens não estavam sendo persistidas entre deploys, resolvi esse problema adicionando um bucket do Google Cloud Storage.
Como eu fiz: https://github.com/k41n3w/rails-bulma-blog/commit/78b2a7b91d110642cc29f8ddb8339febca0e9871