A few things are required to develop the site:
- Node.js (and NPM)
- Grunt CLI (command line interface), as a Node.js module
- Sass and Jekyll, as Ruby Gems.
- All the Grunt plugins listed on
package.json
.
However, this project is set up so you only have to install Node.js + NPM, and when installing the dependencies listed on package.json
, the rest will be installed for you.
First, install Homebrew.
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
Then, install Node.js via Homebrew. NPM, Node’s package mananger, will also be installed.
brew install node
Finally, install all the project dependencies.
npm install
This last command will install everything for you, including Grunt’s CLI, Sass and Jekyll.
To build the site, run Grunt:
grunt
To preview the site locally:
- Point your local MAMP installation at the
_site
directory. - Open the browser at MAMP’s URL, usually
http://localhost:8888
.
You can make Grunt automatically rebuild the site when changes are made:
grunt watch
You can Grunt’s watch mode with ctrl + C
.
(Note: Rebuilding the site isn’t immediate, as Jekyll takes some time.)
New pages and posts need to specify the layout
they use in the file's front-matter. Other properties may be defined, like title
, used in the page's <title>
:
---
layout: default
title: Hello World
---
To use custom colors on a page, it needs to specify an accent
class on the front-matter:
---
accent: xoxo
layout: default
title: Hello World
---
These are defined in a Sass file, assets/styleshets/scss/_screen.scss
, as such:
$accent-colors: ((default, #114A80), (jam, #76cc1e));
Here's how it looks after adding xoxo
as a new accent color (note the commas and spaces):
$accent-colors: ((default, #114A80), (jam, #76cc1e), (xoxo, #D0599F));
Finally, the Sass code must be compiled. For that, run the update-sass
bash script on the project's root folder:
./update-sass
Then push, and that's it.