Custom Domains with Github Pages

Use Github to host your static web site

Transcript

1. stephen@sathomas.me
   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 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 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 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 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 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 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 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 Slide