Faz algum tempo que venho usando o plano gratuito do Heroku para hospedar páginas estáticas, embora você consiga ir muito além disso. De qualquer modo, é uma maneira muito prática de ter sites estáticos com o poder do deploy de aplicações através de um simples push do Git.

O processo em si é bastante simples. Primeiro, você deve organizar todos os seus arquivos em algum diretório, por exemplo, some_site/public. Este diretório pode conter arquivos HTML, JavaScript e CSS. Na prática, você pode servir qualquer tipo de arquivo.

Crie o arquivo some_site/config.ru. Nós iremos servir os arquivos estáticos com Rack. Primeiro, nós vamos criar um aplicativo usando o Rack::Builder. Este aplicativo usará um middleware que redirecionará a requisição na raíz do site para o arquivo some_site/public/index.html.

Todos os outros arquivos do diretório some_site/public serão servidos com o Rack::Directory.

app = Rack::Builder.new do
  use Rack::Static, urls: {"/" => "index.html"}, root: "public"
  run Rack::URLMap.new({
    "/" => Rack::Directory.new("public")
  })
end
 
run app

Crie também um arquivo Gemfile, que terá como única dependência o próprio Rack. Este arquivo Gemfile deve estar na raíz do seu projeto e será algo como isto.

source :rubygems
gem "rack", "~> 1.3"

Execute o comando bundle install para instalar a dependência e gerar o arquivo Gemfile.lock.

Na raíz do projeto, inicie um novo repositório Git e faça o commit inicial.

$ cd some_site
$ git init
Initialized empty Git repository in /Users/fnando/Sites/some_site/.git/
$ git add .
$ git ci -am "Initial commit"
[master (root-commit) 54e37c9] Initial commit
 4 files changed, 31 insertions(+), 0 deletions(-)
 create mode 100644 Gemfile
 create mode 100644 Gemfile.lock
 create mode 100644 config.ru
 create mode 100644 public/index.html

Agora, basta criar seu aplicativo no Heroku. Se você ainda não possui uma conta configurada, veja o que é preciso fazer. Se tudo estiver certo, você pode criar um novo aplicativo com o comando heroku apps:create <seu-app>. O stack padrão é baseado no Ruby 1.9, então estamos muito bem acompanhados.

$ heroku apps:create some-site
Creating some-site... done, stack is bamboo-mri-1.9.2
http://some-site.heroku.com/ | git@heroku.com:some-site.git
Git remote heroku added

Para fazer o deploy, execute o comando git push heroku.

$ git push heroku 
Counting objects: 7, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (7/7), 768 bytes, done.
Total 7 (delta 0), reused 0 (delta 0)
 
-----> Heroku receiving push
-----> Ruby/Rack app detected
-----> Gemfile detected, running Bundler version 1.0.7
       Unresolved dependencies detected; Installing...
       Using --without development:test
       Fetching source index for http://rubygems.org/
       Installing rack (1.3.5) 
       Using bundler (1.0.7) 
       Your bundle is complete! It was installed into ./.bundle/gems/
-----> Compiled slug size is 152K
-----> Launching... done, v3
       http://some-site.heroku.com deployed to Heroku
 
To git@heroku.com:some-site.git
 * [new branch]      HEAD -> master

Certifique-se que está tudo funcionando. Basta acessar a URL exibida após o deploy que, neste caso, é http://some-site.heroku.com.

Obviamente, usar esta URL não é nada profissional. Você pode configurar seu próprio domínio, sem gastar nada (se não me engano, você precisa adicionar o seu cartão de crédito, mesmo sendo funcionalidades gratuitas). Adicione a extensão "Custom Domains".

$ heroku addons:add custom_domains:basic
-----> Adding custom_domains:basic to some-site... done, (free)

Adicione também a extensão "Zerigo DNS".

$ heroku addons:add zerigo_dns:basic
-----> Adding zerigo_dns:basic to some-site... done, (free)

Finalmente, você pode adicionar seu domínio com o comando heroku domains:add <seu domínio>.

$ heroku domains:add somesite.com
Added somesite.com as a custom domain name for some-site

Você precisará adicionar o registro de DNS que irá redirecionar www.somesite.com para somesite.com no site da Zerigo. Para acessar este painel de controle, execute o comando heroku addons:open zerigo_dns:basic.

$ heroku addons:open zerigo_dns:basic
Opening zerigo_dns:basic for some-site...

Clique no botão "Configure".

Painel do Zerigo DNS no Heroku

Você será redirecionado para uma tela como esta:

Zerigo DNS

Clique no link "Host > Add" para adicionar um novo registro. No campo "Host", digite "www", defina o tipo do registro como sendo "Redirect" e, por último, digite a URL de destino no campo "Data".

Zerigo DNS - Adicionando redirecionamento

O Zerigo DNS funciona bem para poucos acessos, mas você pode rapidamente ultrapassar o limite do plano básico. Neste caso, sugiro que dê uma olhada no serviço oferecido pela DNSimple, que custa apenas US$3 para 10 domínios e é extremamente simples de configurar; existe até uma opção de configuração com apenas um clique para aplicativos hospedados no Heroku.

Comentários #

#1 Luis Cipriani disse:
28 Dez 11, 03:04PM

Outra alternativa é usar o github pages também (http://pages.github.com/)

#2 Henriquegeek disse:
28 Dez 11, 04:19PM

Muito legal o post, hj eu uso o iwantmyname para fazer tudo para mim alem de registrar meus dominios .com

http://iwantmyname.com/services/developer/heroku-cloud-hosting-custom-domain

#3 Nando Vieira disse:
28 Dez 11, 05:00PM

Para usar o Github Pages com seu próprio domínio é preciso ter uma conta paga. :/

#4 Nando Vieira disse:
28 Dez 11, 05:01PM

Para usar o Github Pages com seu próprio domínio é preciso ter uma conta paga. :/

#5 Nando Vieira disse:
28 Dez 11, 05:01PM

Legal! Não conhecia! :)

#6 Valério Farias disse:
02 Jan 12, 07:21PM

Tudo bem Nando Vieira.
Se possível, configure seu RSS para mostrar o post completo.
Tentei acessar o RSS do seu site pelo smartphone e consigo ler o parágrafo do post. Depois clico no link que vai para a página e aí a usabilidade cai bastante. Tenho que diminuir o tamanho da fonte. Tento clicar o lik sair do anuncio javascript que aparece mostrando o curso howtocode. Enfim acabei desistindo de acessar pelo celular.

Sei que você tem suas pretensões com esse modelo, por isso só estou perguntando se é possível.

Grande abraço.

Deixe um comentário





Não é aceito código HTML: adicione-o no pastie.org ou paste.milk-it.net e poste apenas o link.

Se este é seu primeiro comentário, ele terá que ser aprovado antes de ser exibido.

JavaScript Avançado

O JavaScript é a única linguagem que muitos acreditam saber sem nunca terem parado para realmente aprendê-la. Neste workshop rápido você entenderá de verdade todos os conceitos avançados do JavaScript em 4 horas puramente práticas.

Saiba mais Fechar

Conheça também o HOWTO