Back to templates

Template details

Jekyll Foundation 6 Starter

Start a GitHub Pages website powered by Jekyll using Foundation/SCSS in under 5 minutes!

About this template

Jekyll Foundation 6 Starter is a free boilerplate template for launching a GitHub Pages website powered by Jekyll and styled with the Foundation 6 front-end framework using SCSS, designed to get a site live in under five minutes.

What is Jekyll Foundation 6 Starter?

It is a starter repository created by Daigo Fuji that combines the Jekyll static site generator with Foundation 6 (via Bower) and SCSS source files compiled by Gulp. As input, it takes a standard Jekyll project structure with configurable HTML, Markdown, and SCSS files; as output, it produces a static, responsive website that can be deployed directly to GitHub Pages. The template runs on any machine with Ruby, Node.js, and Bundler installed, and it includes a working example site at daigofuji.github.io/jekyll-foundation-6-starter.

What makes it stand out?

  • Foundation 6 + SCSS pipeline — The template uses Bower to manage Foundation Sites and Gulp to compile scss/_settings.scss and related files into CSS, with a watch task that runs on npm start.
  • GitHub Pages deployment instructions — Clear, step-by-step guidance for both user/organization pages (rename repo to username.github.io and use the master branch) and project pages (use a gh-pages branch).
  • Editable via Jekyll conventions — Content lives in _config.yml, HTML and Markdown files, and the _layouts/default.html base layout; the navigation is managed in _include/nav.html.
  • Local development environment — After npm install and bundle install, you run npm start to handle SCSS and bundle exec jekyll serve --watch to serve the site at http://0.0.0.0:4000/.
  • Focused on speed of setup — The README promises a working website in under five minutes, making it suitable for hackathons and quick project pages.
  • Permissive licensing — The underlying components are mostly MIT-licensed, so commercial use is permitted; users are advised to follow each product's license restrictions.

Who should use it?

  • Hackathon participants — Want a responsive project page up in minutes without spending time on front-end setup.
  • Developers and open-source maintainers — Need a clean, mobile-friendly site for a repository, documentation, or a personal project page.
  • Jekyll beginners — Want a preconfigured Foundation-based theme to learn how Jekyll and SCSS fit together.

Use cases

  • Hackathon teams: Fork the repository, rename it to match a GitHub Pages URL, and push to get a live site with a responsive layout and navigation.
  • Project maintainers: Customize _config.yml and page content to create a polished landing page or documentation hub for a repo.
  • Prototyping: Use the local dev workflow to rapidly experiment with SCSS variables and Jekyll layouts before deploying.

How does it work?

The workflow splits into two commands: npm start runs the Gulp task that compiles SCSS to CSS and watches for changes, while bundle exec jekyll serve --watch runs the Jekyll site locally. For deployment, you either rename the repository for user/organization pages or create a gh-pages branch for project pages, then push the contents to GitHub.

FAQ

Is Jekyll Foundation 6 Starter free?

Yes, the template itself is shared free of charge, and the README notes that most of the included products are MIT-licensed, which allows commercial use.

What do I need to run it locally?

You need Ruby (with Bundler) and Node.js. The README includes commands to install them via Homebrew on macOS and troubleshooting for common bundle install issues.

Does it work for project pages?

Yes, the README provides explicit instructions: create a gh-pages branch, download the repo contents, replace the branch contents, and push to GitHub.

How do I customize the design?

You edit _config.yml for site settings, HTML/Markdown files for content, scss/_settings.scss to change Foundation's Sass variables, and _include/nav.html for the navigation bar.

What if I encounter Gulp or Bower errors?

The README suggests installing Gulp globally with npm install gulp -g and updating Foundation with bower update foundation-sites --save to resolve version issues.

screenshot of Jekyll Foundation 6 Starter on template0.com