使用GitHub Pages时遭遇构建与部署错误求助

一、先排查核心配置与日志细节 #

• 进入仓库「Settings > Pages」，确认部署源的分支和目录设置正确（比如是否指向main分支的根目录或docs目录）。
• 若使用GitHub Actions部署，前往「Actions」页面查看对应工作流的完整日志——日志会明确给出错误原因，仅靠截图无法定位具体问题。

二、修正CSS代码的潜在语法问题 #

你提供的CSS中，@import语句和字体家族使用了转义的"，部分构建工具会将其判定为语法错误，建议替换为标准双引号。完整修正后的代码如下：

/* Font Imports */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600&display=swap");

/* Fonts */
h1 {
  font-family: "Lora", serif;
}

h2 {
  font-family: "Work Sans", sans-serif;
}

/* Placeholder */
* {
  background-color: #eae6e3;
  color: #353535;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .container-test {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    height: 90vh;
  }

  .container-test h1 {
    font-weight: 600;
    font-size: 3.5rem;
  }

  .container-test h2 {
    font-weight: 400;
    font-size: 2rem;
  }

  .container-test img {
    height: 10vh;
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container-test {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    height: 90vh;
  }

  .container-test h1 {
    font-weight: 600;
    font-size: 4.5rem;
  }

  .container-test h2 {
    font-weight: 400;
    font-size: 2.5rem;
  }

  .container-test img {
    height: 15vh;
  }
}

/* Desktop */
@media screen and (min-width: 1024px) {
  .container-test {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    height: 90vh;
  }

  .container-test h1 {
    font-weight: 600;
    font-size: 5.5rem;
  }

  .container-test h2 {
    font-weight: 400;
    font-size: 2.5rem;
  }

  .container-test img {
    height: 25vh;
  }
}

三、检查HTML资源引用正确性 #

确认index.html中引用stylesheet.css的路径无误：注意文件名大小写（GitHub区分大小写）、路径层级是否匹配，避免因文件找不到导致构建失败。

四、手动触发重新部署 #

• 进入仓库「Settings > Pages」，点击「Deploy branch」按钮手动触发部署，规避自动部署的缓存问题。
• 若使用GitHub Actions，在对应工作流页面点击「Re-run jobs」重新执行部署任务。

内容的提问来源于stack exchange，提问作者Santiago S. M.