Last Updated: February 25, 2016
·
1.665K
· anasnakawa

Using gists with github automatic page generators

github page generators are pretty cool, they allow you to load the project readme file, and layout its content into a set of nice pre-made templates

this is nice and makes my life easier if I am regularly updating my readme file , but what if I wanted to a add a specific piece of code to the project page (let's say a tweet button) ?

of course I can, but then I will loose the cool functionality of updating my readme file..

so how can we hack a project template & keeping the update process sleek ?

the answer is using gists, and here's how

1. put all your readme content in a gist file

2. go to the gh-pages branch of your project

3. hack the index.html by replacing the page content with the gist script

<script src="https://gist.github.com/4375063.js"></script>

4. add a piece of code to disable the embeded gist styles

$(function() {
    $('section link').prop('disabled', true);
});

and now you're done, each time you'll update the gist file, your project page is updated automatically, and you can inject any code you want into the gh-pages branch..

I used this technique in my recent tiny project jQuery.ajax.fake: