Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Git Hub Pages

1,589 views

Published on

These slides take you from zero to a generated website using Git, GitHub and GitHub Pages, introducing Markdown and Jekyll.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Git Hub Pages

  1. 1. GitHub Pages GitHub Git Christophe Van Ginneken
  2. 2. GitHub Pages GitHub Git Christophe Van Ginneken
  3. 3. https://git-scm.com
  4. 4. GitHub Pages GitHub Git Christophe Van Ginneken
  5. 5. https://github.com
  6. 6. GitHub Pages GitHub Git Christophe Van Ginneken
  7. 7. https://pages.github.com
  8. 8. https://pages.github.com
  9. 9. https://jekyllrb.com
  10. 10. GitHub Pages GitHub Git Christophe Van Ginneken
  11. 11. https://github.com/christophevg
  12. 12. http://christophe.vg
  13. 13. GitHub Pages GitHub Git Christophe Van Ginneken
  14. 14. WORK SHOP
  15. 15. WORK SHOP? DŽ ♥
  16. 16. Complexity 18:30 19:00 19:30 20:00 20:30 21:00 21:30 Git GitHub GitHub Pages HTML Markdown Jekyll Layouts Includes Data CV blog Filters
  17. 17. GitHub Pages GitHub Git Christophe Van Ginneken
  18. 18. • visit https://github.com • provide username, email, password • provide profile information (or not) • confirm email !
  19. 19. https://pages.github.com
  20. 20. christophevg.github.io website https://christophevg.github.io https://christophevg.github.io/website
  21. 21. • create a new repository username.github.io • create a new file
 index.html • visit https://username.github.io <html> <body> <h1>Christophe VG's website</h1> Welcome to my GitHub Pages website! </body> </html>
  22. 22. <HTML> ☹ ☹
  23. 23. https://guides.github.com/features/mastering-markdown
  24. 24. Semantics
  25. 25. Semantics Styling
  26. 26. • create a new file
 _config.yml • update index.html
 index.md • visit https://username.github.io --- --- # Christophe VG’s website Welcome to my GitHub Pages website! Using Markdown! markdown: kramdown don’t forget front matter
  27. 27. • create a new file
 _layouts/site.html • update index.md • visit https://username.github.io <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>My Website!</title> </head> <body> {{ content }} </body> </html> --- layout: site --- just try it !
  28. 28. <HTML> ☹ ☹
  29. 29. • “overwrite site” using “automatic page generator” • steal content from index.html • reuse it in _layouts/site.html • delete index.html • visit https://username.github.io under settings {{ content }}
  30. 30. https://github.com/mmistakes/minimal-mistakes
  31. 31. • add content to your website • extend index.md • create cv.md • upload a picture and add it to your site • start a blog • FIX stylesheet paths: add a leading “/“ • visit https://username.github.io experiment try things !
  32. 32. https://jekyllrb.com/docs/variables/
  33. 33. https://jekyllrb.com/docs/variables/
  34. 34. <ul> {% for post in site.posts %} <li> <a href=“{{ post.url }}”>{{ post.title }}</a> {{ post.excerpt }} </li> {% endfor %} </ul>
  35. 35. • create a new file
 _includes/posts.html
 
 • create a new file
 _layouts/post.html
 • change layout 
 move titles to front matter
 (create excerpt) • create a new file
 blog/index.md • visit https://username.github.io <ul> {% for post in site.posts %} <li> <a href=“{{ post.url }}”> {{ post.title }} </a> {{ post.excerpt }} </li> {% endfor %} </ul> --- layout: site --- # My Blog {% include posts.html %} --- layout: post title: First Post --- # First Post --- layout: site --- <h2>{{ page.date }} - {{ page.title }}</h2> {{ content }}
  36. 36. • update
 _includes/posts.html • update
 index.md • add a few more blog entries • improve date rendering
 in _layouts/post.html • add date to index
 _includes/posts.html • visit https://username.github.io {% for post in site.posts limit: include.posts %} {% include posts.html posts=“2” %} {{ page.date | date_to_long_string }} {{ post.date | date_to_string }} -
 <a href="{{ post.url }}">{{ post.title }}</a>
  37. 37. • create a new file
 _data/cv.yml • update
 cv.md • visit https://username.github.io - start: September 2015 end: August 2016 description: Embedded R&D Engineer company: University of Antwerp - start: July 2014 end: August 2015 description: Researcher company: University of Leuven {% for position in site.data.cv %} ## {{ position.description }} at {{ position.company }} {{ position.start }} - {{ position.end }} {% endfor %}
  38. 38. • Slides http://www.slideshare.net/christophevg/git-hub-pages • Git https://git-scm.com • GitHub https://github.com • GitHub Pages https://pages.github.com • Markdown https://guides.github.com/features/mastering-markdown • Jekyll https://jekyllrb.com (docs) • Jekyll Template https://github.com/mmistakes/minimal-mistakes contact@christophe.vg @Christophe_VG http://christophe.vg Have Fun & Good Luck !

×