Search code examples
htmlstylesheetgithub-pages

How can I get HTML reports that I host on Github Pages to link to stylesheets in another directory?


I'm trying to create a set of project pages using Github Pages. My main page is a copy of my project's README, which I generated through Github's auto-page generator. Under Project Health Metrics, I link to two HTML reports: one is a CodeNarc report (at health/codenarc/main.html) and the other is a Jacoco report (at health/jacoco/index.html).

The CodeNarc report renders fine, but the Jacoco report doesn't as it's not able to load the stylesheet and other resources kept in another directory. I'm keeping everything on a gh-pages branch with a directory structure that looks like this:

.
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _site
├── bin
├── build
├── build.gradle
├── config
├── docs
├── gradle.properties
├── health
├── images
├── index.html
├── javascripts
├── params.json
├── src
└── stylesheets

My health directory tree appears like this:

health
├── codenarc
│   ├── integrationTest.html
│   ├── main.html
│   └── test.html
├── html
│   └── projectHealth.html
└── jacoco
    ├── .resources
    │   ├── branchfc.gif
    │   ├── branchnc.gif
    │   ├── branchpc.gif
    │   ├── bundle.gif
    │   ├── class.gif
    │   ├── down.gif
    │   ├── greenbar.gif
    │   ├── group.gif
    │   ├── method.gif
    │   ├── package.gif
    │   ├── prettify.css
    │   ├── prettify.js
    │   ├── redbar.gif
    │   ├── report.css
    │   ├── report.gif
    │   ├── session.gif
    │   ├── sort.gif
    │   ├── sort.js
    │   ├── source.gif
    │   └── up.gif
    ├── .sessions.html
    ├── com.github.tagc.semver
    │   ├── SemVerPlugin$_apply_closure1.html
    │   ├── SemVerPlugin.groovy.html
    │   ├── SemVerPlugin.html
    │   ├── SemVerPluginExtension.groovy.html
    │   ├── SemVerPluginExtension.html
    │   ├── Version$Builder.html
    │   ├── Version$Category.html
    │   ├── Version$Parser.html
    │   ├── Version.groovy.html
    │   ├── Version.html
    │   ├── index.html
    │   └── index.source.html
    └── index.html

If it helps, you can explore the tree and check out all the files from my Github repository.

I would like the Jacoco report to be able to access the resources in the .resources folder under health/jacoco, but it doesn't seem able to and I'm not quite sure why. I've tried playing around with this a lot on a private instance running on localhost through Jekyll.


Solution

  • Problem solved, thanks to help from some people in IRC and a lot of playing around.

    Jekyll ignores any folders that are hidden (e.g. prepended with a dot or underscore), so it wasn't processing health/jacoco/.resources.

    I got around this issue by including include: ['.resources'] in _config.yml. Don't forget to push this file to the remote gh-pages branch on Github, as Github uses this to determine what it processes as well.

    The Jacoco report now renders properly because it can access the stylesheets and other resources it depends on.