I recently found a nice project which offers iframe line to display stars of any github repo. I found it could be useful on my another building website which aims to track the trending repos on github. So I tried to put it on and it worked well…at first. How when I put several repos on one page the tool stopped working and don’t show the star number.

I checked its source code https://github.com/mdo/github-buttons and found it is just a simple proxy to github api which certainly has a rate limit. Before I gave up and turned to other solutions like building a backend service to fetch the data and caching, then I remembered my old friend Cloudflare. Can I do something on the edge with the help of cloudflare workers?

The answer is yes. Cloudflare workers allow you to write javascript code to run on the edge. It is very handy to do some simple tasks like proxying, caching and even more.

How the worker+cache works

The official document explain quite well I put it here for reference:

export default {
  async fetch(request) {
    const url = new URL(request.url);
    // Only use the path for the cache key, removing query strings
    // and always store using HTTPS, for example, https://www.example.com/file-uri-here
    const someCustomKey = `https://${url.hostname}${url.pathname}`;
    let response = await fetch(request, {
      cf: {
        // Always cache this fetch regardless of content type
        // for a max of 5 seconds before revalidating the resource
        cacheTtl: 5,
        cacheEverything: true,
        //Enterprise only feature, see Cache API for other plans
        cacheKey: someCustomKey,
      },
    });
    // Reconstruct the Response object to make its headers mutable.
    response = new Response(response.body, response);
    // Set cache control headers to cache on browser for 25 minutes
    response.headers.set("Cache-Control", "max-age=1500");
    return response;
  },
};

Two things need to be noticed here:

  1. The worker would cache the response by the value you set on cf.cacheTtl. However if you want to assign the cacheKey and check the usage of each specific cache you need to upgrade to enterprise plan.
  2. The worker reconstructed the response with the cache control header. This is very handy to instruct on browser cache as the original response from github api doesn’t have this header.

It’s quite straightforward to serve your own github buttons cdn on cloudflare

  1. Build a worker with the code above only change the api with the github api you want to proxy. Mind that you may need to apply for a free access token to increase the rate limit.
  2. Deploy the worker and verify it works.
  3. Fork the https://github.com/mdo/github-buttons and change the github api url to your worker url.
  4. Deploy the forked project somewhere supports static hosting. Here I still stick to cloudflare and use their pages service.
  5. Get the pages url and replace the original url in the iframe line.

You might need to tweak the caching time to make the proxy API work properly under the rate limit. In my case I cached on the edge for 1 hour and on browser for two hours.