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

More Decks by Stephen Thomas

Other Decks in How-to & DIY


  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
  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