At work within the design team we are using GitHub Pages to demo our work. We have multiple repositories and almost all of them use Jekyll. We countered the problem that we have to update the same CSS and JS files across the different repositories which is a hassle. So we wanted a Content delivery network (CDN). This is a nice idea, but not good for development, as CDNs are meant for files that won’t change anymore or very rarely. To solve this problem I investigated if I could get the files from GitHub Pages.

Problem

We need some CSS and JS files from the application mockup repository in the website mockup repository, because we don’t want to update the same file in multiple repositories after every update.

Idea

Instead of using our own CDN use GitHub Pages as a CDN. As GitHub already builds our Jekyll code and converts our SCSS into CSS why not take advantage of this? So I checked the created page and you can actually access these files via GitHub Pages. Example: https://tenforce.github.io/tracker-mockup/sass/components/itembox.css

Solution

Making it work on GitHub Pages

So now I just have to integrate it into our repository. I created a new includable file called _includes/css-from-tracker-mockup.html with the following content:

1
2
3
4
5
6
7
8
9

{% assign cssLocation = "https://tenforce.github.io/tracker-mockup" %}

<link rel="stylesheet" href="{{ cssLocation }}/sass/tailwind-extend.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/itembox.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/multiSelector.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/field.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/note.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/selector.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/buttons.css">

I assigned a Liquid variable with the correct location and use that variable for all files. This fetches nicely our chosen files from the other repository’s GitHub page.

Now all you have to do is include it in your html file:

1

{% include css-from-tracker-mockup.html %}

Making it work for local development

So the previous version is fine until you want to change something in the content. Of course we want to avoid creating work in progress commits so I added an if case to check if we are serving on localhost or not.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{% assign cssLocation = "https://tenforce.github.io/tracker-mockup" %}

{% if site.url contains "localhost" %}
  {% assign cssLocation = "http://localhost:4000" %}
{% endif %}

<link rel="stylesheet" href="{{ cssLocation }}/sass/tailwind-extend.css">

<link rel="stylesheet" href="{{ cssLocation }}/sass/components/itembox.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/multiSelector.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/field.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/note.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/selector.css">
<link rel="stylesheet" href="{{ cssLocation }}/sass/components/buttons.css">

With this solution we have to make sure that:

  • we have both repositories cloned
  • we are serving both repositories with jekyll serve
  • and the repository that hosts the files is on port 4000

I also added a small config snippet in _config.yml to make sure our hosted applications’s ports don’t clash. The second application now defaults to port 4001 while the other one stays on the Jekyll default 4000.

1

port: 4001

And here it is a very easy solution that works for any files.