SlideShare a Scribd company logo
Blogging for Hackers
An introduction to Jekyll
“Simple, blog-aware, static site generator”
Simple: Everything is just plain text files
Blog-aware: Fits blog use-case ideally, but
other purposes can still work
Static sites: no backend, no cms
What is Jekyll
Why Jekyll
Simplicity
Free hosting with github pages
Markdown files are awesome and flexible
Blog offline without distraction
Own everything
Blog in vim (or emacs or sublime or whatever)
● It’s easy to read
● Fast to write
● Translates directly to what you’re going
● Great for taking notes and then translating
those notes to blog posts
● grep...vim (or emacs)...
Side Note: Markdown is awesome
Getting Started - Fast!
gem install jekyll
jekyll new blog
cd blog
jekyll serve
done
demo:
https://gist.github.com/5601a105a7ea645663dc
Getting Started...making it prettier!
Customize the default
(demo of some basics):
https://gist.github.com/7a33b25e6cd705d64289
Or use a theme.
Themes!
Which themes to use
● The default is actually really nice now!
● check out jekyllthemes.org for a catalog of free themes
● The Hyde theme is great for projects
Two options
● fork a theme: usually have their own instructions
o The one I use is particularly well-documented
o mmistakes.github.io/minimal-mistakes/theme-setup/
● Github hosting premade themes
https://pages.github.com/
Github Hosting
Free for one user and as many projects as you want
For user
● repo named username.github.io
● just push to master and you’re done
For Projects
● Same repo as the project
● gh-pages branch...push (to gh-pages) and you’re done
A little bit of vim...
Demo of my (evolving) jekyll workflow:
https://gist.github.com/63e64ecd406ad777ecfb
My dotfiles are on github:
www.github.com/smcabrera/castillo-cabrera
Resources
• Great intro here: http://www.smashingmagazine.com/2014/08/01/build-blog-
jekyll-github-pages
• github pages--very easy guide to getting started with free github hosting. You
can also set up a blog or project site--with themes!--without touching the
command line: https://pages.github.com/
• Jekyll bootstrap: http://jekyllbootstrap.com/usage/blog-configuration.html
• ruhoh project: http://ruhoh.com/docs/2/
• The original blog post describing the inception of the project:
http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html
• Jekyll Now: Build a jekyll blog in minutes without touching the command line
https://github.com/barryclark/jekyll-now
Resources (contd)...
• Google analytics with jekyll:
https://developmentseed.org/blog/google-analytics-jekyll-
plugin/
• This vim plugin is awesome and is especially nice for
jekyll. It understands jekyll markdown formatting and has
great support for code blocks. Find it here:
https://github.com/gabrielelana/vim-markdown
• Multilingual this post discusses how:
https://developmentseed.org/blog/multilingual-jekyll-sites/

More Related Content

What's hot

Building the Front End with AngularJS
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJS
John Ennew
 
Puppeteer: Getting Started
Puppeteer: Getting StartedPuppeteer: Getting Started
Puppeteer: Getting Started
HyunSeob Lee
 
I Promise You
I Promise YouI Promise You
I Promise You
William Bruno Moraes
 
Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
Islam AlZatary
 
Git sourcecontrolpreso
Git sourcecontrolpresoGit sourcecontrolpreso
Git sourcecontrolpreso
ColdFusionConference
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
Quentin Leonetti
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
Stephan Seidt
 
Headless BDD & Responsive Test Automation
Headless BDD & Responsive Test AutomationHeadless BDD & Responsive Test Automation
Headless BDD & Responsive Test Automation
Shashikant Jagtap
 
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontendAndrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
OdessaJS Conf
 
node-webkit : Make a magic from your a desktop app to desktop app!
node-webkit : Make a magic from your a desktop app to desktop app!node-webkit : Make a magic from your a desktop app to desktop app!
node-webkit : Make a magic from your a desktop app to desktop app!
욱진 양
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
benko
 
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Google Developer Group Sri Lanka
 
Node.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deploymentNode.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deployment
Caesar Chi
 
MVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkMVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js framework
Caesar Chi
 
Biscuit, the cryptotoken you can share safely with your ap is
Biscuit, the cryptotoken you can share safely with your ap isBiscuit, the cryptotoken you can share safely with your ap is
Biscuit, the cryptotoken you can share safely with your ap is
Quentin Adam
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Vlad Filippov
 
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup
Shashikant Jagtap
 
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Murat Yener
 
Front-End Tooling
Front-End ToolingFront-End Tooling
Front-End Tooling
Houssem Yahiaoui
 
Webpack dist
Webpack distWebpack dist
Webpack dist
Gabriel Sepulveda
 

What's hot (20)

Building the Front End with AngularJS
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJS
 
Puppeteer: Getting Started
Puppeteer: Getting StartedPuppeteer: Getting Started
Puppeteer: Getting Started
 
I Promise You
I Promise YouI Promise You
I Promise You
 
Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
 
Git sourcecontrolpreso
Git sourcecontrolpresoGit sourcecontrolpreso
Git sourcecontrolpreso
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
Headless BDD & Responsive Test Automation
Headless BDD & Responsive Test AutomationHeadless BDD & Responsive Test Automation
Headless BDD & Responsive Test Automation
 
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontendAndrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
 
node-webkit : Make a magic from your a desktop app to desktop app!
node-webkit : Make a magic from your a desktop app to desktop app!node-webkit : Make a magic from your a desktop app to desktop app!
node-webkit : Make a magic from your a desktop app to desktop app!
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
 
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
Yeoman + Grunt + Bower - Google I/O Rewind Sri Lanka
 
Node.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deploymentNode.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deployment
 
MVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkMVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js framework
 
Biscuit, the cryptotoken you can share safely with your ap is
Biscuit, the cryptotoken you can share safely with your ap isBiscuit, the cryptotoken you can share safely with your ap is
Biscuit, the cryptotoken you can share safely with your ap is
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
 
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup
 
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
 
Front-End Tooling
Front-End ToolingFront-End Tooling
Front-End Tooling
 
Webpack dist
Webpack distWebpack dist
Webpack dist
 

Similar to Blogging for hackers (english)

Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)
Mario García
 
Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Untangling fall2017 week2_try2
Untangling fall2017 week2_try2
Derek Jacoby
 
Untangling fall2017 week2
Untangling fall2017 week2Untangling fall2017 week2
Untangling fall2017 week2
Derek Jacoby
 
Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015
Alja Isakovic
 
Introduction to rails
Introduction to railsIntroduction to rails
Introduction to rails
Go Asgard
 
Introduction to git & WordPress
Introduction to git & WordPressIntroduction to git & WordPress
Introduction to git & WordPress
Josh Lee
 
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
Women in Technology Poland
 
Intro. to Git and Github
Intro. to Git and GithubIntro. to Git and Github
Intro. to Git and Github
Olmo F. Maldonado
 
Python Static Site Generator in Pelican
Python Static Site Generator in  PelicanPython Static Site Generator in  Pelican
Python Static Site Generator in Pelican
Gaurav Sehrawat
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
Michael Enslow
 
Jekyll, static websites generator
Jekyll, static websites generatorJekyll, static websites generator
Jekyll, static websites generator
Francesco Napoletano
 
Static Websites - The Final Frontier
Static Websites - The Final FrontierStatic Websites - The Final Frontier
Static Websites - The Final Frontier
Juho Vepsäläinen
 
Meetup gitbook
Meetup gitbookMeetup gitbook
Meetup gitbook
Rebecca Peltz
 
Fork me!
Fork me!Fork me!
Fork me!
James Ford
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
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
Lakshman Basnet
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
Josh Williams
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
Ny Fanilo Andrianjafy, B.Eng.
 
Fewd week1 slides
Fewd week1 slidesFewd week1 slides
Fewd week1 slides
William Myers
 
Introduction to Octopress at DRUG
Introduction to Octopress at DRUGIntroduction to Octopress at DRUG
Introduction to Octopress at DRUG
Wojciech Langiewicz
 

Similar to Blogging for hackers (english) (20)

Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)
 
Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Untangling fall2017 week2_try2
Untangling fall2017 week2_try2
 
Untangling fall2017 week2
Untangling fall2017 week2Untangling fall2017 week2
Untangling fall2017 week2
 
Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015
 
Introduction to rails
Introduction to railsIntroduction to rails
Introduction to rails
 
Introduction to git & WordPress
Introduction to git & WordPressIntroduction to git & WordPress
Introduction to git & WordPress
 
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
 
Intro. to Git and Github
Intro. to Git and GithubIntro. to Git and Github
Intro. to Git and Github
 
Python Static Site Generator in Pelican
Python Static Site Generator in  PelicanPython Static Site Generator in  Pelican
Python Static Site Generator in Pelican
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Jekyll, static websites generator
Jekyll, static websites generatorJekyll, static websites generator
Jekyll, static websites generator
 
Static Websites - The Final Frontier
Static Websites - The Final FrontierStatic Websites - The Final Frontier
Static Websites - The Final Frontier
 
Meetup gitbook
Meetup gitbookMeetup gitbook
Meetup gitbook
 
Fork me!
Fork me!Fork me!
Fork me!
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
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
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
 
Fewd week1 slides
Fewd week1 slidesFewd week1 slides
Fewd week1 slides
 
Introduction to Octopress at DRUG
Introduction to Octopress at DRUGIntroduction to Octopress at DRUG
Introduction to Octopress at DRUG
 

Blogging for hackers (english)

  • 1. Blogging for Hackers An introduction to Jekyll
  • 2. “Simple, blog-aware, static site generator” Simple: Everything is just plain text files Blog-aware: Fits blog use-case ideally, but other purposes can still work Static sites: no backend, no cms What is Jekyll
  • 3. Why Jekyll Simplicity Free hosting with github pages Markdown files are awesome and flexible Blog offline without distraction Own everything Blog in vim (or emacs or sublime or whatever)
  • 4. ● It’s easy to read ● Fast to write ● Translates directly to what you’re going ● Great for taking notes and then translating those notes to blog posts ● grep...vim (or emacs)... Side Note: Markdown is awesome
  • 5. Getting Started - Fast! gem install jekyll jekyll new blog cd blog jekyll serve done demo: https://gist.github.com/5601a105a7ea645663dc
  • 6. Getting Started...making it prettier! Customize the default (demo of some basics): https://gist.github.com/7a33b25e6cd705d64289 Or use a theme.
  • 7. Themes! Which themes to use ● The default is actually really nice now! ● check out jekyllthemes.org for a catalog of free themes ● The Hyde theme is great for projects Two options ● fork a theme: usually have their own instructions o The one I use is particularly well-documented o mmistakes.github.io/minimal-mistakes/theme-setup/ ● Github hosting premade themes https://pages.github.com/
  • 8. Github Hosting Free for one user and as many projects as you want For user ● repo named username.github.io ● just push to master and you’re done For Projects ● Same repo as the project ● gh-pages branch...push (to gh-pages) and you’re done
  • 9. A little bit of vim... Demo of my (evolving) jekyll workflow: https://gist.github.com/63e64ecd406ad777ecfb My dotfiles are on github: www.github.com/smcabrera/castillo-cabrera
  • 10. Resources • Great intro here: http://www.smashingmagazine.com/2014/08/01/build-blog- jekyll-github-pages • github pages--very easy guide to getting started with free github hosting. You can also set up a blog or project site--with themes!--without touching the command line: https://pages.github.com/ • Jekyll bootstrap: http://jekyllbootstrap.com/usage/blog-configuration.html • ruhoh project: http://ruhoh.com/docs/2/ • The original blog post describing the inception of the project: http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html • Jekyll Now: Build a jekyll blog in minutes without touching the command line https://github.com/barryclark/jekyll-now
  • 11. Resources (contd)... • Google analytics with jekyll: https://developmentseed.org/blog/google-analytics-jekyll- plugin/ • This vim plugin is awesome and is especially nice for jekyll. It understands jekyll markdown formatting and has great support for code blocks. Find it here: https://github.com/gabrielelana/vim-markdown • Multilingual this post discusses how: https://developmentseed.org/blog/multilingual-jekyll-sites/

Editor's Notes

  1. Usually have their own instrucUsually have their own instructions. The one I use is particularly well-documented: mmistakes.github.io/minimal-mistakes/theme-setup/ tions. The one I use is particularly well-documented: mmistakes.github.io/minimal-mistakes/theme-setup/ Usually have their own instructions. The one I use is particularly well-documented: mmistakes.github.io/minimal-mistakes/theme-setup/ Usually have their own instructions. The one I use is particularly well-documented: mmistakes.github.io/minimal-mistakes/theme-setup/ Usually have their own instructions. The one I use is particularly well-documented: mmistakes.github.io/minimal-mistakes/theme-setup/ Usually have their own instructions. The one I use is particularly well-documented: mmistakes.github.io/minimal-mistakes/theme-setup/