Git Hub Pages

GitHub PagesGitHubGit

Christophe Van Ginneken



https://git-scm.com



https://github.com



https://pages.github.com


https://jekyllrb.com



https://github.com/christophevg

http://christophe.vg



WORKS H O P

WORKS H O P?

!♥

#$

%

Com

plex

ity

18:30 19:00 19:30 20:00 20:30 21:00 21:30

GitGitHubGitHub Pages

HTML Markdown

Jekyll

Layouts

Includes

Data

CVblog

Filters



• visit https://github.com

• provide username, email, password

• provide profile information (or not)

• confirm email !


christophevg.github.io

website

https://christophevg.github.io

https://christophevg.github.io/website

&

&

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

https://username.github.io

<HTML>☹

☹

https://guides.github.com/features/mastering-markdown

Semantics

Semantics Styling

• create a new file _config.yml

• update index.html index.md


--- --- # Christophe VG’s website Welcome to my GitHub Pages website! Using Markdown!

markdown: kramdown

don’t forget front matter


• create a new file _layouts/site.html

• update index.md


<!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 !


<HTML>☹

☹

• “overwrite site” using “automatic page generator”

• steal content from index.html

• reuse it in _layouts/site.html

• delete index.html


under settings

{{ content }}


https://github.com/mmistakes/minimal-mistakes

• 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 “/“


experiment

try things !


https://jekyllrb.com/docs/variables/

https://jekyllrb.com/docs/variables/

<ul>

{% for post in site.posts %}

<li>

<a href=“{{ post.url }}”>{{ post.title }}</a> {{ post.excerpt }}

</li>

{% endfor %}

</ul>

• 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 fileblog/index.md


<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 }}


• update_includes/posts.html

• updateindex.md

• add a few more blog entries

• improve date rendering in _layouts/post.html

• add date to index _includes/posts.html


{% 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>


• create a new file_data/cv.yml

• updatecv.md


- 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 %}


• 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

[email protected]

@Christophe_VG

http://christophe.vgHave Fun

&

Good Luck ! '

(

&

http://www.slideshare.net/christophevg/git-hub-pages

https://git-scm.com

https://github.com


https://jekyllrb.com

mailto:[email protected]

https://twitter.com/Christophe_VG

http://christophe.vg

Internet

Git Hub Pages