Think Static:
What to Use When a CMS is Too Much
Keegan Berry
Marketing & Communications - University of Central Florida
#UAD12
HighEdWeb 2016
Think Static:
What to Use When a CMS is Too Much
Keegan Berry
Marketing & Communications - University of Central Florida
#UAD12
HighEdWeb 2016
Hello
Keegan Berry.
Web Developer at the University of Central Florida in Orlando.
Wordpress, PHP, HTML/CSS/JS.
Hello
Keegan Berry.
Web Developer at the University of Central Florida in Orlando.
Wordpress, PHP, HTML/CSS/JS.
We’re Talking About...
TL;DR
Dynamic CMS systems like Wordpress can be too much�for some projects.
Static site generators like Jekyll can be a�simple solution.
Dynamic & Static Sites
Some background on why static sites are good.
Dynamic Sites
Wordpress is an example of a dynamic site.
Generate content on the fly, per request.
Database queries, templating, plugins, and external data are all pulled together.
Dynamic Sites
Wordpress is an example of a dynamic site.
Generate content on the fly, per request.
Database queries, templating, plugins, and external data are all pulled together.
Static Sites
Sites are a collection of HTML pages on the server.
The server retrieves the appropriate HTML page per request.
Dynamic vs Static
Dynamic sites create the finished product on the fly.
Dynamic vs Static
Dynamic sites create the finished product on the fly.
Static sites ARE the finished product.
Dynamic vs Static
| Dynamic | Static |
Accessibility | ✔ | ✔ |
Security | | ✔ |
Development Time | | ✔ |
Database Querying | ✔ | |
Hosting Cost | | ✔ |
Development Cost | | ✔ |
Static Site Generators
Static Site Generators
Build website from set of source files and assets.
Build work is done before site is uploaded.
Content is tracked in repo.
Templating & separation of content and presentation.
Dynamic CMS vs Static Site Generators
Work to build page is done per request.
Database must be accessed for content.
Templates separate content and presentation.
Up to CMS to track content.
Work to build page is done before site is uploaded to server.
HTML page is retrieved per request.
Templates separate content and presentation.
Content tracked in repository.
Static Site Generators
Middleman�middlemanapp.com
Jekyll�jekyllrb.com�
Hugo�gohugo.io���
Static Site Generators
Jekyll
Jekyll
Jekyll
Created in 2008 by Github co-founder Tom Preston-Warner.
Combines content markup language and template language.
Integrates with Github Pages.
Jekyll
It does what you tell it to do, no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.
-Tom Preston-Warner (Github co-founder)
“
Jekyll & Netflix
Netflix partnered with CloudCannon to rebuild Netflix Devices.
Originally a Drupal site; rebuilt in “a fraction of the time” using Jekyll.
The new site “loads quickly and reliably scales to the millions of Netflix visitors.”
Jekyll Setup
Requirements
Ruby & RubyGems
OS-X, Linux, or Unix (Windows development is possible)
NodeJS
Python
Jekyll Setup
Installing
$ gem install jekyll
$ gem install bundler�$ jekyll new degree-site�$ cd degree-site�$ bundle install
Jekyll Setup
_config.yaml
Comment out the line containing the “url” configuration.
22. baseurl: "" # the subpath of your site, e.g. /blog
23. url: "http://example.com" # the base hostname & protocol
24. twitter_username: jekyllrb
25. github_username: jekyll
Jekyll Setup
_config.yaml
Comment out the line containing the “url” configuration.
23. url: "http://example.com" # the base hostname & protocol
Jekyll Setup
_config.yaml
Comment out the line containing the “url” configuration.
23. #url: "http://example.com" # the base hostname & protocol
Jekyll Setup
Built-in development web server.
$ bundle exec jekyll serve�$ Server address: http://127.0.0.1:4000/
$ Server running... press ctrl-c to stop.
Jekyll Setup
Server rebuilds automatically on file saves.
$ Server address: http://127.0.0.1:4000/
$ Server running... press ctrl-c to stop.
$ Regenerating: 1 file(s) changed at 2016-09-28 15:57:20
...done in 0.204804 seconds.
Jekyll File Structure
.
├── _config.yml
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2016-10-29-jekyll-no-cms.md
| └── 2016-10-15-new-site-design.md
├── _drafts
| └── my-conf-notes.md
├── _site
├── welcome.md
├── about.md
└── index.md
Jekyll File Structure
.
├── _config.yml
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2016-10-29-jekyll-no-cms.md
| └── 2016-10-15-new-site-design.md
├── _drafts
| └── my-conf-notes.md
├── _site
├── welcome.md
├── about.md
└── index.md
OUTPUT GOES
HERE
Content in Jekyll
Content
Jekyll Content files are written in Markdown.
Easy-to-read, easy-to-write plain text format.
Jekyll processes markdown to HTML.
.md or .markdown extension.
Contains front matter.
Content Types
Posts
Pages
Collections
Content Types
Posts
Pages
Collections
Content Types
Posts
Pages
Collections
Posts
Organized chronologically, date required in filename.�Stored in _posts directory.��Files stored in the _drafts folder will not be published to the _site directory.
├── _posts
| ├── 2016-10-04-highedweb-conference.md
| ├── 2016-10-29-jekyll-no-cms.md
| └── 2016-10-15-new-site-design.md
├── _drafts
| └── highedweb-conference-notes.md
DRAFT FILES ARE NOT PROCESSED
Pages
Page files can be located anywhere.
HTML files are processed from source markdown files and placed in the same relative location.
├── home.md
├── courses
| ├── art2001.md
| └── cop3223.md
├── index.md
└── contact.html
├── home.html
├── courses
| ├── art2001.html
| └── cop3223.html
├── index.html
└── contact.html
_SITE OUTPUT
SRC
PROCESSED INTO
HTML
Everything Else
Files/folders that are not Jekyll-specific will be copied over without�being processed.
Files that do not contain front matter.
_SITE OUTPUT
SRC
├── home.md
├── courses
| ├── art2001.md
| └── cop3223.md
├── index.md
└── contact.html
├── home.html
├── courses
| ├── art2001.html
| └── cop3223.html
├── index.html
└── contact.html
COPIED WITHOUT
PROCESSING
Front Matter
2016-09-23-masters-in-social-work.md
Content documents must begin with what is called “front matter.”�The front matter contains metadata for the document.
Front Matter is written in YAML.
---
layout: post
title: Masters in Social Work
date: 2016-09-23 14:12:08 -0400
---
Front Matter
2016-09-23-masters-in-social-work.md
Content documents must begin with what is called “front matter.”�The front matter contains metadata for the document.
Front Matter is written in YAML.
---
layout: post
title: Masters in Social Work
date: 2016-09-23 14:12:08 -0400
---
---
layout: post
title: Masters in Social Work
date: 2016-09-23 14:12:08 -0400
---
Lorem Ipsum is simply dummy text of the printing and typesetting indust..
---
layout: post
title: Masters in Social Work
date: 2016-09-23 14:12:08 -0400
---
Lorem Ipsum is simply dummy text of the printing and typesetting indust..
Content
Front Matter
---
layout: post
title: Masters in Social Work
banner_image: “../img/banner-1.jpeg”
date: 2016-09-23 14:12:08 -0400
---
Lorem Ipsum is simply dummy text of the printing and typesetting indust..
PREDEFINED VARIABLES
CUSTOM VARIABLES
Content
Front Matter
---
layout: post
categories: [degree, catalog]
tags: [social work, masters]
title: Masters in Social Work
date: 2016-09-23 14:12:08 -0400
---
Lorem Ipsum is simply dummy text of the printing and typesetting indust..
TAGS
CATEGORIES
thttps://jekyllrb.com/docs/variables/
---
layout: post
title: Masters in Social Work
categories: [degree, catalog]
tags: [social work, masters]
permalink: /degrees/social-work
published: false
date: 2016-09-23 14:12:08 -0400
---
Lorem Ipsum is simply dummy text of the printing and typesetting indust..
TAGS
CATEGORIES
PERMALINK
PUBLISHED
Content
Front Matter
---
layout: post
categories: [degree, catalog]
title: Masters in Social Work
banner_image: /img/banner-1.jpg
form_id: 3
date: 2016-09-23 14:12:08 -0400
---
Lorem Ipsum is simply dummy text of the printing and typesetting indust..
CUSTOM VARIABLES
2016-09-23-masters-in-social-work.md
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
---
layout: post
title: Masters in Social Work
banner_image: /img/banner-1.jpg
date: 2016-09-23 14:12:08 -0400
---
Earn your {{ page.title }} graduate degree online from UCF’s School of Social Work and make a difference in your community. M.S.W. students become practitioners who promote optimal well-being, human rights, and social and economic justice.
MARKDOWN
Markdown
Content Markup Language
Markdown
Jekyll Content files are written in Markdown.
Easy-to-read, easy-to-write plain text format.
Jekyll processes markdown to HTML.
.md or .markdown extension.
Contains front matter.
daringfireball.net/projects/markdown
://jekyllrb.com/docs/variables/thttp://csswizardry.com/2014/07/a-new-focus-a-new-site/
## A new focus, a new site
[Almost a year ago, I decided I wanted to work for�myself.](http://csswizardry.com/2013/07/make-it-count/) Everything after that�all happened so quickly that I never even got round to redesigning this website.�I’m a very pragmatic, product-led, agile-working developer, so I decided to put�together [a micro-site](http://csswizardry.com/work/) to handle a more�business-oriented face onto the web: it would be far, _far_ quicker to build�something small and focused from scratch than it would have been—at the time—to�redesign the whole site. There are currently
[184 commits](https://github.com/csswizardry/work) against that one, single-page�website alone!
Markdown
Headers
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
CODE
Markdown
Headers
Heading 1�Heading 2
Heading 3
Heading 4
Heading 5
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
OUTPUT
CODE
Markdown
Emphasis
��
Italics
Strong
Strong italics�Combined emphasis
Strikethrough
_underscores_
**strong**�__underscores__�**asterisks and _underscores_**
~~tildes~~
Markdown
Emphasis
��
Italics
Strong
Strong italics�Combined emphasis
Strikethrough
_underscores_
**strong**�__underscores__�**asterisks and _underscores_**
~~tildes~~
Markdown
Ordered Lists
1. First ordered list item
2. Another item
* Unordered sub-list.
1. The number doesn’t matter.
4. And another item.
OUTPUT
CODE
Markdown
Ordered Lists
1. First ordered list item
2. Another item
* Unordered sub-list.
1. The number doesn’t matter.
4. And another item.
OUTPUT
CODE
Markdown
Unordered Lists
* One fish
* Two fish
* Red fish
* Blue fish
OUTPUT
CODE
Markdown
Unordered Lists
* eng1120�* cop3223�* dig4385�* fil2000�
OUTPUT
CODE
Markdown
Links
HTML OUTPUT
CODE
Markdown
Links
HTML OUTPUT
CODE
Markdown
Links
HTML OUTPUT
CODE
Markdown
Images
HTML OUTPUT
CODE
��
Markdown
Images
HTML OUTPUT
CODE
��
<img src="http://i.imgur.com/LQ70vT4.gif" alt="Animated gif" title="Coffee Time" />
Markdown
Images
HTML OUTPUT
CODE
��
<img src="http://i.imgur.com/LQ70vT4.gif" alt="Animated gif" title="Coffee Time" />
Liquid
Templating Language
Liquid
Templating Language
Integrates into HTML layout.
Liquid code can be categorized into one of the three:
{% include header.html %}
<div class="wrapper">
<div class="layout">
<h1>{{ page.title }}</h1>
{{ content }}
<section class="layout__item”>
{% include sub-content.html %}
</section>
</div>
</div>
{% include footer.html %}
Liquid
Objects��Resolves to text�{{ matched pairs of curly braces }}
{{ page.title }}
OUTPUT
CODE
Liquid
Objects��Resolves to text�{{ matched pairs of curly braces }}
{{ page.title }}
Master in Social Work
OUTPUT
CODE
Liquid
Tags�Used for creating logic and control flow�Does not resolve to text.�{% matched pairs of curly brackets and percent signs %}
{% if degree.hours %}
{{ degree.hours }} Credit Hours
{% endif %}
DATA
CODE
OUTPUT
degree.name: Master in Social...�degree.hours: 61
Liquid
Tags�Used for creating logic and control flow�Does not resolve to text.�{% matched pairs of curly brackets and percent signs %}
{% if degree.hours %}
{{ degree.hours }} Credit Hours
{% endif %}
61 Credit Hours
DATA
CODE
OUTPUT
degree.name: Master in Social...�degree.hours: 61
Liquid
Tags�
{% if degree.hours &&
degree.hours <= 60 %}
{{ degree.hours }} Credit Hours
{% elsif degree.hours > 60 %}
More than 60 Credit Hours
{% endif %}
DATA
CODE
OUTPUT
degree.name: Master in Social...�degree.hours: 61
Liquid
Tags
{% if degree.hours &&
degree.hours <= 60 %}
{{ degree.hours }} Credit Hours
{% elsif degree.hours > 60 %}
More than 60 Credit Hours
{% endif %}
More than 60 Credit Hours
DATA
CODE
OUTPUT
degree.name: Master in Social...�degree.hours: 61
Liquid
Tags
<ul>
{% for course in site.courses %}
<li>{{ course }}</li>
{% endfor %}
<ul>
OUTPUT
CODE
DATA
courses: [eng1120, cop3223, dig4385,
fil2000 ]
Liquid
Tags
<ul>
{% for course in site.courses %}
<li>{{ course }}</li>
{% endfor %}
<ul>
OUTPUT
CODE
DATA
courses: [eng1120, cop3223, dig4385,
fil2000 ]
<h2>Posts</h2>
<ul>
{% for posts in site.posts %}
<li><a href=”{{ post.permalink }}”>� {{ post.title }}</a></li>
{% endfor %}
<ul>
OUTPUT
CODE
FILE SYSTEM
├── _posts
| ├── 2016-10-04-highedweb-conference.md
| ├── 2016-10-29-jekyll-no-cms.md
| ├── 2016-10-18-recalling-milwaukee.md
| ├── 2016-10-17-static-sites-best.md
| └── 2016-10-15-new-site-design.md
<h2>Posts</h2>
<ul>
{% for posts in site.posts %}
<li><a href=”{{ post.permalink }}”>� {{ post.title }}</a></li>
{% endfor %}
<ul>
OUTPUT
CODE
FILE SYSTEM
├── _posts
| ├── 2016-10-04-highedweb-conference.md
| ├── 2016-10-29-jekyll-no-cms.md
| ├── 2016-10-18-recalling-milwaukee.md
| ├── 2016-10-17-static-sites-best.md
| └── 2016-10-15-new-site-design.md
Liquid
Filters��Change the output of an object.�{{ used within output with separator | filter }}
{{ page.title | upcase }}<br />
{{ page.title | replace: “C”, “K” }}<br />
{{ post.pub_at | date: "%Y" }}<br />
{{ post.pub_at | date: "%D" }}
OUTPUT
CODE
Liquid
Filters��Change the output of an object.�{{ used within output with separator | filter }}
THINK STATIC
THINK STATIK
2016
09/23/2016
OUTPUT
CODE
{{ page.title | upcase }}<br />
{{ page.title | replace: “C”, “K” }}<br />
{{ post.pub_at | date: "%Y" }}<br />
{{ post.pub_at | date: "%D" }}
TL;DR
Liquid allows you to add logic, control flow, and variables to your HTML templates.
Layouts
Jekyll templating makes it all possible.
Layouts
The template for a page is generally is the markup that repeats on every page.
Layouts in Jekyll utilize the Liquid templating language.
Contain front matter.
.html files located in _layouts directory
Layouts
.html files located in _layouts directory
├── _layouts
default.html
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{% include head.html %}
<body>
{% include header.html %}
<main class="page-content" aria-label="Content">
<div class="container">
{{ content }}
</div>
</main>
{% include callout-contact-help-coach.html %}
{% include footer.html %}
{% include foot.html %}
</body>
</html>
default.html
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{% include head.html %}
<body>
{% include header.html %}
<main class="page-content" aria-label="Content">
<div class="container">
{{ content }}
</div>
</main>
{% include callout-contact-help-coach.html %}
{% include footer.html %}
{% include foot.html %}
</body>
</html>
CONTENT OBJECT
page.html
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>
page.html
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>
NESTING LAYOUTS
{
Nested
Layouts
{
Nested
Layouts
Includes
Making templating even more modular.
Includes
Liquid Tag to include chunks/snippets of HTML code.��Will respect Liquid Objects, Tags, and Filters within includes.
Includes files are located in _includes.
{% include header.html %}
Includes
_includes/header.html
Liquid Tag to include chunks/snippets of HTML code.�Will render Liquid Objects, Tags, and Filters within includes
<header class="site-header" role="banner">
<h1 class=“logo”><a href=“/index.html”>UCF Online</a></h1>
<nav>
<ul>
<li><a href=“/index.html”>Home</a></li>
<li><a href=“/degrees”>Degrees</a></li>
<li><a href=“/about”>About</a></li>
</ul>
</nav>
</header>
Includes
Liquid Tag to include chunks/snippets of HTML code.�Will render Liquid Objects, Tags, and Filters within includes
<!DOCTYPE html>
<html>
<body>
{% include header.html %}
<div class="wrapper">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
Includes
Liquid Tag to include chunks/snippets of HTML code.�Will render Liquid Objects, Tags, and Filters within includes
<!DOCTYPE html>
<html>
<body>
{% include header.html %}
<div class="wrapper">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
HEADER INCLUDE
Includes
Liquid Tag to include chunks/snippets of HTML code.�Will render Liquid Objects, Tags, and Filters within includes
<!DOCTYPE html>
<html>
<body>
{% include header.html %}
<div class="wrapper">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
HEADER INCLUDE
FOOTER INCLUDE
FOOTER
HEADER
Collections
Much like Custom Post Types in Wordpress, and Custom Content Types in Drupal.
Posts that don’t have a time-based order.
Everything that’s not a post or a page can be represented as a collection.
Collections
_config.yml
Collections should be defined in the config file.�Various options exist...
29.
30. collections:
31. courses
32.
33.
Collections
_config.yml
Collections should be defined in the config file.�Various options exist... including specifying a permalink.
29.
30. collections:
31. courses:
32. output: true
33. permalink: /courses/:path/
Collections
Collection items are stored in a folder that is the same name of your collection, prepended with an underscore.
|
|
|
|
|
|
Collections
Collection items are stored in a folder that is the same name of your collection, prepended with an underscore.
In our example, we have the courses collection, so our items will be stored in _courses.
|
├── _courses
|
|
|
|
Collections
Collection items are stored in a folder that is the same name of your collection, prepended with an underscore.
In our example, we have the courses collection, so our items will be stored in _courses.
|
├── _courses
| ├── cop-3330-object-oriented-programming.md
| ├── chm-2045c-chemistry-fund-1.md
| └── fil-2030-history-of-motion-pictures.md�|
/_degrees/masters-of-social-work.md
---
layout: degree
title: "Master of Social Work"
credit_hours: 62
program_type: master
college: College of Health and Public Affairs
---
Earn your Master of Social Work (MSW) graduate degree online from UCF’s School of Social Work and make a difference in your community. MSW students become practitioners who promote optimal well-being, human rights, and social and economic justice. The MSW focuses on social change from a regional and global perspective with individuals, families, groups and communities in diverse practice settings.
/_degrees/masters-of-social-work.md
---
layout: degree
title: "Master of Social Work"
credit_hours: 62
program_type: master
college: College of Health and Public Affairs
---
Earn your Master of Social Work (MSW) graduate degree online from UCF’s School of Social Work and make a difference in your community. MSW students become practitioners who promote optimal well-being, human rights, and social and economic justice. The MSW focuses on social change from a regional and global perspective with individuals, families, groups and communities in diverse practice settings.
CUSTOM VARIABLES
/_degrees/masters-of-social-work.md
---
layout: degree
title: "Master of Social Work"
credit_hours: 62
program_type: master
college: College of Health and Public Affairs
---
Earn your Master of Social Work (MSW) graduate degree online from UCF’s School of Social Work and make a difference in your community. MSW students become practitioners who promote optimal well-being, human rights, and social and economic justice. The MSW focuses on social change from a regional and global perspective with individuals, families, groups and communities in diverse practice settings.
CUSTOM VARIABLES
LAYOUT
Content Types Review
Which one to use?
Post, Page, or Collection?
Post: �Organized chronologically, date required in filename.
Page: �Separate content not in any particular order.
Collection: �Related content, but not necessarily organized chronologically�(e.g., content that’s not a post or a page).
Hosting Options
You can just FTP the whole site.
Hosting Options
Among many hosting options:
Hosting Options
FTP → web server or Amazon S3
Need only transfer the _site folder.
Hosting Options
FTP → web server or Amazon S3
Need only transfer the _site folder.
├── _site
Hosting Options
FTP → web server or Amazon S3
Need only transfer the _site folder.
├── _site
Github Pages
Jekyll site repositories that utilize Github pages will deploy immediately upon pushing to master.
You don’t need to manually transfer the _site folder, Github will run Jekyll and deploy _site for you.
Online Editing Options
Prose.io - http://prose.io�JekyllCMS - https://github.com/mgax/jekyllcms�Cloudcannon - http://cloudcannon.com/�Siteleaf - https://www.siteleaf.com/��Each provide web interfaces to edit content.�
Prose.io
CloudCannon
Developers edit on�their local machines.�
CloudCannon
Marketers edit online using custom editable fields.�
To Summarize
Dynamic CMS systems like Wordpress can be too much�for some projects.
Static site generators like Jekyll can be a�simple solution.
Resources
Jekyll Documentation�https://jekyllrb.com/docs/
Jekyll Tips�http://jekyll.tips
Build a Jekyll Blog with Github Pages�https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages/
DevelopmentSeed Case Study on Healthcare.gov�https://developmentseed.org/blog/2013/10/24/its-called-jekyll
Jekyll Development on Windows�https://jekyllrb.com/docs/windows/
Thank You
Keegan Berry
Marketing & Communications - University of Central Florida
Slides available at:
http://tinyurl.com/thinkstatic2016
Footnote Links
Listing of Static Site Generators�https://www.staticgen.com/
CloudCannon Case Study�http://cloudcannon.com/case-studies/netflix/
Jekyll Installation Docs�https://jekyllrb.com/docs/installation/
Markdown Cheatsheet�https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Jekyll Variables Documentation�https://jekyllrb.com/docs/variables/
CSS Wizardry Page & Github Code
http://csswizardry.com/2014/07/a-new-focus-a-new-site/
https://github.com/csswizardry/csswizardry.github.com/blob/master/_posts/2014-07-07-a-new-focus-a-new-site.md
Liquid Documentation
http://shopify.github.io/liquid/basics/introduction/
Jekyll Layouts Documentation
https://jekyllrb.com/docs/templates/
Jekyll Collections
http://ben.balter.com/2015/02/20/jekyll-collections/
Github Pages
https://pages.github.com
Footnote Links
CSS Wizardry Page & Github Code�http://csswizardry.com/2014/07/a-new-focus-a-new-site/�https://github.com/csswizardry/csswizardry.github.com
Liquid Documentation�http://shopify.github.io/liquid/basics/introduction/
Jekyll Layouts Documentation�https://jekyllrb.com/docs/templates/
Jekyll Collections�http://ben.balter.com/2015/02/20/jekyll-collections/
Github Pages�https://pages.github.com