Jekyll Foundation Netlify
Quickstart your Jekyll (v3) project with Zurb Foundation for Sites (v6, sass) and Netlify CMS.
Getting Started
- Agree to Xcode terms with:
sudo xcodebuild -license - Install Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" - Install Ruby and Ruby Gems with:
brew install ruby - Install Jekyll with:
gem install jekyll - Install Bundler with:
gem install bundler - Install Node.js
- Install Yarn with:
npm install --global yarn
You only need to do these instructions once per machine.
Installation
$ # Clone this repository
$ git clone https://github.com/kennedyrose/jekyll-foundation-netlify your-project-name
$ # Then navigate to the project directory
$ cd your-project-name
$ # Install all Ruby dependencies for the project
$ bundle install
$ # Install all Node dependencies for the project
$ yarn
$ # Create a new Github repository and point your local copy there
$ git remote set-url origin [email protected]:your-project-repo
You only need to do this once after cloning the repository.
Development
Start development on your local machine with: yarn dev.
You can stop the development task by pressing ctrl+c in the terminal.
Useful File Locations
HTML
_layouts/index.html: The template used for the home page._layouts/page.html: The template used for all pages._layouts/post.html: The template used for all blog posts._includes/head.html: This content will be placed at the top of every page. Includes the<head />content_includes/footer.html: This content will be placed at the bottom of every page.
You can also create additional layouts for other page types you create in the _layouts directory.
Page Content
All page content is written in Markdown. The markdown is converted to HTML and can still be styled like you normally do with CSS.
Pages are located in the _pages/ directory.
There are variables at the top of each .md file that will direct the system on which layout to use (from _layouts/), what the title of the page is and what the URL of the page should be.
The top of a markdown file might look something like this:
---
permalink: /about-us/
layout: page
title: About Our Company
---
Blog Posts
Note: You can skip this section if you're planning on using the Netlify CMS.
Blog pages are pretty much identical to standard pages.
They are located in the _posts/ directory.
The only difference is that blog posts have the date prepending the file name. So a blog file name might look something like:
2016-03-22-first-post.md
Dates are formatted as year-month-day.
Sass
The main Sass file is located in assets/scss/app.scss. The other directories in assets/scss/ optionally show you how you can keep your Sass files seperated for more managable code.
If you do create a new Sass file, make sure to import it in the app.scss file or it will not get transpiled into CSS and therefore not exist on the site.
Images
Images should go in the assets/img/ directory. The URL will stay the same, so you can place images in your templates with:
<img src="/assets/img/your-image.jpg" />
Images are not compressed or resized in any way. So make sure to do your optimizations during development.
Foundation Settings
By default, most of the Foundation settings are turned off to reduce the size of the JS and CSS files that are output. To turn on the features you need, uncomment lines of Sass located in:
assets/scss/foundation/_foundation.scss
If the feature you are trying to enable requires JavaScript as well, you can uncomment the feature in:
gulp/config.yml
Deployment
Deployment through Netlify is fairly simple. Signup/login at their website and just follow the instructions. You will basically just tell Netlify where your website repository is and it will do the rest of the work. Use the following settings when asked:
- Build command:
gulp build --production - Publish directory:
_site/
Editing Content with Netlify CMS
Netlify CMS offers a better way for non tech-savvy clients to edit their website's content.
To enable Netlify CMS, follow the instructions on Authenticating with Github.
Once that's done, you can go to yoursite.com/admin and just login through Github to edit content. You will set up each client with their own Github account and perform the authentication step to make sure they have access.