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


  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
  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)
  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
  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
  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 A • Allow optional www prefix www sathomas.github.com CNAME
  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
  7. Redirect to External Sites • Create folder in main site

    e.g. /blog • Add index.html page to that folder <!DOCTYPE html> <html> <head><title>Visit the blog</title></head> <body> <p>Please visit the <a href="http://blog.sathomas.me">blog</a>.</p> <script>window.location.replace("http://blog.sathomas.me");</script> </body> </html>
  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