0

There is a problem with my Jekyll website after deploying it to GitHub Pages. I suspect that the CSS styling is not being loaded properly. The website appears to be properly styled when accessing the main page at philipmutua.me. However, when navigating to other pages such as http://philipmutua.me/categories/ or any other page, the CSS styling does not seem to be applied. Below is my config file:

_config.yml

# Dependencies
markdown:         kramdown
highlighter:      pygments

# Permalinks
permalink:        pretty


# Setup
title:             Philip Mutua
tagline:          'Full Stack Web Development.'
description:      'Full stack Developer'
url:              https://philipmutua.me
baseurl:          /

author:
  name:           'Philip Mutua'
  url:            https://twitter.com/itsphilipmutua

paginate:         5

paginate_path:    "page:num"

# Custom vars
version:          1.0.0

github:
  repo:           https://github.com/pmutua


email: example@email.com
linkedin: linkedin.com/in/pmutua
disqus: pmutua


plugins: [
  jekyll-paginate,
  jekyll-gist,
  jekyll-paginate,
  jekyll-seo-tag
  ]

head.html

<head>
  <link href="http://gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <!-- Enable responsiveness on mobile devices-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

  <title>
    {% if page.title == "Home" %}
      {{ site.title }} &middot; {{ site.tagline }}
    {% else %}
      {{ page.title }} &middot; {{ site.title }}
    {% endif %}
  </title>

  <!-- CSS -->
  <link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
  <link rel="stylesheet" href="{{ site.baseurl }}public/css/syntax.css">
  <link rel="stylesheet" href="{{ site.baseurl }}public/css/hyde.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

  <!-- Icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}public/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="{{ site.baseurl }}public/favicon.ico">

  <!-- RSS -->
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
</head>

<div class="container" style="padding-left:30px;line-height: 2;" >
  <div id="archives">
      browse by <a title="The complete archive of {{ site.name }}'s Blog by category"
                      href="{{ site.url}}{{ site.baseurl }}/categories">category</a>
  </div>
</div>

gh-pages /public/css

enter image description here

Build

2023-01-30T17:16:59.644485Z Cloning repository...
2023-01-30T17:17:01.558067Z From https://github.com/pmutua/pmutua.github.io
2023-01-30T17:17:01.55868Z   * branch            9366bb50d1e33d9e14fd2f876eb1624f29b240ae -> FETCH_HEAD
2023-01-30T17:17:01.55886Z  
2023-01-30T17:17:01.635576Z HEAD is now at 9366bb5 Update head.html
2023-01-30T17:17:01.636179Z 
2023-01-30T17:17:01.782688Z 
2023-01-30T17:17:01.810462Z Success: Finished cloning repository files
2023-01-30T17:17:02.72333Z  Installing dependencies
2023-01-30T17:17:02.734422Z Python version set to 2.7
2023-01-30T17:17:05.986625Z v12.18.0 is already installed.
2023-01-30T17:17:07.15815Z  Now using node v12.18.0 (npm v6.14.4)
2023-01-30T17:17:07.368069Z Started restoring cached build plugins
2023-01-30T17:17:07.382809Z Finished restoring cached build plugins
2023-01-30T17:17:07.868701Z Attempting ruby version 2.7.1, read from environment
2023-01-30T17:17:11.307066Z Using ruby version 2.7.1
2023-01-30T17:17:11.66631Z  Using PHP version 5.6
2023-01-30T17:17:11.667382Z Started restoring cached ruby gems
2023-01-30T17:17:11.682448Z Finished restoring cached ruby gems
2023-01-30T17:17:11.683421Z Installing gem bundle
2023-01-30T17:17:11.969321Z [DEPRECATED] The `--path` flag is deprecated because it relies on being remembered across bundler invocations, which bundler will no longer do in future versions. Instead please use `bundle config set path '/opt/buildhome/cache/bundle'`, and stop using this flag
2023-01-30T17:17:12.119793Z [DEPRECATED] The --binstubs option will be removed in favor of `bundle binstubs`
2023-01-30T17:17:14.392024Z Fetching gem metadata from https://rubygems.org/............
2023-01-30T17:17:14.517051Z Fetching gem metadata from https://rubygems.org/.
2023-01-30T17:17:14.631572Z Resolving dependencies...
2023-01-30T17:17:14.69117Z  sass-embedded-1.57.1-x86_64-linux-gnu requires rubygems version >= 3.3.22, which
2023-01-30T17:17:14.691487Z is incompatible with the current version, 3.1.2
2023-01-30T17:17:14.764924Z Error during gem install
2023-01-30T17:17:14.769003Z Failed: build command exited with code: 1
2023-01-30T17:17:16.001606Z Failed: an internal error occurred
Philip Mutua
  • 6,016
  • 12
  • 41
  • 84
  • 1
    Pages other than the landing page are indeed trying to fetch the CSS from non-existing locations, but it's impossible to tell where this goes wrong. What does the template that includes the CSS look like? Are you sure you're actually using Jekyll to build the page? The source doesn't include a generator comment. – Benjamin W. Jan 30 '23 at 16:11
  • @BenjaminW. I have updated the question. I deployed the site to cloud flare at https://philipmutua.pages.dev/ and the css happens to be found by the other pages. yet gh pages doesn't. The issue could be that I am not using jekyll to build the page. – Philip Mutua Jan 30 '23 at 16:41
  • I'm a bit confused, you're not using Jekyll, and you don't deploy to GitHub Pages? Just venturing a guess here, it looks like your CSS link is missing a leading `/` before `public`. Beyond that, it's impossible to tell what's going on, I'm afraid. – Benjamin W. Jan 30 '23 at 16:59
  • @BenjaminW. I'm using jekyll sorry for the misunderstanding. After deployment to cloudflare I have noticed another problem with dependencies l'll have to resolve this. – Philip Mutua Jan 30 '23 at 17:26
  • if you make the repo public, I can take a look. – Benjamin W. Jan 30 '23 at 17:32
  • Alright let me make it public – Philip Mutua Jan 30 '23 at 17:40
  • @BenjaminW. I've made the repo public https://github.com/pmutua/pmutua.github.io/ – Philip Mutua Jan 30 '23 at 17:44
  • yes, it seems so. I believe the fix was when I added the `/ `before the `public` and I fixed the the deprecation issue as shown from the logs. Then I ran the build again after making the updates. – Philip Mutua Jan 30 '23 at 17:51
  • 1
    Thanks for the tip! I also fixed the deprecation issue I was having on the logs... ............23:15:27.047 Deploying your site to Cloudflare's global network... ............23:15:41.337 Success: Your site was deployed! – Philip Mutua Jan 30 '23 at 17:54
  • Incase anyone finds themselves having the deprecation issue they can check the reference here https://bundler.io/v2.1/whats_new.html – Philip Mutua Jan 30 '23 at 17:56

0 Answers0