Jekyll配置CNAME后CSS无法加载，如何兼顾本地与线上？

我来帮你搞定这个头疼的兼容问题——本质上就是本地开发和生产环境的baseurl不一致导致的资源路径冲突，下面给你几个靠谱的解决方案，按从简单到灵活的顺序来：

方案1：命令行参数覆盖配置（最省心） #

不用改现有配置太多，只需要在启动本地服务和构建生产版本时，通过命令行参数动态指定baseurl：

• 本地开发时：
  启动服务的时候加上--baseurl "/seenit"，命令如下：

  bundle exec jekyll serve --baseurl "/seenit"
  

  这时候本地访问127.0.0.1:4000/seenit/，资源路径会自动拼接成/seenit/assets/css/main.css，完美加载。

• 生产环境构建时：
  构建静态文件的时候指定baseurl为"/"，命令如下：

  bundle exec jekyll build --baseurl "/"
  

  部署到CNAME环境后，资源路径就是/assets/css/main.css，和你的域名根路径匹配，资源正常加载。

你的config.yml可以保留一个默认值（比如本地的baseurl: "/seenit"），命令行参数会自动覆盖这个配置，非常灵活。

方案2：利用Jekyll环境变量动态配置 #

Jekyll支持通过JEKYLL_ENV环境变量区分开发/生产环境，我们可以在配置和模板里做条件判断：

第一步：修改config.yml #

添加生产环境的专属配置：

# 默认本地开发配置
baseurl: "/seenit"
url: "http://127.0.0.1:4000"

# 生产环境（CNAME）配置
production:
  baseurl: "/"
  url: "https://dev.seenit.studio"

第二步：修改head.html中的资源引用 #

用Jekyll的模板语法判断当前环境，动态生成资源路径：

<link rel="stylesheet" href="{{ site.url }}{{ site.baseurl }}/assets/css/main.css" />

或者更严谨一点，直接在模板里做环境判断：

{% if jekyll.environment == 'production' %}
  <link rel="stylesheet" href="/assets/css/main.css" />
{% else %}
  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css" />
{% endif %}

第三步：启动/构建时指定环境 #

• 本地开发（默认就是development环境，不用额外指定）：

  bundle exec jekyll serve
  

• 生产环境构建：

  JEKYLL_ENV=production bundle exec jekyll build
  

这个方案的好处是配置更清晰，适合需要区分更多环境参数的场景。

方案3：统一使用绝对路径（不推荐但可行） #

如果上面两种方法都嫌麻烦，你也可以直接把资源路径写成绝对路径，但需要注意本地和生产的域名差异：

• 本地开发时，资源路径写http://127.0.0.1:4000/seenit/assets/css/main.css
• 生产环境时改成https://dev.seenit.studio/assets/css/main.css

但这种方法需要手动切换路径，容易出错，除非你有自动化脚本帮你替换，否则不建议用。

总结一下，方案1是最直接省心的，不需要改模板，只需要记住两个启动/构建命令就行；方案2更适合需要精细化配置的场景，能自动区分环境。你可以根据自己的习惯选一个试试~

内容的提问来源于stack exchange，提问作者Ed Stennett