Jekyll站点本地与GitHub部署时使用不同CSS的技术问询

嘿，你担心Liquid是构建时处理没法区分本地和线上环境？完全不用愁！我们有好几种实用的办法，既能实现本地显示「Edit Me」按钮、线上自动隐藏的需求，还能轻松切换不同的CSS文件，给你详细说说：

方法一：用Jekyll环境变量直接控制（最推荐） #

Jekyll自带JEKYLL_ENV环境变量，本地运行jekyll serve时默认是development（开发环境），线上部署到GitHub Pages时，它会自动用production（生产环境）——当然你也可以手动指定。

你直接在模板里写Liquid判断就行，比如要显示Edit按钮：

{% if jekyll.environment == "development" %}
  <a href="/admin" class="edit-btn">Edit Me</a>
{% endif %}

这样本地构建时这段按钮代码会被生成，线上构建时直接跳过，根本不用CSS来隐藏，高效又省心。

要是想加载不同的CSS文件，同样的逻辑：

{% if jekyll.environment == "development" %}
  <link rel="stylesheet" href="/assets/css/local-style.css">
{% else %}
  <link rel="stylesheet" href="/assets/css/prod-style.css">
{% endif %}

方法二：前端JS判断当前域名（灵活度高） #

如果不想依赖Jekyll的环境变量，也可以用JavaScript来判断当前访问的域名，动态控制元素显示或者加载样式：

document.addEventListener('DOMContentLoaded', function() {
  // 判断是否是本地环境
  const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
  const editBtn = document.querySelector('.edit-btn');
  
  if (isLocal) {
    // 本地显示按钮，或者给body加个标识类
    editBtn.style.display = 'block';
    document.body.classList.add('local-mode');
  } else {
    editBtn.style.display = 'none';
  }
});

对应的CSS可以这么写，用类来控制样式：

/* 默认隐藏按钮 */
.edit-btn {
  display: none;
}
/* 本地环境下显示按钮+专属样式 */
.local-mode .edit-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  text-decoration: none;
}

这种方法不管你怎么构建，都会根据访问的域名自动适配，非常灵活。

小补充：GitHub Pages部署的注意点 #

如果你用GitHub Actions手动构建部署，记得在构建命令里加上JEKYLL_ENV=production，比如：

JEKYLL_ENV=production jekyll build

这样线上构建时就会严格识别为生产环境，确保本地专属元素不会出现在线上站点。

内容的提问来源于stack exchange，提问作者Kevin Kleinfelter