Título alternativo: Construindo e implantando um site jekyll com um formulário de contato ajax

As páginas do Github são ótimas para construir e hospedar sites jekyll . Mas às vezes eles simplesmente não funcionam. Por exemplo, quando você precisa de plug-ins jekyll (o Github os desativa por razões de segurança) ou você precisa de alguma lógica adicional do lado do servidor – como eu fiz para um formulário de contato ajax.

A seguir está uma descrição da configuração que uso para construir e implantar automaticamente um aplicativo sinatra / jekyll-hybrid no heroku sempre que envio uma atualização para o repositório github onde hospedo o código-fonte.

Requisitos

Construa o site com jekyll
Implementar um formulário de contato ajax
Ser capaz de implantar por meio de um simples git pushgithub (para que http://prose.io possa ser usado)

Solução possível

Minha solução (tenho certeza de que há muitas outras) para os requisitos acima é a seguinte

Aplicativo Sinatra hospedado em heroku (baseado neste modelo )
- servir as páginas estáticas geradas por jekyll
- fornecer um terminal POST para o formulário de contato integrado
Servidor de compilação Heroku
- busca o repositório github sempre que for enviado (por meio de webhooks)
- constrói o site jekyll
- envia o código para um aplicativo de produção no heroku

Ok, vamos fazer isso …

Fazendo

Eu uso um pequeno aplicativo clojure – github-heroku-jekyll-hook – rodando no heroku como o servidor de compilação. Você pode usar este servidor de construção para quantos aplicativos desejar.

Configurando o servidor de compilação

Para configurá-lo, você precisa fazer sete coisas:

Clone github-heroku-jekyll-hook via e para a nova pastagit clone https://github.com/dommmel/github-heroku-jekyll-hook.gitcd
Crie um aplicativo heroku ( heroku create)
Adicione um segredo heroku config:add ACCESS_KEY=supersecret
Diga para usar vários buildpacks via heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
Gere chaves para acessar o repositório github e os aplicativos heroku em sua máquina localssh-keygen -f deploy_rsa
Adicione a chave privada ao heroku via heroku keys:add deploy_rsa
Adicionar a chave pública (./deploy_rsa.pub) para o seu repo github (via interface web do github, consulte este How-To )

Configure o servidor de compilação para seu (s) aplicativo (s)

Depois de configurar o servidor de compilação, você precisa configurá-lo para cada aplicativo para o qual deseja usá-lo. Cada aplicativo precisa das chaves e da localização do github para buscar e do repositório heroku para onde enviar.

Configuração para seu aplicativo

heroku config:add appname_SSH_KEY="$(cat deploy_rsa)" appname_GITHUB_REPO=git@githup.com/dommmel/appname.git appname_HEROKU_REPO=git@heroku.com

(substitua appname pelo nome de seu aplicativo e defina os urls corretos do repositório git remoto github e heroku)

Adicionar um github webhook

Em seguida, configure um github webhook apontando para um URL como

https://github-heroku-jekyll-hook.herokuapp.com/deploy?app=appname&key=supersecret

Certifique-se de substituir o seu segredo pelo que você definiu na etapa 3. de “Configurando o servidor de compilação” acima

Para obter pontos de bônus, você provavelmente desejará configurar um gancho de implantação do Heroku para avisar quando seu aplicativo foi implantado.

Anatomia do aplicativo a ser construído e implantado

Isso pode ser específico para meu caso de uso em particular, mas vou apresentar brevemente os fundamentos do aplicativo sinatra / jekyll para o qual usei tudo isso pela primeira vez.

Você pode encontrar o modelo para este aplicativo sinatra-jekyll-hybrid no github . Ele usa jekyll-assets para compilar arquivos sass (via bússola) para css e arquivos coffeescript para javascript.

A seguir, irei apontar alguns pontos importantes.

Se você é como eu e gosta de pular a conversa, vá em frente e tente você mesmo primeiro

clone o modelo via e para a pastagit clone https://github.com/dommmel/sinatra-jekyll-hybrid.gitcd
instalar dependências via bundle install
compilar o site via jekyll build
e inicie o aplicativo foreman startpara testá-lo localmente
implantar no heroku ( heroku create) – Observe que não estamos enviando as páginas geradas nem enviando para o heroku ainda. Isso é feito mais tarde pelo servidor de compilação

Enfim … agora falando

Estrutura da pasta

Como eu tenho um sinatra / jekyll-hybrid, minha estrutura de pastas fica assim

project_root
 |__ jeykll
 |    |__ …
 |__  sinatra
 |     |__ app.rb
 |__ Procfile
 |__ config.ru
 |__ _config.yml
 |__ Gemfile

Configurando jekyll

Jekyll precisa encontrar as fontes localizadas na jekyllpasta. Você pode configurar isso através da sourceopção em seu_config.yml

source: jekyll
assets:
  compress:
    js:   uglifier
    css:  sass

Adicionar gemas

Adicione todas as gemas necessárias para construir o site ao seu Gemfile, no meu caso, é o seguinte

source 'https://rubygems.org'

group :development do
  gem 'coffee-script'
  gem 'compass'
  gem 'uglifier'
  gem 'jekyll'
  gem 'jekyll-assets'
end

gem 'sinatra'
gem 'thin'

Servindo as páginas jekyll com sinatra

A parte que faz isso é:app.rb

get '/*' do
  file_name = "_site#{request.path_info}/index.html".gsub(%r{/+},'/')
  if File.exists?(file_name)
    File.read(file_name)
  else
    raise Sinatra::NotFound
  end
end

Ignorando o site gerado pelo git

Para ignorar sua _sitepasta local (gerada por jekyll) ao enviar para o github, mas ainda fazer com que seja enviada para o heroku mais tarde, adicione-a.git/info/excludes.

Fin

Aí está. Envie para o github e as atualizações do seu site. O quê mais?

BTW: Se você achou isso legal, talvez queira dar uma olhada em jekyll-hook
PS: Inglês não é minha língua nativa e eu escrevi isso rapidamente; Sempre sou grato por correções e comentários