Use Github as a CDN to store and serve static content (JavaScript, CSS, Images) with rawgit

In this article I will be explaining how to use Github's "raw" feature coupled with rawgit to store and serve static content

Please note I assume you have some basic git knowledge

1.- Creating a Github account

Ok so first things first, in order to do this you need a Github account; so if you don't have one head up to the GitHub website and create one ; go ahead I'll wait :)

2.- Creating a Github repository

Login to your Git account and create a new repository :

Provide a name for your repo (for example static_files) :

3.- Build repository structure

We will now create a folder structure for our repository in order for us to organise the files, for example :

• css
• js
• img

So now go ahead and clone your git repository from either the command line or with your favorite tool

git clone https://github.com/xxxx/static_files.git

Once the repository is cloned; go ahead and create the 3 folders mentioned above

cd static_files
mkdir css
mkdir js
mkdir img

Ok so Git does not allow you to commit empty folders, so now in order to commit our folder structure we have to add at least 1 file to each one of the folders; at this point either :

• copy your existing files to their respective folder based on their type (images, javascript, etc.)
• create your content files in the respective folders (i.e. custom javascript, css etc.)
• create placeholder files in each of the folders (for example: touch js/.gitkeep ; touch css/.gitkeep; touch img/.gitkeep)

git add *
git commit -a -m "initial commit"
git push

4.- Obtain files URLs and serve them

Go back to your GitHub account and open the repository then navigate to a file you want to serve, then click on the "raw" button:

After clicking on the raw button you should be redirected to a "raw" page

Copy the url in the browser (it should start with raw.githubusercontent.com) and head up to http://rawgit.com paste the url in the main input

Below you get 2 CDN urls that you can use either for production or development

5.- Include the files in your website

Repeat step 4 with all the files you want to serve and include them in your website

Finally please also note that as stated in their website that rawgit : is a free service, so there are no uptime or support guarantees.

MyFaces Trinidad invalid_lhs_in_assignment using Partial Page Rendering (PPR)

I stumbled upon a weird error last week. I was having the following error in some of my pages after a PPR request :

["Error ", 
ReferenceError
arguments: Array[0]
get message: function getter() { [native code] }
get stack: function getter() { [native code] }
set message: function setter() { [native code] }
set stack: function setter() { [native code] }
type: "invalid_lhs_in_assignment"
__proto__: Error
, " delivering XML request status changed to ", function (requestEvent)
{
  if (requestEvent.getStatus() == TrXMLRequestEvent.STATUS_COMPLETE)
  {
    var statusCode = requestEvent.getResponseStatusCode();

    // The server might not return successfully, for example if an
    // exception is thrown.  When that happens, a non-200 (OK) status
    // code is returned as part of the HTTP prototcol.
    if (statusCode == 200)
    {
      _pprStopBlocking(window);

      if (requestEvent.isPprResponse())
      {
        var responseDocument = requestEvent.getResponseXML();

        // Though not yet supported, Nokia browser sometimes fails to get
        // XML content. (Currently being investigated.) When that happens,
        // the function should simply return without calling
        // _handlePprResponse rather than crushing the function with null
        // pointer reference.
        // This is a temporary workaround and should be revisited when
        // Nokia browser is officially supported.
        if (responseDocument != null)
        {
          this._handlePprResponse(responseDocument.documentElement);
        }
      }
      else
      {
        // Should log some warning that we got an invalid response
      }
    }
    else if (statusCode >= 400)
    {
      // The RequestQueue logs these for us, so
      // we don't need to take action here.  IMO, that's probably
      // wrong - we should do the handling here
      _pprStopBlocking(window);
    }

  }
}]

In some pages this caused everything to break (nothing was being updated), while in other pages my PPR requests where working properly, despite the error message. What I found out, from this very eloquent error message, is that when a component has a "-" in their ID like so :

So I removed the "-" in the ID

And everything went back to normal!.