A kickstart to create websites for conference/events [WIP]
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 3 commits ahead, 299 commits behind braziljs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_includes
_layouts
assets
.gitignore
Makefile
README.md
_config.yml
index.html

README.md

Conf Boilerplate

Uma iniciativa da BrazilJS Foundation para ajudar aqueles que querem organizar conferências/eventos e não tem muito tempo para criar o site disso.

Como funciona?

Nós usamos o Jekyll, um static generator em Ruby, para criar esse modelo extremamente simples de customizar. Além disso, a hospedagem é gratuita via Github Pages e você ainda pode usar seu próprio domínio (mais informações sobre isso em Deploy).

Por padrão, definimos as seguintes seções:

  • About - Para que você possa descrever o objetivo do seu evento.
  • Location - Para que você possa exibir a localização do seu evento através do Google Maps.
  • Speakers - Para que você possa listar informações sobre os palestrantes.
  • Schedule - Para que você possa mostrar a agenda do evento.
  • Sponsors - Para que você possa fazer propaganda dos seus patrocinadores.
  • Partners - Para que você possa fazer propaganda dos seus apoiadores.

OBS 1: Não há integração com nenhum sistema de inscrição e/ou pagamento. Por conta disso, indicamos o Eventick.

OBS 2: Por enquanto ainda não conseguimos desenvolver uma solução altamente automatizada e customizável para formulários de contato (acompanhe/ajude na discussão em #4). Por conta disso, indicamos o Wufoo.

Estrutura

A estrutura básica do projeto se dá na seguinte forma:

.
|-- _includes
|-- _layouts
|-- _site
|-- assets
|-- _config.yml
|-- CNAME
|-- index.html
`-- Makefile

_includes

São blocos de código utilizados para gerar a página principal do site (index.html).

_layouts

Contém o template padrão da aplicação.

_site

É onde os arquivos gerados são armazenados, uma vez que o Jekyll tenha sido rodado. Porém, esse diretório se torna desnecessário no nosso modelo, por isso está ignorado (.gitignore).

assets

Possui as imagens, arquivos CSS e JS.

_config.yml

Armazena de forma fácil a maior parte das configurações da aplicação.

CNAME

Indica o domínio personalizado que deve ser usado (mais informações sobre como usar seu domínio próprio em Deploy).

index.html

É o arquivo que importa todas as seções da aplicação.

Makefile

Contém as tarefas que lhe auxiliam em todos os passos do projeto.

Mais informações sobre a estrutura de arquivos do Jekyll, clique aqui.

Primeiros passos

Instale o Ruby, caso você não tenha ainda.

Agora, instale o Jekyll através do comando:

make install

Uma vez tendo instalado, você só precisa clonar o projeto:

git clone git@github.com:braziljs/conf-boilerplate.git

Depois vá para pasta do projeto:

cd conf-boilerplate

E finalmente rode:

make run

Agora você irá ver o site rodando em localhost:4000 :D

Customização

O projeto já vem com um template visual pronto, use-o à vontade, mas nós recomendamos que você crie seu próprio, a fim de colocar sua própria cara no evento.

De qualquer forma, nós preparamos algo altamente customizável para você, portanto para maioria das alterações do projeto basta ir até o _config.yml e alterar o valor das variáveis.

Informações básicas sobre a conferência

Quer alterar o nome, data, endereço, cidade ou preço do evento? É só mudar.

conf:
  name: Conference name
  description: Conference description
  date: November 15
  price: $100
  address: Boulevard Kukulcan, 30, México
  venue: Coco Bongo
  city: Cancún

Informações básicas sobre o site

Quer mudar a imagem de capa, código do Google Analytics ou o favicon? Vá em frente!

url: http://confboilerplate.com
favicon: http://braziljs.org/favicon.ico
google-analytics: UA-33656081-1
images:
  cover: http://f.cl.ly/items/2X28422q1e3w0C2U1P3H/866591_24254643.jpg
  facebook: http://braziljs.org/img/fb-share.jpg

Seções ativas

Ainda não definiu a programação completa do evento? Não tem problema, basta alterar a variável schedule para false.

Ainda não sabe quem irá palestrar? Tudo bem, basta alterar a variável speakers para false.

E por aí vai.

sections:
  about: true
  location: true
  speakers: true
  schedule: true
  sponsors: true
  partners: true
  contact: false

Lista de Palestrantes

Para incluir/alterar/excluir um palestrante também é igualmente simples, basta recorrer ao schedule.

schedule:
  - name: Chuck Norris
    photo: http://f.cl.ly/items/2A3p1N0C3c0n3N3R1w2B/speaker.jpg
    bio: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    company: Delta Command
    twitter: littlechuck
    presentation:
      title: How to kill a elephant with one finger
      description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      time: 13h00

Quer listar mais algum atributo do palestrante que não está ali, tudo bem é só adicionar no _config.yml e depois exibí-lo com {{ speaker.seuNovoAtributo }} no speakers.html.

Lista de outros itens da Agenda

Para alterar os horários de check-in, almoço e coffee-break, é só recorrer as variáveis de schedule.

schedule:
  - name: Check-in / Breakfast
    time: 9h00

Mas se você quiser adicionar mais um coffee-break ou qualquer outro tipo de item na agenda do evento, é só acrescentar mais um item nessa lista.

Lista de Patrocinadores/Apoio

Para adicionar qualquer patrocinador ou apoio no evento, é só recorrer as variáveis sponsors e partners.

sponsors:
  - name: Eventick
    logo: http://frontinbh.com.br/assets/imagens/apoiadores/eventick.png
    url: http://eventick.com.br

Deploy

Nós não gostamos de centralizar o poder de deploy em uma pessoa, portanto utilizaremos o recurso de Github Pages que ainda é gratuito.

  • Rode make deploy na raíz do projeto.

Espere alguns minutos até que o Github lhe envie um e-mail avisando que tudo ocorreu bem. Depois é só acessar: http://seuUsuario.github.com/seuFork

OBS: Lembre-se de remover o arquivo CNAME, caso você queira hospedar no Github.

Domínio personalizado

Caso você não queira utilizar o domínio do Github, é possível usar seu próprio com alguns passos.

  1. Altere o arquivo CNAME na raíz do seu projeto e preencha com o nome do seu domínio: seuevento.com. Veja o exemplo.
  2. Altere o DNS do seu domínio seguindo as instruções do Github.

Como fazer sem Deploy utilizar Github Pages

Se você prefere utilizar seu próprio servidor para hospedar o site:

  • Rode make build na raíz do projeto.

Esse comando irá gerar uma pasta _site contendo apenas arquivos estáticos, depois é só fazer o upload do conteúdo dessa pasta para sua hospedagem.

Quem está por trás disso?

Nós somos um grupo de desenvolvedores que passaram por muitas dificuldades organizando conferências pelo Brasil e agora queremos ajudar outras pessoas nesse árduo trabalho.

Líder do Projeto: Zeno Rocha