Awesome
Leia a documentação em Português
Conf Boilerplate
An iniciative of BrazilJS Foundation to help those people who wants to organize conferences/events and don't have too much time to create the website of it.
Maintainer: Jean Carlo Emer
Table of contents
- See live demo
- How it works?
- Getting Started
- Structure
- Customization
- Deploy
- Showcase
- Contributing
- Who is behind it?
- License
How it works?
We use DocPad, a static generator in NodeJS, to create an easily customizable template. More than that, hosting is free via GitHub Pages and you can use your own domain (more information about that on Deploy)
By default, we have the following sections:
- About - to describe what's the main goal of your event.
- Location - to show where it's going to happen through Google Maps.
- Speakers - to list information about speakers.
- Schedule - to show the agenda.
- Sponsors - to show the brand of your sponsors.
- Partners - to show the brand of your partners.
P.S. 1: There is no integration with any registration and/or payment system. For this reason, we recommend Eventick.
P.S. 2: We haven't developed a highly automated and customizable solution for contact forms yet. For this reason, we recommend Wufoo.
Getting Started
-
Now clone it:
$ git clone git://github.com/braziljs/conf-boilerplate.git
-
Then go to the project's folder:
$ cd conf-boilerplate
-
Install all dependencies:
$ npm install
-
And finally run:
$ npm run watch
Now you can see the website running in localhost:9778
:D
Structure
The basic structure of the project is given in the following way:
.
|-- out/
|-- src/
| |-- documents
| |-- layouts
| |-- partials
|-- docpad.js
|-- package.json
`-- publish.sh
out/
This is where the generated files are stored, once DocPad has been runned. However, this directory is unnecessary in versioning, so it is ignored (.gitignore).
src/documents
Contains the file responsible for importing all sections of the application. Also all theme's assets like images, CSS and JS.
src/layouts
Contains the default template of the application.
src/partials
Are blocks of code used to generate the site's main page (index.html).
docpad.js
Stores most settings of the application.
package.json
List NodeJS modules dependencies.
publish.sh
Shell Script responsible for publishing the site via via GitHub Pages.
Customization
The project already comes with a visual template, feel free to use it, but we recommend you create your own in order to put your own identity in the event.
Anyway, we have prepared something highly customizable for you, so for most of the changes just go to the docpad.js
and change the value of variables.
Basic information about the conference
Do you want to change the name, date, address, city or price of the conference? Go ahead.
conf:
name: "Conference name"
description: "Conference description"
date: "November 15"
price: "$100"
address: "Boulevard Kukulcan, 30, México"
venue: "Coco Bongo"
city: "Cancún"
Basic information about the website
Do you want to change the cover image, Google Analytics code or favicon? Go ahead!
site:
theme: "yellow-swan"
url: "http://braziljs.github.io/conf-boilerplate/"
googleanalytics: "UA-33656081-1"
Active sections
Still don't get a full schedule of the event? No problem, just comment out schedule
line (using #
).
Still don't get who is going to speak? Ok, just comment out speakers
line (using #
).
And so on.
sections: [
"about"
"location"
#"speakers"
#"schedule"
"sponsors"
"partners"
"contact"
]
You can also change order in which they appear on page and in navigation by changing order of lines here!
Labels (i18n)
If you want to use different words than default or different language just change labels for corresponding elements:
labels:
about: "Sobre"
location: "Localização"
speakers: "Palestrantes"
schedule: "Agenda"
sponsors: "Patrocinadores"
partners: "Parceiros"
contact: "Contato"
You can also use this object to define other labels, which you would like to access in your templates.
Speakers List
To add/change/exclude a speaker is equally simple, just see schedule
variable.
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"
]
Do you want to list an attribute of the speaker that is not there? Okay just add it on docpad.js
and then show it with <%= speaker.yourNewAttribute %>
on speakers.html.eco.
List of another items on Agenda
To change the time of check-in, lunch and coffee-break, just see schedule
variable.
schedule: [
name: "Check-in / Breakfast"
time: "9h00"
]
But if you want to add another coffee-creak or any kind of item on agenda, just add the item on the list.
List of Sponsors/Partners
To add any sponsor or partner, just use sponsors
and partners
variables.
partners: [
name: "BrazilJS"
logo: "http://f.cl.ly/items/2N3i2W0X2f3c2g2Z2N0f/Untitled-1.png"
url: "http://braziljs.org"
]
Deploy
We don't like to centralize the power of deploy in one person, so we'll use GitHub Pages that is free. You just need to run:
$ npm run deploy
Wait a few minutes until GitHub send you an email telling that everything went well. Then just access: http://yourUser.github.io/yourFork
Custom domain
If you don't want to use GitHub domain, you can use your own with a few steps.
- Create a
CNAME
file undersrc/files
folder and fill with your domain:yourevent.com
. - Change the DNS of your domain following GitHub instructions.
How to Deploy without GitHub Pages
If you want to use your own server to host the website:
- Run
npm run generate
on the root of the project.
This command will generate a folder called out
that contains just static files, then just upload them to your server.
Showcase
See the conferences that already used this project as a kickstart:
- FrontInterior
- Random Hacks of Kindness
- yoLab (source code)
- Payphone Hackday (source code)
- RSJS (source code)
- Front in BH (source code)
- Front in Rio
- Front in Bahia
- Dev in Company BH (source code)
- TEDx Recife
- DevFest
- DevFest Sul
- Front in Floripa
- Front in POA (source code)
- mloc.js
- Craft Conf (source code)
- Stretch Conference
- Meet.us() (source code)
- MPI LAMEC 2014
Have you created a website using ConfBoilerplate? Let's us know =D
Forks
Contributing
If you want to submit a pull request, please do it in dev
branch.
master
contains the stable version of it.dev
contains features that are being developed.
Who is behind it?
We're a group of developers who have been through hard times organizing conferences around Brazil and now just want to help another people to do this hard task.
Created by:
Special thanks to all community members for feedbacks and contributions.
License
MIT License © BrazilJS Foundation