
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!