Github page not displaying properly, please help

Greetings,

I am trying to setup a github page using this jekyll theme https://github.com/melvinchng/business-jekyll-theme which itself is hosted on github.

I downloaded the zip file, created a local git repository, and made sure the web page can be developed locally. Upon first execution of:

bundle exec jekyll serve

on my local machine, I got the error message of:

Bundler could not find compatible versions for gem "ffi":
  In snapshot (Gemfile.lock):
    ffi (= 1.9.23)

  In Gemfile:
    jekyll (= 3.5.2) was resolved to 3.5.2, which depends on
      jekyll-watch (~> 1.1) was resolved to 1.5.1, which depends on
        listen (~> 3.0) was resolved to 3.1.5, which depends on
          rb-inotify (>= 0.9.7, ~> 0.9) was resolved to 0.9.10, which depends on
            ffi (< 2, >= 0.5.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

Thus I had to update it using bundle update. After that, the webpage can be generated and displayed correctly on my local machine.

I then synced my local repository to my github page at:

https://archetype-biomedical.github.io/Archetype-Biomedical/

but as you can see, the webpages are not being generated/displayed properly as compared to the original jekyll theme that is also hosted on the github.

Can anyone please shed some lights as what I am doing wrong? I have hosted personal github page using other jekyll theme and had worked well. I must admit that I have not used this particular theme previously until now.

any help is very much appreciated,

Hi @archetypebiomedical, welcome to the GitHub Support Community!

Taking a look in the console for your site it seems like like your assets are 404-ing due to incorrect URLs. From your source code, your assets are being loaded using using a relative link:

<link rel="stylesheet" href="../assets/css/style.css">

This link will resolve to the following URL:

https://archetype-biomedical.github.io/assets/css/style.css

This is happening because of the relative path traversal ../ at the start of these asset links, causing the browser to traverse up one directory level in your URL.

This CSS file is actually located at the following URL:

https://archetype-biomedical.github.io/Archetype-Biomedical/assets/css/style.css

Notice the extra Archetype-Biomedical section in there—the name of the repository! The browser reads this part of the URL as a directory, meaning the ../ will move “up one level,” out of this “directory,” and remove this section of your asset URLs.

The best way to fix this would be to update all your asset links to include this part. You could simply replace ../ with /Archetype-Biomedical/, but if you ever changed the name of your repository then these would break again.

The best thing to do would be to use Jekyll to automatically include the baseurl value—your repository name—in these links.

To do this you’ll need to update all your asset links to prepend the baseurl value. For example, using the CSS file above, you’ll need to change your link to this:

<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">

GitHub should set this baseurl value automatically but as it’s explicitly defined in your repository you may also need to set your baseurl value to the name of your repository inside your _config.yml file:

You can read about the relative_url filter, and other useful Jekyll filters, here: