$30 off During Our Annual Pro Sale. View Details »

Publishing and Hosting on GitHub pages

Mu-An Chiou
December 04, 2015

Publishing and Hosting on GitHub pages

Mozfest 2015

Mu-An Chiou

December 04, 2015
Tweet

More Decks by Mu-An Chiou

Other Decks in Technology

Transcript

  1. MOZFEST2015 !
    GitHub Pages static sites and Jekyll blogs.
    "
    Publishing and Hosting on

    View Slide

  2. MOZFEST2015 !
    GitHub will host free static sites for
    every repository and every user or
    organisation account.
    This service is called GitHub Pages.
    Static Sites

    View Slide

  3. MOZFEST2015 !
    pages.github.com

    View Slide

  4. MOZFEST2015 !
    Any web files on a branch named:

    gh-pages
    Static Sites– Repository
    You’ll find it online at:

    your_username.github.io/repository_name

    View Slide

  5. MOZFEST2015 !
    Any web files on a branch named:

    master

    Static Sites– User/Org
    Name the repository this and you’ll find it online at:

    your_username.github.io

    View Slide

  6. MOZFEST2015 !
    Open source static sites can be forked and
    used by anyone else (according to license).
    You’ll need just one commit and GitHub will
    host it.
    https://jlord.github.io/forkngo
    Fork-ability

    View Slide

  7. MOZFEST2015 !
    Jekyll is a static site generator with lots of
    features for blogging.
    By default, GitHub runs Jekyll on its Pages
    hosting servers.
    Jekyll Blogs

    View Slide

  8. MOZFEST2015 !
    1. You have a directory of files
    How does Jekyll work
    - _layouts/
    - index.html
    - about.md

    View Slide

  9. MOZFEST2015 !
    2. Jekyll builds a site based on your files
    How does Jekyll work
    - _layouts/
    - index.html
    - about.md

    View Slide

  10. MOZFEST2015 !
    2-1. Does it have a front-formatter?
    How does Jekyll work
    - _layouts/
    - index.html
    - about.md
    ———
    title: How does…
    date: 2015-11-06
    ———
    Content…
    {

    View Slide

  11. MOZFEST2015 !
    How does Jekyll work
    - _layouts/
    - index.html
    - about.md
    How does…
    Content…
    2-1. Liquid-fy and convert Markdown to HTML

    View Slide

  12. MOZFEST2015 !
    How does Jekyll work
    - _layouts/
    - index.html
    - about.md
    ———
    title: How does…
    date: 2015-11-06
    ———
    Content…
    2-2. All files gets copied to _site/

    View Slide

  13. MOZFEST2015 !
    How does Jekyll work
    - _layouts/
    - _site/index.html
    - _site/about.html
    - index.html
    - about.md
    3. Tada!

    View Slide

  14. MOZFEST2015 !
    How does Jekyll work
    Find out more about the cool things Jekyll

    empowers you to do at:

    http://jekyllrb.com

    View Slide

  15. MOZFEST2015 !
    You can also fork and use Jekyll sites!
    Jekyll Blogs

    View Slide

  16. MOZFEST2015 !
    Fork a static site and customize.
    Start a blog and create a post.
    http://github.com/muan/mozfest-hi
    https://github.com/muan/scribble
    Let’s make!

    View Slide