static websites - the final frontier
Post on 10-May-2015
1.892 Views
Preview:
DESCRIPTION
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
top related