Start a github pages website powered 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 minutes? I do. Here is what I do, and I am sharing for you to use it, free. Free as in free speech AND free beer.
You can see the working example site here
- Fork or copy this repo to your user or project
- From the
settings
rename the repo tousername.github.io
naming scheme. (For this you need to usemaster
branch)
- 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
Run this once:
npm install
and bundle install
Make sure you don't get errors. (See below if you get errors.)
Then
scss --watch scss/app.scss:css/app.css --load-path=node_modules/foundation-sites/scss
which will compile css from sass and watch scss file changes. (control-c
to quit)
Open another terminal window and run:
bundle exec jekyll serve --watch
This will compile the web site.
dev site will appear on http://0.0.0.0:4000/
- edit
_config.yml
- edit html/md files (
_layouts/default.html
is the base) - edit sass and run
gulp
(Try editingscss/_stettings.scss
) - edit
_include/nav.html
Use at your own risk, and follow license restriction of each products used. Most are MIT (OK to use commercially).
If you don't have node.js: Install node.js. Easiest way it to use Homebrew by
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
then
brew install node
Gulp or Bower problem? Try installing gulp globally by running
npm install gulp -g
** gulp issues **
Run gulp to compile css from sass by simply run gulp
or npm start
from your terminal within your repo.
It will launch watch by default. control-c
to stop.
If you only want the css compiled once:
run gulp sass
Jeckyll issues
To run jekyll locally to test your website while developing, run bundle install
then bundle exec jekyll serve --watch
(Requires ruby *) Your website should be viewable by going to localhost:4000
Github's doc on how to use Jekyll on Github Pages is also helpful.
Ruby bundle install issue:
You may have to run brew install ruby
and sudo gem install bundler
. Mac OS X 10.11 nokogiri trouble
Foundtion Update
You can update to the latest foundation by running bower update foundation-sites --save
. Ping me and I will update this repo. Any questions, make an issue or ask on twitter @DaigoFuji