A quick and easy way to prototype ideas using Twitter Bootstrap and Jekyll.
- Twitter Bootstrap 3 - you have access to all the CSS and JS
- Underscore.js
- Handlebars.js
- Jquery 1.9.1
- Bootstrap datepicker JS and CSS
- jekyll
- Open up terminal, or I suggest iTerm2
- Clone repo
git clone git@github.com:jeffchuber/jekyll-bootstrap-boilerplate.git
- Enter repo
cd jekyll-bootstrap-boilerplate
- Make sure you have jekyll installed
gem install jekyll
- Run
jekyll serve --watch
. - In your browser go to localhost:4000
- Make edits, refresh your browser, and see things happen!
_layouts/default.html
is where you edit the base styles of your app. This is where you can put your header and footer that are standard across all page. This is also where you can and should include javascript, fonts, CSS, etc that you want to add to the page. (basically anything in the<head>
element){{content}}
is where sub pages will put their content. For example for your landing page, the contents ofindex.html
will be placed in the default layout and replace{{content}}
index.html
is your landing page_posts/2013-10-10-example.html
is your first page. You can access it by going to localhost:4000/example. To create a new page, use the same naming as you see for the example page. So if you about a page calledabout
, create2013-10-10-about.html
. Now you can go to localhost:4000/about or link to it from another view by typing<a href="/about">About</a>
Make sure to include the block at the top that you see in the example.
---
layout: default
title: "Example"
date: 2013-10-21 12:06:36
---
For more learning check out the Jekyll Documentation
If you want to easily put your mockups up on the internet, there is a super simple way to do this using s3_website The basic instructions are (copied from Readme.md):
Here's how you can get started:
- Create API credentials that have sufficient permissions to S3. More info here.
- Go to your website directory
- Run s3_website cfg create. This generates a configuration file called s3_website.yml.
- Put your AWS credentials and the S3 bucket name into the file
- Run s3_website cfg apply. This will configure your bucket to function as an S3 website. If the bucket does not exist, the command will create it for you.
- Run s3_website push to push your website to S3. Congratulations! You are live.