Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Custom Domains with Github Pages

Custom Domains with Github Pages

Use Github to host your static web site

Stephen Thomas

September 01, 2012
Tweet

More Decks by Stephen Thomas

Other Decks in How-to & DIY

Transcript

  1. [email protected]
    icon-comment
    icon-comment-alt
    icon-comments
    icon-comments-alt
    icon-credit-card
    icon-dashboard
    icon-download
    icon-download-alt
    icon-edit
    icon-envelope
    icon-envelope-alt
    icon-key
    icon-leaf
    icon-legal
    icon-lemon
    icon-lock
    icon-unlock
    icon-magic
    icon-magnet
    icon-map-marker
    icon-minus
    icon-minus-sign
    icon-resize-horiz
    icon-resize-verti
    icon-retweet
    icon-road
    icon-rss
    icon-screenshot
    icon-search
    icon-share
    icon-share-alt
    icon-shopping-c
    http://speakerdeck.com/u/sathomas
    icon-paper-clip icon-indent-right icon-tab
    Directional Icons
    icon-arrow-down
    icon-arrow-left
    icon-arrow-right
    icon-arrow-up
    icon-chevron-down
    icon-circle-arrow-down
    icon-circle-arrow-left
    icon-circle-arrow-right
    icon-circle-arrow-up
    icon-chevron-left
    icon-car
    icon-car
    icon-car
    icon-car
    icon-ch
    Video Player Icons
    icon-play-circle
    icon-play
    icon-step-backward
    icon-fast-backward
    icon-fas
    icon-ste
    Custom Domains with
    Github Pages
    Stephen Thomas

    View full-size slide

  2. Web Hosting with
    Github?
    • It’s Free
    • It’s Easy
    • Built In Version Control (Duh!)
    • Edit Any Place Any Time (as long as you
    can fork)

    View full-size slide

  3. Goals
    • http://sathomas.me hosted on Github
    • Version control on all assets
    • Invisible to visitors
    • Selected projects as URLs
    http://sathomas.me/cv ➞ cv project
    • Other projects as normal
    http://sathomas.github.com/responsiveTabs
    • External redirects
    http://sathomas.me/blog ➞ scriptogr.am

    View full-size slide

  4. Set Up the Main Site
    • Create repository named
    sathomas.github.com
    • Add content (HTML, CSS, Javascript) to
    master branch
    • http://sathomas.github.com is now live

    View full-size slide

  5. Map a Custom Domain
    • Create file “CNAME” in root folder of the
    master branch. File has single line:
    sathomas.me
    • Map domain name to Github in registrar
    sathomas.me 204.232.175.78 A
    • Allow optional www prefix
    www sathomas.github.com CNAME

    View full-size slide

  6. Create Project Sites
    • For projects that will have a web page
    (e.g. cv ➞ http://sathomas.me/cv) follow
    steps in Github documentation to create
    gh-pages branch

    View full-size slide

  7. Redirect to
    External Sites
    • Create folder in main site e.g. /blog
    • Add index.html page to that folder


    Visit the blog

    Please visit the blog.
    window.location.replace("http://blog.sathomas.me");


    View full-size slide

  8. Create a Custom
    404 Page
    • Otherwise 404 errors will redirect to
    standard Github 404 page
    • Name the page 404.html and drop it in
    the root directory of the main site

    View full-size slide