mediahack

GitHub as a CDN

Today I switch out my hosting provider as CDN for shared resources to using a Github’s Pages. Why? Well I’m a tinkerer, this was a fun project, but its also useful in IMO. 

Utilizing Github’s pages I am able to integrate both my VCS (Version Control Software) and web asset management. 

VCS Who? CDN Wat?

Just in case you’re not up to speed on these new-fangled-schmigity-smack-thingies, VCS and CDN I’ll give you the galactic view (much higher than the proverbial 50,000FT level)

VCS stands for Version Control Software. Its what we use to track changes in our systems with the ability to go back and forwards in its history if necessary. They are great. Some you may have heard of include:

• Concurrent Versioning System (CVS, old and eww)
• Subversion (SVN)
• Mercurial (Hg)
• Git

Step 1 - GitTFO

This isn’t a Git usage tutorial I am going to assume you have the following and have git working on your system. On Windows you’re going to have things like the SSH keys all configured as I am not going to cover that. 

• Install Git
• Get a GitHub account

Step 2 - Create a Repo

Create a repo for your CDN. If you’re new to GitHub then click your username in the top right menu to go to your profile page. From there you should see a button above your repositories list that says “New Repository”.  

Once here enter a Repo name. Its all relative to your account so I chose to create a repo called cdn. 

Also you can optionally enter a description. I entered: “Using Github as a CDN”

Leave the repos’ visibility to public as you’ll want anyone to be able to get to the resources.

Click “Create Repository”

Step 3 - Enable Pages

After you’ve created your repo we need to enable GitHub Pages. At this point your repo’s GitHub page might empty and have the standard boilerplate “Setup, Next Steps, […]” details.

This is OK. What we want to do is access the repos’ admin section. Click the “Admin” button up near the top right of the screen under the GitHub main toolbar; the one with the wrench and says Admin.

The page content has different sections blocked off: Settings, Features, GitHub Pages, DangerZone. We want to click the “Automatic Page Generator” button inside the GitHub Pages section.

Go to the bottom of the page and click the “Continue to Layouts” button. None of this matters as we’ll be wiping it out with our own assets and page(s).

Next we are at the layout selector. There is a section at to the top with themes, then a small toolbar for Hide, Edit and Publish. Click Publish.

Now we wait. GitHub says it can take about 10 minutes while your pages activate. I found this to be true. After its done we can add our content and overwrite the stuff they setup.

Step 4 - Local prep

If this is your first repository and your’e on a *nix or OS X machine you may want to follow the instructions they have for the global settings:

Code

git config --global user.name "mediahack"
git config --global user.email my@email.tld

Based on the recommendation of this Gist: https://gist.github.com/1086274 we’re going skip to most of the details in new repo page tells us to do. The author is using the name Alice for their project. You can replace it with your own project name. Here we go!

You can proceed with command-line or with a GUI.

Command Line

• On your machine create a dir for the repo: mkdir <YOUR_GH_USERNAME>.github.com
• cd <YOUR_GH_USERNAME>.github.com
• git init
• echo “<h1>Hello Alice</h1>” > index.html
• git add index.html
• git commit -m “initial commit”
• git remote add origin git@github.com:<YOUR_GH_USERNAME>/<USERNAME_AGAIN>.github.com.git
• git push -u origin gh-pages
• git branch -m master gh-pages <- renames the “master” branch to “gh-pages”

Get a GUI

Some people don’t like the command-line; I love it. I must admit I do use a GUI for my Git tool. There are tools like GitHub for Windows/Mac, Tower for Mac and SourceTree for Mac. I’m sure there are others.  Personally I am using SourceTree and I am very happy with it.

Step 5 - Add Content

Lets add files to our repo and can use them like a CDN! At this point our local files can be modified, committed and pushed with our tools and it will update our assets. Love it.

Step 6 - Trust but Verify

Check your GitHub Pages url to see if your files are being served up. The url format is: 

http://<GITHUB_USERNAME>.github.com/<REPO_NAME>

After that the assets are in the directories and folders based on where you added them to the repo.

First!

Not really. This is not new. I’ve just started doing it and I’m documenting for anyone else interested :D

Other references

• https://github.com/viewsource/viewsource.github.com
• http://code.lancepollard.com/github-as-a-cdn/