Criando sites estáticos com Sinatra

Hoje vamos aprender a criar sites estáticos usando um pouco de Ruby e Sinatra

Há uns dias atrás eu comecei uma série sobre Sinatra focado no desenvolvimento de APIs, os vídeos estão disponíveis no youtube e os links no rodapé deste post. 🙂

Hoje o foco vai ser criar um pequeno site institucional. Tomei por modelo o site do nosso amigo Jackson Pires o Vídeos de TI.

Veja o resultado final:

Pré requisitos

  • Ter ruby instalado;
  • Ter o bundler instalado;

Nosso site vai conter basicamente:

Uma página “home”, que será a página inicial do nosso site e também uma página para o “about”;

Iniciando o projeto

Vamos criar um chamado de my_site que será nome do nosso projeto.

$ mkdir my_site && cd my_site

Dentro do diretório my_site vamos criar o nosso arquivo de Gemfile com o seguinte conteúdo:

# Gemfile
source 'https://rubygems.org'
gem 'sinatra'

Ainda dentro do diretório my_sitevou criar um arquivo, e chamá-lo de App.rb. Esse arquivo é base do nosso projeto.
Dentro dele nos vamos poder definir rotas entre outras coisas.

Dentro de App.rb

#App.rb
require 'sinatra'
get '/' do
erb :index
end

Basicamente o estamos dizendo aqui que vamos devolver um template chamado de index , no momento em que o usuário acessar essa rota.

Por padrão o Sinatra vai procurar esse template dentro do diretório views na raiz do nosso projeto.

Então, vamos criar esse diretório e dentro dele já criar o esse “arquivo” chamado index.erb *

$ mkdir views && touch views/index.erb

Adicione o seguinte código:

<h1>Bem vindo ao Videos de Ti</h1>
<h3>O conhecimento ao seu alcance</h3>
<p>O projeto Vídeos de TI tem o intuito de ajudar pessoas que querem entrar no fascinante mundo da tecnologia, mais espeficiamente na área de programação.</p>

Subindo o nosso servidor $ ruby App.rb e acessando localhost:4567 você verá uma tela como esta:

Bacana, né? 🙂

Vamos criar uma outra página, só que para o o nosso “about”. Fazendo o mesmo que fizemos para o nosso “home” .

# App.rb
...
...
# Omitindo coisas
get '/about' do
erb :about
end

Criando a view para about:

$ touch views/about.erb

Não esqueça da view.

# views/about.erb
<h1>Sobre nós:</h1>
<p>
O projeto Vídeos de TI tem o intuito de ajudar pessoas que querem entrar no fascinante mundo da tecnologia, mais espeficiamente na área de programação.
</p>

** Não esqueça de parar o servidor (Ctrl + c) e iniciar novamente para que ele possa replicar as alterações feitas.

Acessando agora localhost:4567/about teremos:

Use um layout

Certamente nós vamos precisar estilizar isso, então, vamos criar um arquivo de layout pra e evitar a repetição de um monte de HTML.

Crie um arquivo chamado layout.erb dentro do diretório views

$ touch /views/layout.erb

E adicionei o seguinte:

<!-- views/layout.erb -->
<!doctype html>
<html lang="en">
<head>
...
...
<!--Omitindo conteúdo-->
</head>
<body>
  <%= yield %>
</body>
</html>

Você pode consultar o HTML neste repositório: https://github.com/aristotelesbr2014/my_site

O “importante” aqui é a instrução yield dentro da tag body.
Esse yield basicamente renderiza uma view para o layout atual, aplicando-o a todas as paginas que forem chamadas. Neste exemplo eu usei um CDN do Boostrap 4.

Depois de uma sessão de ctrl+c e ctrl+v nos exemplos do Boostrap o resultado será algo como:

Usando partials

Eu gosto sempre de separar o meu HTML de layout para tentar manter as coisas mais organizadas e evitar ter muitas linhas em um arquivo só, eu acho que fica mais fácil de dar manutenção depois, então coisas como header, footere algumas outras coisas da minha aplicação, eu costumo por dentro de um diretório, que gosto de chamar de application, dentro de views. E é que entra o uso de “partials”.

Como meu header e meu footerestão em arquivos separados eu posso usar injeta-los apenas fazendo algo como:

<%= erb(:minha_view) %>

*Note que estou usando um :simbolo como os arquivos que queremos acessar estão dentro de views/application/header.erb, por exemplo, podemos fazer algo como <%= erb (:'application/header') %>.

<!-- views/layout.erb -->
<!doctype html>
<html lang="en">
<head>
...
<!--Omitindo conteúdo-->
</head>
<body>
<!-- Header -->
<%= erb(:'application/header') %>
<!-- Main -->
<div role='main'>
<%= yield %>
</div>
<!-- Footer -->
<%= erb(:'application/footer') %>
<!--End-->
</body>
</html>

Como temos um about pequeno eu preferir manter tudo em uma única pagina.

É possível ver clicando no menu de hamburger.

Também estamos usando uma partial pra renderizar o nosso about dentro do header.

Você também pode remover a rota para about que criamos anteriormente adicionar um link para outra pagina mantendo a navegação.

<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<!--Render about page -->
<%= erb(:about) %>
<!-- End -->
</div>
<div class="col-sm-4 offset-md-1 py-4">
</div>
</div>
</div>
...
...

O resultado ficou bem agradável 🙂

E se você fez tudo como descrito… Você terá uma estrutura de arquivos semelhante a esta:

Sinatra é uma ferramenta muito poderosa e ao mesmo tempo muito simples de usar. Eu sinceramente não porque não usá-lo no seu dia-a-dia.

Aproveitando, se quiser receber mais novidades como essa basta assinar nossa newsletter, e se quiser dar aquela força ao nosso projeto é só curtir nossa página no Facebook e nos seguir nas redes sociais.

Links úteis:
http://sinatrarb.com/

https://www.videosdeti.com.br/
https://github.com/aristotelesbr2014/my_site

Um forte abraço e até a próxima! 😉