Giter VIP home page Giter VIP logo

jekyll-foundation-6-starter's Introduction

jekyll-foundation-6-starter

Start a github pages website powered by Jekyll using Foundation/SCSS in under 5 minutes!

What it is.

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

For User & Organization Pages

See github documentation

  1. Fork or copy this repo to your user or project
  2. From the settings rename the repo to username.github.io naming scheme. (For this you need to use master branch)

For Project Pages

See github documentation

  1. Create a gh-pages branch, i.e. git checkout -b gh-pages
  2. Download the contents of this repo
  3. Replace the entire branch contents with unzipped stuff
  4. Add, Commit then Publish the branch to github, i.e. git push --set-upstream origin gh-pages

To run:

Run this once: npm install and bundle install

Make sure you don't get errors. (See below if you get errors.)

Then npm start 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/

To edit contents:

  1. edit _config.yml
  2. edit html/md files (_layouts/default.html is the base)
  3. edit sass and run gulp (Try editing scss/_stettings.scss)
  4. edit _include/nav.html

Use at your own risk, and follow license restriction of each products used. Most are MIT (OK to use commercially).


Trouble shooting and useful commands

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

jekyll-foundation-6-starter's People

Contributors

andrewl64 avatar daigofuji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

jekyll-foundation-6-starter's Issues

Cannot find module 'gulp-load-plugins'

screen shot 2017-07-26 at 11 16 46 pm

I am getting this error whenever I run npm start. I had been referencing another project for "Jekyll
with Foundation" but it was not working with Github Pages. So I deleted all the contents from local and remote.After that I copied the content of this repo to my [username].github.io repo and tried testing it locally and eventually got this error. Since I am new to Front end and Jekyll, I could not figure out what went wrong.

Any help would be appreciated.

Thanks.

Double vertical scrollbar in Chrome

In Chrome by default you end up with an extra vertical scrollbar. You can see this on the demo site:

image

I was able to address by setting this in my custom scss:

.off-canvas-wrapper { overflow-x: inherit; }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.