Rails + Bulma: Criando um blog do zero em poucos minutos

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

Código Fonte do Projeto.

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

Default

rails new blog-bulma

1

rails 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

Default

rails action_text:install

1

rails action_text:install
Adicione o Bulma executando:

Default

yarn add bulma

1

yarn 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)

Default

import 'bulma/css/bulma.css'

1

import '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.

Ruby

gem 'devise' gem 'image_processing'

1
2

gem 'devise'
gem 'image_processing'
Instale as dependências rodando

Default

bundle install

1

bundle install
Execute o seguinte comando para gerar os arquivos de configuração do devise

Default

rails generate devise:install

1

rails generate devise:install
Crie o Model de autenticação do Devise com o comando:

Default

rails generate devise User

1

rails generate devise User
Execute a migration gerada

Default

rails db:migrate

1

rails 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:

Default

class ApplicationController < ActionController::Base before_action :authenticate_user!, except: :index end

1
2
3

class ApplicationController < ActionController::Base
before_action :authenticate_user!, except: :index
end

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

Default

rails g scaffold Post title author --no-stylesheets

1

rails g scaffold Post title author --no-stylesheets
Depois execute a migrate

Default

rails db:migrate

1

rails db:migrate
Torne a Listagem de Publicações a página inicial da sua aplicação, em (config/routes.rb) coloque:

Ruby

root to: 'posts#index'

1

root to: 'posts#index'
Adicione o Action Text e a Imagem de Destaque ao Model Post, em (app/models/post.rb) coloque:

Ruby

class Post < ApplicationRecord has_one_attached :featured_image has_rich_text :content end

1
2
3
4

class Post < ApplicationRecord
has_one_attached :featured_image
has_rich_text :content
end
Atualize a permissão de parâmetros para conseguir salvar o que foi adicionado (app/controllers/posts_controller.rb):

Default

# Only allow a list of trusted parameters through. def post_params params.require(:post).permit(:title, :author, :featured_image, :content) end

1
2
3
4

# Only allow a list of trusted parameters through.
def post_params
params.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.

<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>

</a>

</a>

</div>

+ Nova Publicação

</a>

</div>

<% unless user_signed_in? %>

<strong>Cadastre-se</strong>

</a>

Entrar

</a>

<% end %>

<% if user_signed_in? %>

<%= link_to "Sair", destroy_user_session_path, method: :delete, class: 'button is-light' %>

<% end %>

</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):

<!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>

<!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' %>

<%= yield %>

</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):

Default

</br></br> <h1 class="title is-1">Nova Publicação</h1> <%= render 'form', post: @post %>

1
2
3

</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):

<%= 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 %>

<%= form_with(model: post, local: true) do |form| %>

<% if post.errors.any? %>

<h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

<ul>

<% post.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form.file_field :featured_image, class: 'file-input' %>

</span>

Escolha a imagem de destaque…

</span>

</label>

</div>

</br>

<%= form.label 'Título', class: 'label' %>

<%= form.text_field :title, class: 'input' %>

</div>

<%= form.label 'Autor', class: 'label' %>

<%= form.text_field :author, class: 'input' %>

</div>

<%= form.label 'Conteúdo', class: 'label' %>

<%= form.rich_text_area :content %>

</div>

<%= form.submit 'Criar', class: 'button is-link' %>

</div>

<%= link_to 'Voltar', posts_path, class: 'button is-link is-light' %>

</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):

</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>

</br></br>

<%= image_tag @post.featured_image %>

</figure></br>

</div>

</div></br></br>

</div>

O sistema de Grid utilizado pelo Bulma é similar ao do Bootstrap, podendo ser dividido em até 12 colunas.
Para isso você precisa ter uma div 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-fullCrie a estrutura de Grid no arquivo de listagem de publicações (app/views/posts/index.html.erb):

</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 %>

</br></br>

<h1 class="title">Publicações</h1>

</br>

<% @posts.each do |post| %>

</div>

<% end %>

Por fim, adicione o componente card dentro da coluna criada anteriormente para exibir uma prévia da publicação.

      <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>

<%= image_tag post.featured_image %>

</figure>

</div>

</div>

<p>Autor: <%= post.author %> - <%= post.created_at.strftime("%d/%m/%Y") %></p>

</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:

Default

rails s

1

rails 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.

12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/

5 5 votes

Article Rating

junho 4, 2020

Posts | Cursos

Léo Rocha

Desenvolvedor web com foco na linguagem de programação Ruby. É altamente preocupado com a qualidade e eficiência de seu serviço e acredita que é de suma importância estar sempre em busca de desenvolvimento pessoal.

Website : https://github.com/Leoxxid