Static Websites - The Final Frontier
•
0 gefällt mir•965 views
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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Static Websites - The Final Frontier
Ähnlich wie Static Websites - The Final Frontier (20)
Mehr von Juho Vepsäläinen
Mehr von Juho Vepsäläinen (12)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Static Websites - The Final Frontier
- 1. Static Websites The Final Frontier Juho Vepsäläinen
- 2. Structure ● GH Pages ● Case - koodilehto.fi ● Case - jswiki.org ● Case - geekcollision.org ● Conclusions
- 3. GH Pages
- 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. Jekyll - Static Site Generator ● https://github.com/mojombo/jekyll ● Blog-aware, based on Ruby ● Templating (http://liquidmarkup.org/) ● Quite powerful though has limitations
- 6. Basic Structure of a Project ● _includes/ ● _layouts/ ● _posts/ ● css/ ● images/ ● js/ ● CNAME ● README.md ● _config.yml ● index.html ● robots.txt
- 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. 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>
- 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. koodilehto.fi - Lessons Learned ● 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)
- 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)
- 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. 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. jswiki.org - To Improve ● More, better content (crawling?) ● Search UI (just a filtering big-ass table) ● You name it
- 18. geekcollision.org - Overview ● 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
- 19. geekcollision.org - Lessons Learned ● 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
- 20. geekcollision.org - To Improve ● Might want to style dates better (consistent style) ● You name it
- 21. Conclusions
- 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. Credits Jason Whittaker (BY-NC-SA) [1] [2] [3] x-ray delta one (BY-NC-SA) [1] [2] kreg.steppe (BY-SA) [1]