site-with-jekyll-grunt-sass

jekyll site hosted on github project page

Setup the master branch

WARNING: This tutorial covers the setup of a Project Page, and as so the master branch is used as the source one, and the gh-pages branch holds the generated site. However, if you setup a User Page then the master branch holds the generated site, and so you have to create a new branch (eg: source) to hold your site source.

First, create an empty jekyll-example repository on github via the web interface.

Then generate the website:

$ jekyll new [FOLDER NAME]

Init git:

$ cd [FOLDER NAME]

$ git init

$ git add .

$ git commit -m "Generated by Jekyll"

Push master to github:

$ git remote add origin https://github.com/webdef/site-built-with-jekyll-grunt-and-sass.git

$ git push -u origin master

Setup the gh-pages branch

Create an orphan gh-pages branch:

$ git checkout --orphan gh-pages

$ git reset .

$ rm -r *

$ rm .gitignore

$ echo 'Coming soon' > index.html

$ git add index.html

$ git commit -m "init"

That way the master and the gh-pages branches are totally independant ones, they share no history at all.

Push gh-pages to github:

$ git push -u origin gh-pages

Now you should see Coming soon message when browsing to: http://webdef.github.io/site-built-with-jekyll-grunt-and-sass/

Let's work in master branch:

$ git checkout master

Checkout the gh-pages branch into _site directory:

$ git clone https://github.com/webdef/site-built-with-jekyll-grunt-and-sass.git -b gh-pages _site

The _site directory is already in .gitignore so we are just fine.

Let's test our new website:

$ grunt

Push the generated site on github:

$ cd _site

$ git add .

$ git commit -m "First generation"

$ git push

Now browse to http://webdef.github.io/site-built-with-jekyll-grunt-and-sass/ and ... wow... the jekyll site is displayed but the CSS is broken. Why ? Because you have to set the baseurl setting in the main config file.

So edit the _config.yml file and set:

baseurl: "/site-built-with-jekyll-grunt-and-sass"

url: "http://webdef.github.io"

Regenerate the site, and push result on github:

$ cd ..

$ jekyll build

$ cd _site

$ git add .

$ git commit -m "Fixes baseurl"

$ git push

Now browse to http://webdef.github.io/site-built-with-jekyll-grunt-and-sass/ and everything should be fine!