Custom Domains with Github Pages

[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

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)

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

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

Map a Custom Domain • Create ﬁle “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 preﬁx www sathomas.github.com CNAME

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

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>

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

Custom Domains with Github Pages

Custom Domains with Github Pages

Stephen Thomas

More Decks by Stephen Thomas

Other Decks in How-to & DIY

Featured

Transcript

[email protected] icon-comment icon-comment-alt icon-comments icon-comments-alt icon-credit-card icon-dashboard icon-download icon-download-alt icon-edit

Web Hosting with Github? • It’s Free • It’s Easy

Goals • http://sathomas.me hosted on Github • Version control on

Set Up the Main Site • Create repository named sathomas.github.com

Map a Custom Domain • Create ﬁle “CNAME” in root

Create Project Sites • For projects that will have a

Redirect to External Sites • Create folder in main site

Create a Custom 404 Page • Otherwise 404 errors will