static websites - the final frontier
DESCRIPTION
In this presentation I show how to use GitHub and Jekyll (static website generator) to create sites. Mainly based on case studies even though there is some theory at the beginning.TRANSCRIPT
Static WebsitesThe Final Frontier
Juho Vepsäläinen
● GH Pages● Case - koodilehto.fi● Case - jswiki.org● Case - geekcollision.org● Conclusions
Structure
GH Pages
● http://pages.github.com/● Mainly sites for geeks and projects● Provides a designer● Supports Jekyll● Possible to use good ol' HTML too● http://oli.jp/2011/github-pages-workflow/
GH Pages - Awesome Hosting
● https://github.com/mojombo/jekyll● Blog-aware, based on Ruby● Templating (http://liquidmarkup.org/)● Quite powerful though has limitations
Jekyll - Static Site Generator
● _includes/● _layouts/● _posts/● css/● images/● js/● CNAME● README.md● _config.yml● index.html● robots.txt
Basic Structure of a Project
Context (ie. site.name, page.title)
Template
---title: Jobslayout: post--- <p>Geek Collision gathers...</p><h2>Sponsored by {{ site.sponsor }}</h2>{% include job_ad.md %}
Context (ie. site.name, page.title)
Base Template
<!DOCTYPE HTML><html lang="en"> <head> <title>{{ site.name }} - {{ page.title }}</title> ... </head> <body> {{ content }} </body></html>
● Traditional website with some social features
● Theme based on Bootstrap● JavaScript (jQuery, RequireJS + custom)● https://github.com/bebraw/codegrove-site
koodilehto.fi - Overview
● It's actually feasible to use GH Pages as a hosting platform for something like this
● Dealing with nested navigation is hard (required JS hack)
● jsbin.com rocks for quick prototyping (study jsbin.com/utalev/<number> to see how it progressed)
koodilehto.fi - Lessons Learned
● Move to one page layout (more dynamic content?)
● Could use cron to get rid of some JS -> faster page load, nicer for mobile
● Figure out better ways to share JS (RequireJS constrains this)
koodilehto.fi - To Improve
● Largest JS related index at GitHub● Decided to write a nicer UI for it● Ended up developing ghw (converts GH
wiki to GH pages)● Used Skeleton for theming● jQuery+various plugins in use
jswiki.org - Overview
● Skeleton is cool and a lot lighter than Bootstrap
● Node works well for writing this type of tools
● Projects tend to escalate (ended up writing suite.js, generators.js, funkit etc. too)
jswiki.org - Lessons Learned
● More, better content (crawling?)● Search UI (just a filtering big-ass table)● You name it
jswiki.org - To Improve
● Decided to reskin the newly reskinned site just for kicks
● Gave Jekyll's blogging capabilities a go while at it
● Used Skeleton here as well● jQuery+RequireJS+custom hacks for JS
geekcollision.org - Overview
● I'm getting better at this stuff● Skeleton seems like a good fit for small
projects such as this● A decent background makes a world of a
difference
geekcollision.org - Lessons Learned
● Might want to style dates better (consistent style)
● You name it
geekcollision.org - To Improve
Conclusions
● GH Pages + Jekyll works well for simple sites
● Easy to relocate if needed● Fast and easy to develop● Less overhead vs. Django and co.
Conclusions
Jason Whittaker (BY-NC-SA) [1] [2] [3]x-ray delta one (BY-NC-SA) [1] [2]kreg.steppe (BY-SA) [1]
Credits