Save 37% off PRO during our Black Friday Sale! »

Custom Domains with Github Pages

Custom Domains with Github Pages

Use Github to host your static web site


Stephen Thomas

September 01, 2012


  1. 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 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 • hosted on Github • Version control on

    all assets • Invisible to visitors • Selected projects as URLs ➞ cv project • Other projects as normal • External redirects ➞
  4. Set Up the Main Site • Create repository named

    • Add content (HTML, CSS, Javascript) to master branch • is now live
  5. Map a Custom Domain • Create file “CNAME” in root

    folder of the master branch. File has single line: • Map domain name to Github in registrar A • Allow optional www prefix www CNAME
  6. Create Project Sites • For projects that will have a

    web page (e.g. 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="">blog</a>.</p> <script>window.location.replace("");</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