Static WebsitesThe Final Frontier  Juho Vepsäläinen
Structure●   GH Pages●   Case - koodilehto.fi●   Case - jswiki.org●   Case - geekcollision.org●   Conclusions
GH Pages
GH Pages - Awesome Hosting●   http://pages.github.com/●   Mainly sites for geeks and projects●   Provides a designer●   Su...
Jekyll - Static Site Generator●   https://github.com/mojombo/jekyll●   Blog-aware, based on Ruby●   Templating (http://liq...
Basic Structure of a Project●   _includes/●   _layouts/●   _posts/●   css/●   images/●   js/●   CNAME●   README.md●   _con...
Context (ie. site.name, page.title)         Template         ---         title: Jobs         layout: post         ---     ...
Context (ie. site.name, page.title)         Base Template         <!DOCTYPE HTML>         <html lang="en">           <head...
Case - koodilehto.fi
koodilehto.fi - Overview● Traditional website with some social  features● Theme based on Bootstrap● JavaScript (jQuery, Re...
koodilehto.fi - Lessons Learned● Its actually feasible to use GH Pages as a  hosting platform for something like this● Dea...
koodilehto.fi - To Improve● Move to one page layout (more dynamic  content?)● Could use cron to get rid of some JS ->  fas...
Case - jswiki.org
jswiki.org - Overview● Largest JS related index at GitHub● Decided to write a nicer UI for it● Ended up developing ghw (co...
jswiki.org - Lessons Learned● Skeleton is cool and a lot lighter than  Bootstrap● Node works well for writing this type of...
jswiki.org - To Improve● More, better content (crawling?)● Search UI (just a filtering big-ass table)● You name it
Case - geekcollision.org
geekcollision.org - Overview● Decided to reskin the newly reskinned site  just for kicks● Gave Jekylls blogging capabiliti...
geekcollision.org - Lessons Learned● Im getting better at this stuff● Skeleton seems like a good fit for small  projects s...
geekcollision.org - To Improve● Might want to style dates better  (consistent style)● You name it
Conclusions
Conclusions● GH Pages + Jekyll works well for simple  sites● Easy to relocate if needed● Fast and easy to develop● Less ov...
CreditsJason Whittaker (BY-NC-SA) [1] [2] [3]x-ray delta one (BY-NC-SA) [1] [2]kreg.steppe (BY-SA) [1]
Upcoming SlideShare
Loading in …5
×

Static Websites - The Final Frontier

2,306 views

Published on

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.

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Static web design service is the best option to makes the information or the content more attractive, creative and much simpler for the user. By using this service you can easily boost your business. To know more visit:- http://seoservicessz.blogspot.in/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,306
On SlideShare
0
From Embeds
0
Number of Embeds
1,017
Actions
Shares
0
Downloads
8
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Static Websites - The Final Frontier

  1. 1. Static WebsitesThe Final Frontier Juho Vepsäläinen
  2. 2. Structure● GH Pages● Case - koodilehto.fi● Case - jswiki.org● Case - geekcollision.org● Conclusions
  3. 3. GH Pages
  4. 4. GH Pages - Awesome Hosting● 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/
  5. 5. Jekyll - Static Site Generator● https://github.com/mojombo/jekyll● Blog-aware, based on Ruby● Templating (http://liquidmarkup.org/)● Quite powerful though has limitations
  6. 6. Basic Structure of a Project● _includes/● _layouts/● _posts/● css/● images/● js/● CNAME● README.md● _config.yml● index.html● robots.txt
  7. 7. Context (ie. site.name, page.title) Template --- title: Jobs layout: post --- <p>Geek Collision gathers...</p> <h2>Sponsored by {{ site.sponsor }}</h2> {% include job_ad.md %}
  8. 8. 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>
  9. 9. Case - koodilehto.fi
  10. 10. koodilehto.fi - Overview● Traditional website with some social features● Theme based on Bootstrap● JavaScript (jQuery, RequireJS + custom)● https://github.com/bebraw/codegrove-site
  11. 11. koodilehto.fi - Lessons Learned● Its 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)
  12. 12. koodilehto.fi - To Improve● 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)
  13. 13. Case - jswiki.org
  14. 14. jswiki.org - Overview● 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
  15. 15. jswiki.org - Lessons Learned● 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)
  16. 16. jswiki.org - To Improve● More, better content (crawling?)● Search UI (just a filtering big-ass table)● You name it
  17. 17. Case - geekcollision.org
  18. 18. geekcollision.org - Overview● Decided to reskin the newly reskinned site just for kicks● Gave Jekylls blogging capabilities a go while at it● Used Skeleton here as well● jQuery+RequireJS+custom hacks for JS
  19. 19. geekcollision.org - Lessons Learned● Im 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
  20. 20. geekcollision.org - To Improve● Might want to style dates better (consistent style)● You name it
  21. 21. Conclusions
  22. 22. 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.
  23. 23. CreditsJason Whittaker (BY-NC-SA) [1] [2] [3]x-ray delta one (BY-NC-SA) [1] [2]kreg.steppe (BY-SA) [1]

×