SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
Static Websites
The 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
●   Supports Jekyll
●   Possible to use good ol' HTML too
●   http://oli.jp/2011/github-pages-workflow/
Jekyll - Static Site Generator
●   https://github.com/mojombo/jekyll
●   Blog-aware, based on Ruby
●   Templating (http://liquidmarkup.org/)
●   Quite powerful though has limitations
Basic Structure of a Project
●   _includes/
●   _layouts/
●   _posts/
●   css/
●   images/
●   js/
●   CNAME
●   README.md
●   _config.yml
●   index.html
●   robots.txt
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 %}
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>
Case - koodilehto.fi
koodilehto.fi - Overview
● Traditional website with some social
  features
● Theme based on Bootstrap
● JavaScript (jQuery, RequireJS + custom)
● https://github.com/bebraw/codegrove-site
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)
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)
Case - jswiki.org
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
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)
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 Jekyll's blogging capabilities a go
  while at it
● Used Skeleton here as well
● jQuery+RequireJS+custom hacks for JS
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
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 overhead vs. Django and co.
Credits
Jason Whittaker (BY-NC-SA) [1] [2] [3]
x-ray delta one (BY-NC-SA) [1] [2]
kreg.steppe (BY-SA) [1]

Contenu connexe

Tendances

jQuery Conf 2012
jQuery Conf 2012jQuery Conf 2012
jQuery Conf 2012
Brett Holt
 
Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7
Ivan Zugec
 
Custom elements - An alternate Render API for decoupled Drupal
Custom elements - An alternate Render API for decoupled DrupalCustom elements - An alternate Render API for decoupled Drupal
Custom elements - An alternate Render API for decoupled Drupal
nuppla
 

Tendances (20)

Pre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifyPre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlify
 
jQuery Conf 2012
jQuery Conf 2012jQuery Conf 2012
jQuery Conf 2012
 
Efektivny vyvoj v drupale
Efektivny vyvoj v drupaleEfektivny vyvoj v drupale
Efektivny vyvoj v drupale
 
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2
 
Bootstrap Introduction
Bootstrap IntroductionBootstrap Introduction
Bootstrap Introduction
 
Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7Using Bootstrap in Drupal 7
Using Bootstrap in Drupal 7
 
Ext JS Meetup Presentation
Ext JS Meetup PresentationExt JS Meetup Presentation
Ext JS Meetup Presentation
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
 
Getting started with the Lupus Nuxt.js Drupal Stack
Getting started with the Lupus Nuxt.js Drupal StackGetting started with the Lupus Nuxt.js Drupal Stack
Getting started with the Lupus Nuxt.js Drupal Stack
 
Intro Couchdb
Intro CouchdbIntro Couchdb
Intro Couchdb
 
Databases which, why and usage tips
Databases which, why and usage tipsDatabases which, why and usage tips
Databases which, why and usage tips
 
Jekyll demo - Refresh Hilo
Jekyll demo - Refresh HiloJekyll demo - Refresh Hilo
Jekyll demo - Refresh Hilo
 
Angular js
Angular jsAngular js
Angular js
 
jekyll-tech-talk
jekyll-tech-talkjekyll-tech-talk
jekyll-tech-talk
 
Bootstrap 3.1.1
Bootstrap 3.1.1Bootstrap 3.1.1
Bootstrap 3.1.1
 
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl...
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl...Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl...
Using WordPress with Static Site Generators by Muhammad Muhsin and Jason Bahl...
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
 
Custom elements - An alternate Render API for decoupled Drupal
Custom elements - An alternate Render API for decoupled DrupalCustom elements - An alternate Render API for decoupled Drupal
Custom elements - An alternate Render API for decoupled Drupal
 
Eztable Design Library
Eztable Design LibraryEztable Design Library
Eztable Design Library
 
【Edd workshop@140808】eztable design library kc liu
【Edd workshop@140808】eztable design library kc liu【Edd workshop@140808】eztable design library kc liu
【Edd workshop@140808】eztable design library kc liu
 

Similaire à Static Websites - The Final Frontier

Switching to angular.js silk way
Switching to angular.js   silk waySwitching to angular.js   silk way
Switching to angular.js silk way
Pavlo Iuriichuk
 
About order form improvements
About order form improvementsAbout order form improvements
About order form improvements
Gengo
 
Introduction to Gengo's New Order Form tech
Introduction to Gengo's New Order Form techIntroduction to Gengo's New Order Form tech
Introduction to Gengo's New Order Form tech
Gengo
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbbas
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 

Similaire à Static Websites - The Final Frontier (20)

Performance (browser)
Performance (browser)Performance (browser)
Performance (browser)
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Pavlo Yuriychuk — Switching to Angular.js. Silk way
Pavlo Yuriychuk — Switching to Angular.js. Silk wayPavlo Yuriychuk — Switching to Angular.js. Silk way
Pavlo Yuriychuk — Switching to Angular.js. Silk way
 
Switching to angular.js silk way
Switching to angular.js   silk waySwitching to angular.js   silk way
Switching to angular.js silk way
 
Wade.Go Introduction Speech - SFD HCMC 2014
Wade.Go Introduction Speech - SFD HCMC 2014Wade.Go Introduction Speech - SFD HCMC 2014
Wade.Go Introduction Speech - SFD HCMC 2014
 
2016 stop writing javascript frameworks by Joe Gregorio
2016 stop writing javascript frameworks by Joe Gregorio2016 stop writing javascript frameworks by Joe Gregorio
2016 stop writing javascript frameworks by Joe Gregorio
 
Jekyll Presentation Slides
Jekyll Presentation SlidesJekyll Presentation Slides
Jekyll Presentation Slides
 
Static Site Generation with Hugo and Markdown
Static Site Generation with Hugo and MarkdownStatic Site Generation with Hugo and Markdown
Static Site Generation with Hugo and Markdown
 
Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)
 
Blogging for hackers (english)
Blogging for hackers (english)Blogging for hackers (english)
Blogging for hackers (english)
 
Developing a Web Application
Developing a Web ApplicationDeveloping a Web Application
Developing a Web Application
 
Gutenberg Extended
Gutenberg ExtendedGutenberg Extended
Gutenberg Extended
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
 
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
 
About order form improvements
About order form improvementsAbout order form improvements
About order form improvements
 
Introduction to Gengo's New Order Form tech
Introduction to Gengo's New Order Form techIntroduction to Gengo's New Order Form tech
Introduction to Gengo's New Order Form tech
 
Odoo Experience 2018 - The Odoo JS Framework
Odoo Experience 2018 - The Odoo JS FrameworkOdoo Experience 2018 - The Odoo JS Framework
Odoo Experience 2018 - The Odoo JS Framework
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 

Plus de Juho Vepsäläinen

Plus de Juho Vepsäläinen (12)

Web application development - The past, the present, the future
Web application development - The past, the present, the futureWeb application development - The past, the present, the future
Web application development - The past, the present, the future
 
ECMAScript - From an idea to a major standard
ECMAScript - From an idea to a major standardECMAScript - From an idea to a major standard
ECMAScript - From an idea to a major standard
 
Quick introduction to Qwik
Quick introduction to QwikQuick introduction to Qwik
Quick introduction to Qwik
 
fooConf - JavaScript frameworks of tomorrow
fooConf - JavaScript frameworks of tomorrowfooConf - JavaScript frameworks of tomorrow
fooConf - JavaScript frameworks of tomorrow
 
JavaScript frameworks of tomorrow
JavaScript frameworks of tomorrowJavaScript frameworks of tomorrow
JavaScript frameworks of tomorrow
 
The future is mostly static
The future is mostly staticThe future is mostly static
The future is mostly static
 
Web application development - The past, the present, the future
Web application development - The past, the present, the futureWeb application development - The past, the present, the future
Web application development - The past, the present, the future
 
The future is mostly static
The future is mostly staticThe future is mostly static
The future is mostly static
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and Tricks
 
Speccer
SpeccerSpeccer
Speccer
 
bongaus.fi - Spotting Service Powered by Django
bongaus.fi - Spotting Service Powered by Djangobongaus.fi - Spotting Service Powered by Django
bongaus.fi - Spotting Service Powered by Django
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Dernier (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

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
  • 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
  • 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]