Start a github pages website powerd by Jekyll using Foundation/SCSS in under 5 minutes!
Ever wanted a simple but nice looking responsive website as your project page or page for your repo? Are you in a hackathon needing to put up a working website in munites? I do. Here is what I do, and I am sharing for you to use it, free. Free as in free speach AND free beer.
You can see the working example site here
See documentation
- Fork this repo to your user or project
- From the
settings
rename the repo tousername.github.io
naming scheme.
See documentation
- Create a
gh-pages
branch, i.e.git checkout -b gh-pages
- Download the contents of this repo
- Replace the entire branch contents with unzipped stuff
- Add, Commit then Publish the branch to github, i.e.
git push --set-upstream origin gh-pages
- edit
_config.yml
- edit html/md files (hint:
_layouts/default.html
is the base) - edit sass and run
grunt
(hint: Try editingscss/_stettings.scss
) - edit
_include/nav.html
Use at your own resk, and follw licence restriction of each products used. Most are MIT (OK to use commercially).
Run grunt to compile css from sass by simply run
grunt
from your terminal. It will launch watch. control-c
to stop.
You need to have grunt installed. This blog post may be useful if you are like me and running Mac OS X.
To run jekyll locally, run
bundle exec jekyll serve --watch
Your website should be viewable by going to localhost:4000
If you want to make sure foundation is up to date, try
foundation update
(requires bower)
Github's doc on how to use Jekyll on Github Pages.
Special thanks to HTML 5 Boilerplate whose code I have based this on.
@kionoshp's padding-margin. Because it has become part of every site that I manage.
and Font Awesome for bing awesome.