SlideShare a Scribd company logo
1 of 21
Download to read offline
jekyll
Blogging for Hackers


Curtis Miller / Flatterline
Static Site Generator
Ruby + Liquid + YAML
    = Awesome!
How Does It Work?
• Gathers content from _posts, _includes
  and other files
• Applies a template
• Converts Markdown and Textile to HTML
• Runs Liquid converters
• Outputs static HTML pages
Configurable
   _config.yml
YAML Configuration

• Global configuration options
• Per page / post configuration options
  (YAML Front Matter)
• Add your own key / value pairs and use
  them as you see fit
What’s Built In?

• Pagination
• Custom permalink structure
• Related post extraction
                        (use with GSL for faster generation)


• Syntax highlighting
• Markdown / Textile conversion
Plugin Architecture
     (easily extensible)


         _plugins/*.rb
Need a Custom Generator?
No Problem.
module Jekyll
 class CategoryGenerator < Generator
   def generate(site)
    ...
   end
 end
end
Need a Custom Liquid Tag?
No Problem.
module Jekyll
 class RenderTimeTag < Liquid::Tag
   def render(context)
    ...
   end
 end
end

Liquid::Template.register_tag(
  ‘render_time’,
  Jekyll::RenderTimeTag
)
Deployment

• Heroku free instance
• GitHub Pages
• Directly to Amazon S3
• Anywhere that can serve static pages!
What If I Want Blog
     Comments?
Extend with Disqus, Intense Debate or
        Facebook comments
What If I Need
Something Dynamic?
   Extend with Sinatra
Typical Workflow
$ cd <my blog dir>
$ foreman start

[Runs whatever you specified - e.g., Jekyll, Compass, Sinatra, etc.]

$ mate _posts/2011-12-20-jekyll-blogging-presentation-at-rubyaz.md

[Add content to file...]

$ git add _posts/2011-12-20-jekyll-blogging-presentation-at-rubyaz.md
$ git commit -m “New post about Ruby AZ presentation”
$ git push && git push heroku
Any Gotchas?

• YAML Front Matter means it’s a special file;
  No YAML, no special processing
• Pagination only works with HTML files (i.e.,
  no Markdown or Textile pagination)

• No generator for initial directory structure
A Few Stats
                 (as of 2011-12-20)




• Over 400 documented sites using Jekyll
• ~50 plugins
• >4,500 watchers
• >700 forks
How Do I Get Started?!
gem install jekyll
Thanks!
           Any questions?
Curtis Miller / Flatterline / curtis@flatterline.com

       https://github.com/flatterline/flatterline.com

More Related Content

What's hot

Capybara-Webkit
Capybara-WebkitCapybara-Webkit
Capybara-Webkit
bostonrb
 
Javascript Myths and its Evolution
Javascript Myths and its  EvolutionJavascript Myths and its  Evolution
Javascript Myths and its Evolution
Deepu S Nath
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 

What's hot (20)

Frameworks and webcomponents
Frameworks and webcomponentsFrameworks and webcomponents
Frameworks and webcomponents
 
Wordpress as a Backend
Wordpress as a BackendWordpress as a Backend
Wordpress as a Backend
 
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friendWebcomponents are your frameworks best friend
Webcomponents are your frameworks best friend
 
JSON REST API for WordPress
JSON REST API for WordPressJSON REST API for WordPress
JSON REST API for WordPress
 
Isomorphic WordPress Applications with NodeifyWP
Isomorphic WordPress Applications with NodeifyWPIsomorphic WordPress Applications with NodeifyWP
Isomorphic WordPress Applications with NodeifyWP
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
 
Capybara-Webkit
Capybara-WebkitCapybara-Webkit
Capybara-Webkit
 
Using WordPress as a Backend for Your React Project
Using WordPress as a Backend for Your React ProjectUsing WordPress as a Backend for Your React Project
Using WordPress as a Backend for Your React Project
 
The Onion
The OnionThe Onion
The Onion
 
Moving from PHP to a nodejs full stack CMS
Moving from PHP to a nodejs full stack CMSMoving from PHP to a nodejs full stack CMS
Moving from PHP to a nodejs full stack CMS
 
Javascript Myths and its Evolution
Javascript Myths and its  EvolutionJavascript Myths and its  Evolution
Javascript Myths and its Evolution
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Best Practices for WordPress in Enterprise
Best Practices for WordPress in EnterpriseBest Practices for WordPress in Enterprise
Best Practices for WordPress in Enterprise
 
PLAT-8 Spring Web Scripts and Spring Surf
PLAT-8 Spring Web Scripts and Spring SurfPLAT-8 Spring Web Scripts and Spring Surf
PLAT-8 Spring Web Scripts and Spring Surf
 
Neos CMS and SEO
Neos CMS and SEONeos CMS and SEO
Neos CMS and SEO
 
A Day of REST
A Day of RESTA Day of REST
A Day of REST
 
Modern javascript
Modern javascriptModern javascript
Modern javascript
 
Evolution of java script libraries
Evolution of java script librariesEvolution of java script libraries
Evolution of java script libraries
 
Broccoli.js presentation
Broccoli.js presentationBroccoli.js presentation
Broccoli.js presentation
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 

Similar to Jekyll Presentation Slides

Static Sites in Ruby
Static Sites in RubyStatic Sites in Ruby
Static Sites in Ruby
bryanbibat
 
SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...
SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...
SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...
BIWUG
 

Similar to Jekyll Presentation Slides (20)

Blogging With Jekyll | Blogging Like a Hacker
Blogging With Jekyll | Blogging Like a HackerBlogging With Jekyll | Blogging Like a Hacker
Blogging With Jekyll | Blogging Like a Hacker
 
Static Websites - The Final Frontier
Static Websites - The Final FrontierStatic Websites - The Final Frontier
Static Websites - The Final Frontier
 
Performance (browser)
Performance (browser)Performance (browser)
Performance (browser)
 
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
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITPros
 
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
 
Static Sites in Ruby
Static Sites in RubyStatic Sites in Ruby
Static Sites in Ruby
 
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
PyconIE 2016 - Kajiki, the fast and validated template engine your were looki...
 
SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...
SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...
SharePoint Saturday Belgium 2014 - Using JSLink and Display Templates with th...
 
Blogging for hackers (english)
Blogging for hackers (english)Blogging for hackers (english)
Blogging for hackers (english)
 
Spsbe using js-linkanddisplaytemplates
Spsbe   using js-linkanddisplaytemplatesSpsbe   using js-linkanddisplaytemplates
Spsbe using js-linkanddisplaytemplates
 
Web components, so close!
Web components, so close!Web components, so close!
Web components, so close!
 
Fronted From Scratch - Supercharge Magento page speed
Fronted From Scratch - Supercharge Magento page speedFronted From Scratch - Supercharge Magento page speed
Fronted From Scratch - Supercharge Magento page speed
 
Working with Git
Working with GitWorking with Git
Working with Git
 
Metaprogramming with javascript
Metaprogramming with javascriptMetaprogramming with javascript
Metaprogramming with javascript
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Famo.us introduction
Famo.us introductionFamo.us introduction
Famo.us introduction
 
Using js link and display templates
Using js link and display templatesUsing js link and display templates
Using js link and display templates
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Recently uploaded (20)

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
 
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
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

Jekyll Presentation Slides

  • 1. jekyll Blogging for Hackers Curtis Miller / Flatterline
  • 3. Ruby + Liquid + YAML = Awesome!
  • 4. How Does It Work? • Gathers content from _posts, _includes and other files • Applies a template • Converts Markdown and Textile to HTML • Runs Liquid converters • Outputs static HTML pages
  • 5. Configurable _config.yml
  • 6. YAML Configuration • Global configuration options • Per page / post configuration options (YAML Front Matter) • Add your own key / value pairs and use them as you see fit
  • 7. What’s Built In? • Pagination • Custom permalink structure • Related post extraction (use with GSL for faster generation) • Syntax highlighting • Markdown / Textile conversion
  • 8. Plugin Architecture (easily extensible) _plugins/*.rb
  • 9. Need a Custom Generator?
  • 10. No Problem. module Jekyll class CategoryGenerator < Generator def generate(site) ... end end end
  • 11. Need a Custom Liquid Tag?
  • 12. No Problem. module Jekyll class RenderTimeTag < Liquid::Tag def render(context) ... end end end Liquid::Template.register_tag( ‘render_time’, Jekyll::RenderTimeTag )
  • 13. Deployment • Heroku free instance • GitHub Pages • Directly to Amazon S3 • Anywhere that can serve static pages!
  • 14. What If I Want Blog Comments? Extend with Disqus, Intense Debate or Facebook comments
  • 15. What If I Need Something Dynamic? Extend with Sinatra
  • 16. Typical Workflow $ cd <my blog dir> $ foreman start [Runs whatever you specified - e.g., Jekyll, Compass, Sinatra, etc.] $ mate _posts/2011-12-20-jekyll-blogging-presentation-at-rubyaz.md [Add content to file...] $ git add _posts/2011-12-20-jekyll-blogging-presentation-at-rubyaz.md $ git commit -m “New post about Ruby AZ presentation” $ git push && git push heroku
  • 17. Any Gotchas? • YAML Front Matter means it’s a special file; No YAML, no special processing • Pagination only works with HTML files (i.e., no Markdown or Textile pagination) • No generator for initial directory structure
  • 18. A Few Stats (as of 2011-12-20) • Over 400 documented sites using Jekyll • ~50 plugins • >4,500 watchers • >700 forks
  • 19. How Do I Get Started?!
  • 21. Thanks! Any questions? Curtis Miller / Flatterline / curtis@flatterline.com https://github.com/flatterline/flatterline.com