rafflecopter/homepage

homepage

This is Rafflecopter's homepage. It is shown at [***] It is deployed to s3 in the bucket homepage.rafflecopter.com, which is served behind a cloudfront distribution. The main http://github.com/Rafflecopter/Raffle app's nginx proxies the homepage when not inside the app itself.

Primary Maintainer: https://github.com/runningskull

Technologies

• Building and deploying are done using gulp and http://nodejs.org/.
• Webhooks from Github are piped through to your local server using ultrahook.
• Templating is done using handlebars.
• Configuration of content sections uses http://www.yaml.org/.
• Javascript is built using browserify.
• CSS is built using Sass.
• Deployments are kept on http://aws.amazon.com/s3/ and CDN-bufferred by http://aws.amazon.com/cloudfront/.
• A https://www.docker.com/ container can be used to host, build, and deploy the homepage.

Organization

• PAGES/*.hbs contains templates for any new/existing pages composed out of https://help.github.com/articles/markdown-basics/ and CONTENT
• TYPES contains partial templates for each section of a page / major content type
• CONTENT contains specific configurations for each real section on a page. Each pages data is input according to one or more templates in TYPES in YAML
• config is where we keep build-target-specific options like where to find the widget
• templates/img, templates/js, and templates/scss contain the things you would expect. Both js and scss are prebuilt using respective gulp tasks.

Landing Page Editor

In order to use the landing page editor, please run the following in your Terminal app located at Applications/Utilities/Terminal:

shell
bash;
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)";
brew install git;
cd $HOME; git clone https://github.com/Rafflecopter/homepage.git;
cd homepage; ./INSTALL.sh

This will install the required software on your computer. Contact Grant or another developer if something errors out on you.

You will need to run through https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/ to add an ssh-key to Github if you don't have one already. Also, you will need to have Grant or another developer create an Ultrahook key and add a webhook to the https://github.com/Rafflecopter/homepage/settings/hooks. There are many examples of existing webhooks in the homepage repo settings.

Each time that you want to edit the homepage:

• go to http://www.github.com/rafflecopter/homepage
• open a new or existing branch (that you created earlier) by clicking branch and typing in a new name OR clicking on an existing one
• type homepage-watch --branch=your-branch-name (without the quotes) into a terminal window
• edit away
• each change that you make will be updated at http://localhost:8000 in your browser window.
• have Grant walk you through it once or twice if this is in any way confusing

Development

The majority of this app is developed using handlebars for templating and gulp for building and scripting. Below is an example descri***g the code organization and workflow:

The pricing page has the following section:

hbs

<section class="pricing-table">
    {{-- "pricecol-enterprise"}}
    {{-- "pricecol-premium"}}
    {{-- "pricecol-basic"}}
</section>

This pulls in the 3 pricing columns, which are defined in content/price-col-*.yml:

yaml
_type: "price-col"

plan_name: "basic"
title: "Basic"

The _type: line will pull in the templates/sections/price-col section template. First it will run the price-col/index.js file to modify the configuration given by the content config.

javascript
module.exports = null

In this case, the index.js does nothing, which is common. See widget-test-drive/index.js for a section that modifies the configs before templating.

Then we use price-col/template.html to template out the price-col-basic using the config from price-col-basic.yml:

html
<div id="{{_id}}" 
     class="price-col"
     data-monthly="{{price}}"
     data-yearly="{{price_yearly}}">...</div>

And this templated section will show up in the built file: pricing.html. In production, we'll redirect www.rafflecopter.com/pricing to it.

Running (developers)

Usually you'd use the https://github.com/Rafflecopter/developer-environment's helpers to serve the homepage.

devrun homepage start
open http://homepage.raafl.com

If you wanted to run locally though without docker:

npm install
npm start
open http://localhost:8000

Merging landing page PR's (developers)

Since creating a landing page involves making a ton of commits, the cleanest way to merge them is to merge the PR by hand, and do a git rebase -i <sha-of-first-commit-on-branch> and http://git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages all the commits except for one. It's a good practice to delete the branch after you merge it.

Deploying (for developers)

You can use the docker container to deploy.

docker pull rafflecopter/homepage
./deploy.sh --production

Simply replace production with staging to deploy to your staging.

If you want to deploy without docker, use gulp

npm install
NODE_ENV=production gulp deploy