Publishing and Hosting on GitHub pages

Mozfest 2015

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