Jekyll部署GitHub Pages后CSS样式仅首页生效的问题求助

问题描述 #

将Jekyll网站部署到GitHub Pages后，首页philipmutua.me样式显示正常，但进入分类页（http://philipmutua.me/categories/）等其他页面时，CSS样式未正常加载。以下是相关配置文件、页面代码、文件结构及构建日志：

配置文件 _config.yml #

# 依赖项
markdown:         kramdown
highlighter:      pygments

# 永久链接格式
permalink:        pretty

# 站点设置
title:             Philip Mutua
tagline:          '全栈Web开发'
description:      '全栈开发者'
url:              https://philipmutua.me
baseurl:          /

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

# 分页设置
paginate:         5
paginate_path:    "page:num"

# 自定义变量
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">

  <!-- 启用移动设备响应式布局 -->
  <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">

  <!-- 图标文件 -->
  <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">
      按<a title="{{ site.name }}博客的完整分类归档"
                      href="{{ site.url}}{{ site.baseurl }}/categories">分类</a>浏览
  </div>
</div>

文件结构（gh-pages分支 /public/css） #

构建日志 #

2023-01-30T17:16:59.644485Z 正在克隆仓库...
2023-01-30T17:17:01.558067Z 从 https://github.com/pmutua/pmutua.github.io 克隆
2023-01-30T17:17:01.55868Z   * 分支            9366bb50d1e33d9e14fd2f876eb1624f29b240ae -> FETCH_HEAD
2023-01-30T17:17:01.55886Z  
2023-01-30T17:17:01.635576Z 当前HEAD指向提交9366bb5（更新head.html）
2023-01-30T17:17:01.636179Z 
2023-01-30T17:17:01.782688Z 
2023-01-30T17:17:01.810462Z 成功：仓库文件克隆完成
2023-01-30T17:17:02.72333Z  正在安装依赖项
2023-01-30T17:17:02.734422Z Python版本设置为2.7
2023-01-30T17:17:05.986625Z v12.18.0已安装
2023-01-30T17:17:07.15815Z  现在使用node v12.18.0（npm v6.14.4）
2023-01-30T17:17:07.368069Z 开始恢复缓存的构建插件
2023-01-30T17:17:07.382809Z 缓存的构建插件恢复完成
2023-01-30T17:17:07.868701Z 尝试使用环境中指定的Ruby版本2.7.1
2023-01-30T17:17:11.307066Z 使用Ruby版本2.7.1
2023-01-30T17:17:11.66631Z  使用PHP版本5.6
2023-01-30T17:17:11.667382Z 开始恢复缓存的Ruby gems
2023-01-30T17:17:11.682448Z 缓存的Ruby gems恢复完成
2023-01-30T17:17:11.683421Z 安装gem bundle
2023-01-30T17:17:11.969321Z [已废弃] `--path` 参数已过时，因为它依赖于在bundler调用之间保存配置，未来版本的bundler将不再支持。请改用 `bundle config set path '/opt/buildhome/cache/bundle'`，并停止使用该参数
2023-01-30T17:17:12.119793Z [已废弃] --binstubs选项将被移除，建议使用`bundle binstubs`
2023-01-30T17:17:14.392024Z 从https://rubygems.org/获取gem元数据............
2023-01-30T17:17:14.517051Z 从https://rubygems.org/获取gem元数据.
2023-01-30T17:17:14.631572Z 解析依赖关系...
2023-01-30T17:17:14.69117Z  sass-embedded-1.57.1-x86_64-linux-gnu要求rubygems版本>=3.3.22，但当前版本为3.1.2，不兼容
2023-01-30T17:17:14.764924Z gem安装过程中出错
2023-01-30T17:17:14.769003Z 失败：构建命令退出，代码为1
2023-01-30T17:17:16.001606Z 失败：发生内部错误

问题分析与解决步骤 #

1. CSS路径问题
   子页面样式失效是因为相对路径解析错误，需将资源链接改为绝对路径。修改head.html中的CSS链接：

   <link rel="stylesheet" href="{{ site.url }}{{ site.baseurl }}public/css/poole.css">
   <link rel="stylesheet" href="{{ site.url }}{{ site.baseurl }}public/css/syntax.css">
   <link rel="stylesheet" href="{{ site.url }}{{ site.baseurl }}public/css/hyde.css">
   

2. 构建失败问题
   RubyGems版本不兼容导致构建中断，需锁定依赖版本。在仓库根目录创建Gemfile：

   source "https://rubygems.org"
   gem "github-pages", group: :jekyll_plugins
   

   提交Gemfile和Gemfile.lock到仓库，GitHub Pages会使用指定依赖构建。

3. 分页路径配置错误
   修改_config.yml中的分页路径格式：

   paginate_path:    "/page:num/"
   

内容的提问来源于stack exchange，提问作者Philip Mutua