**The open-source LaunchRock alternative. Build beautiful splash pages to collect emails & more – primarily focused on performance and rapid development.
This project is bundled with the following default components and services in mind:
- Node.js
- Eskimo
- Jade
- LESS
- Gulp
- Bower
- Bootstrap
- FontAwesome
- jQuery
- Modernizr
- HTML5 Boilerplate
- Amazon CloudFront
- Amazon S3
- MailChimp
- CircleCI
* Note that you can swap out many of these components and services with your preferred alternatives.
Development (and Deployment) is made simple thanks to Gulp. Follow these simple instructions for setting up this project locally:
-
Make sure you are using Node.js version
>= 0.12
. -
Either clone this repository (recommended) or download a ZIP locally:
To clone locally (preferred approach):
git clone [email protected]:niftylettuce/gulp-aws-splash.git
Or, to download a ZIP locally:
curl -o ~/gulp-aws-splash.zip https://github.com/niftylettuce/gulp-aws-splash/archive/master.zip
If you downloaded the ZIP, then you'll need to extract it first of course.
-
Change your working directory in terminal to the project's (e.g.
cd ~/gulp-aws-splash/
). -
Install NPM dependencies required for developing locally and deploying the project:
npm install
Also install gulp
and bower
globally if you have not yet already:
npm install -g gulp bower
- Configure
boot/config.js
with your Google Analytics, MailChimp, and Amazon Web Services credentials.
For Google Analytics:
-
Go to https://www.google.com/analytics/web/ → Admin → Create New Account.
-
Complete required fields in order to create a new account.
-
Copy/paste the generated "Tracking ID" as the value of
googleAnalytics
inboot/config.js
:
```diff
- googleAnalytics: env.GA || 'TODO',
+ googleAnalytics: env.GA || '12345678',
```
For MailChimp:
-
Go to http://mailchimp.com/ → Log in (or Sign up) → Create List.
-
Complete required fields in order to create a new list.
-
Go to the Lists → Select (select your newly created list) → Signup forms → Embedded forms.
-
Copy/paste the generated
<form>
action attribute value as the value ofmailChimp.actionUrl
inboot/config.js
:
```diff
mailChimp: {
- actionUrl: env.MC_AU || 'TODO',
+ actionUrl: env.MC_AU || '//johndoe.us0.list-manage.com/subscribe/post?u=123456789abcdefghijklmno&id=1234567890',
```
- Copy/paste the generated
<input>
name attribute value as the value ofmailChimp.hiddenInputName
inboot/config.js
(note that this<input>
is inside of an<div>
withabsolute
CSS positioning):
```diff
- hiddenInputName: env.MC_HIN || 'TODO'
+ hiddenInputName: env.MC_HIN || 'm_4co51234b92a65zb2a52z0221_154363e5def'
},
```
For Amazon Web Services:
-
Go to https://console.aws.amazon.com/s3/home → Create New Bucket.
-
Click on the newly created bucket → Static Website Hosting → Enable Website Hosting.
-
Set the value of Index Document to
index.html
and Error Document to404.html
, then click Save. -
Modify
boot/config.js
with your newly created bucket name:
```diff
params: {
- Bucket: env.AWS_BUCKET || 'TODO'
+ Bucket: env.AWS_BUCKET || 'gulp-aws-splash'
}
```
-
Go to https://console.aws.amazon.com/iam/home#security_credential → Access Keys (Access Key ID and Secret Access Key) → Create New Access Key.
-
Copy/paste the values of Access Key ID and Secret Access Key to
boot/config.js
(note that you will repeat yourself below, sincegulp-awspublish
andgulp-cloudfront
call for different configurations):
```diff
aws: {
- key: env.AWS_KEY || 'TODO',
+ key: env.AWS_KEY || 'ZFIKXOJ1MKTNVTQ4VPAD',
- accessKeyId: env.AWS_KEY || 'TODO',
+ accessKeyId: env.AWS_KEY || 'ZFIKXOJ1MKTNVTQ4VPAD',
- secret: env.AWS_SECRET || 'TODO',
+ secret: env.AWS_SECRET || 'j4nIT6KSuuuk01g3q4y+eYsuxtIUvMuoyWTfGV86W',
- secretAccessKey: env.AWS_SECRET || 'TODO',
+ secretAccessKey: env.AWS_SECRET || 'j4nIT6KSuuuk01g3q4y+eYsuxtIUvMuoyWTfGV86W',
```
-
Go to https://console.aws.amazon.com/cloudfront/home → Web → Get Started → Create Distribution.
-
Complete required fields in order to create a new distribution * If you want to use your own domain name, then please fill out the value of Alternate Domain Names).
-
Copy/paste the Distribution ID as the value for
aws.distributionId
inboot/config.js
:
```diff
- distributionId: env.AWS_DI || 'TODO',
+ distributionId: env.AWS_DI || 'UXCY8BV5VXPSL',
```
- Run
gulp watch
to start watching changes you make locally to the project. It should automatically open up http://localhost:3000/ in your default browser for you as well (which is the default development URL). Note that you typically don't need to rungulp build
before runninggulp watch
(since it is inpackage.json
as the postinstall script).
To manually deploy and publish changes to your project, simply run gulp deploy
. That's all you have to do!
If you'd like your project to automatically be built and published to Amazon when you git push
to GitHub, then configure CircleCI for continuous integration:
- Create a new repo on GitHub for your
gulp-aws-splash
project and push to it your locally checked out copy (ensure that the defaultcircle.yml
still exists in your project's root folder). - Log in to CircleCI and add the newly created repository
- Create custom environment variables based off your configuration in
boot/config.js
. Here is a list of all the required variables:
GA
- Google Analytics IDMC_AU
- MailChimp Form Action URLMC_HIN
- MailChimp Hidden Input NameAWS_KEY
- AWS keyAWS_SECRET
- AWS secretAWS_BUCKET
- AWS bucketAWS_DI
- AWS distribution ID