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.

  1. Crie o projeto com a seguinte instrução
  2. 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
  3. Adicione o Bulma executando:
  4. Faça a importação do Bulma adicionando o seguinte código ao final do arquivo application.js (app/javascript/packs/application.js)

 

 

Incluindo o Devise

O devise será responsável por facilitar o processo de autenticação no seu projeto.

  1. Adicione a gem devise e image processing ao Gemfile.
  2. Instale as dependências rodando
  3. Execute o seguinte comando para gerar os arquivos de configuração do devise
  4. Crie o Model de autenticação do Devise com o comando:
  5. Execute a migration gerada
  6. 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:

     

Criando a estrutura de Posts

Nesta etapa você criará a estrutura de Publicação para seu blog.

  1. Rode um scaffold para gerar o CRUD da Publicação
  2. Depois execute a migrate
  3. Torne a Listagem de Publicações a página inicial da sua aplicação, em (config/routes.rb) coloque:
  4. Adicione o Action Text e a Imagem de Destaque ao Model Post, em (app/models/post.rb) coloque:
  5. Atualize a permissão de parâmetros para conseguir salvar o que foi adicionado (app/controllers/posts_controller.rb):

     

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.

  1. Crie a partial view (app/views/shared/_navbar.html.erb) que conterá a barra de navegação da aplicação.

    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

  2. Insira a partial Navbar ao layout da Aplicação (app/views/layout/application.html.erb):

     

Ajustando as Views

Agora você irá alterar o conteúdo das views para melhorar a visualização de suas páginas.

  1. Substitua o conteúdo de new.html.erb (app/views/posts/new.html.erb):

    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)
  2. 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):

    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.

  3. 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):

     

  4. 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):

     

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

    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

  6. Para subir o projeto rode:

  7. 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 6 votes
Article Rating
junho 4, 2020
Subscribe
Notify of
guest
9 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Artigo Show! Vou experimentar já aqui! Valeu Léo!

Leonardo Scorza
Admin
2 anos atrás
Reply to  Marco Antonio

Boaaa

Osiris Mariano
2 anos atrás

Valeu Léo por compartilhar! Estava pensando como fazer esse tutorial com Docker. =)

Caio Ramos
1 ano atrás
Reply to  Osiris Mariano

Deu certo? Como ficou? Posso ver?

Wagner Braga
Wagner Braga
2 anos atrás

Opa… bora reproduzir esse código.

Sara
Sara
2 anos atrás

Muito bom o artigo! Já coloquei em prática 🙂

Caio Ramos
1 ano atrás

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

Caio Ramos
1 ano atrás

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

Caio Ramos
1 ano atrás

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

Feito com s2 por OneBitCode

9
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: