Starch
Starch is an opinionated skeleton generator for basic static site development. It will get you going on new sites quickly by generating the meat and potatoes of your toolchain. Starch gets you:
- A simple directory structure
- Barebones
bower.json
andpackage.json
files for easily saving bower and npm dependencies - Templates, partials, and helpers via Handlebars
- PNG, JPG, and GIF optimization
- SASS compilation
- JS uglification
- Coffeescript compilation
- A preview server with livereload
- The ability to build a production-ready version of your site
Prerequisites
-
NodeJS with
npm
Installation
$ gem install starch
Usage
To scaffold a new site named mysite
:
$ starch new mysite
Starch will create a directory mysite
within the current directory that looks
like this:
├── Gruntfile.js
├── app
│ ├── assets
│ │ ├── files
│ │ ├── fonts
│ │ ├── images
│ │ ├── js
│ │ └── stylesheets
│ │ └── main.scss
│ ├── helpers.js
│ ├── pages
│ ├── partials
│ └── templates
│ └── default.hbt
├── bower.json
├── node_modules
│ └── ...
└── package.json
- Your site's HTML files should live in
app/assets/pages/
with.html
extensions.- These files will be parsed with Handlebars.
- You can include a YAML block (in between two lines of
---
) at the top of the file with frontmatter. The data provided here will be available in the file and in the file's template, via thepage
object.
- Partials should live in
app/assets/partials/
with.hbp
extensions.- You can use partials in your HTML files and in your templates in standard
Handlebars fashion (
{{> my-partial-name}}
).- If you want to use a partial that is deeply nested, you don't need to specify the path - just use the partial's name.
- You can use partials in your HTML files and in your templates in standard
Handlebars fashion (
- Templates should live in
app/assets/templates/
with.hbt
extensions.-
default.hbt
is the default template and needs to exist, otherwise you're gonna have a bad time. - You can change the template that a given
.html
file uses by specifyingtemplate: some-template-name
in the file's frontmatter. - Use
{{{body}}}
in your templates where the HTML should be rendered.
-
- Any Handlebars helpers can live in
app/helpers.js
. In the exported object, each key/value pair should resemblehelperName: function(value) { ... }
. - Javascript and Coffeescript should live in
app/assets/js/
.- Javascript files should have a
.js
extension and Coffeescript files should have a.coffee
extension.
- Javascript files should have a
- SASS should live in
app/assets/stylesheets/
.- The only SASS file that will be compiled is
app/assets/stylesheets/main.scss
. This file should be used to import the rest of your SASS.
- The only SASS file that will be compiled is
- Images in
app/assets/images/
with.png
,.jpg
, or.gif
extensions will be optimized and copied 1:1 into the destination directory. - Fonts, and any other static assets should live in
fonts
andfiles
(located inapp/assets
), respectively. These files will be copied 1:1 without any additional processing.
When your site is staged or built, the assets
directory will be placed in the
root of the destination directory, alongside the rendered contents of the
pages
directory. For example, app/pages/index.html
will end up as
/index.html
, and you can reference assets in your site like:
/assets/images/spuds.png
.
Grunt tasks - staging, building, cleaning
The entirety of the Starch toolchain is accessible through Grunt. There are quite a few tasks defined in the Gruntfile, but there are only three that you should really care about:
-
grunt serve
: Builds your site for staging and starts a preview server onhttp://0.0.0.0:8000
.livereload
is enabled, so any time theapp
directory changes, the site will be automatically refreshed in your browser. Neat! -
grunt build
: Builds your site for production into thepublic_html
directory. -
grunt clean
: Nukes thestaging
andpublic_html
directories. You can be more specific withgrunt clean:staging
andgrunt clean:build
, respectively.
It's just a scaffolder
Starch is meant to provide a solid starting point for new projects; however, it may not always meet your particular needs. You're encouraged to modify the generated Gruntfile (or anything else) to meet the requirements of your project.
Contributing
- Fork it ( https://github.com/brianokeefe/starch/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request