部署首个React应用至GitHub时出现Parse Error报错求助

生产构建阶段的HTML压缩工具对语法校验严格，你的public/index.html存在语法错误，开发环境和在线沙箱的容错机制不会拦截这类问题，但构建压缩时会直接抛出解析失败。
从报错日志定位到的错误点非常明确：第一个字体引入的<link>标签开头被误写入了CSS样式代码，属于标签语法完全不合法。

<!-- 错误写法，标签开头混入了CSS代码 -->
<link font-family: "Montserrat", sans-serif;
      href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap"
      rel="stylesheet" />

• 打开项目下public/index.html文件，修正上述错误link标签，删掉标签开头不属于属性的font-family: "Montserrat", sans-serif;片段，修正后合法标签写法如下：

<link
  href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap"
  rel="stylesheet"
/>

• 清理index.html里的冗余无效内容：删掉重复的Montserrat字体引入link标签（当前文件里一共写了3个同地址字体引入，保留1个即可）；删掉body区域内的<script src="../src/index.js" type="text/jsx"></script>代码，React生产构建会自动注入打包后的JS资源，手动引入src目录下的源文件是无效写法，只会干扰构建流程。
• 提前配置GitHub Pages部署所需的路径项：打开package.json，在顶层添加homepage字段，值为你最终的访问地址，格式为https://[你的GitHub用户名].github.io/[当前项目仓库名]，避免部署后静态资源路径匹配失败。
• 部署脚本配置：在package.json的scripts配置项里补充两个命令，原有start、build等命令保留不动：

{
  "scripts": {
    // 原有命令不要删
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

• 本地先执行npm install gh-pages --save-dev安装部署依赖，之后直接运行npm run deploy就会自动执行构建、把产物推送到仓库的gh-pages分支。部署完成后到仓库的Settings-Pages页面，确认部署分支选中gh-pages，等待1-2分钟即可正常访问。

改完代码后先在本地执行npm run build，如果命令执行完成没有报错、正常生成build目录，就说明HTML语法问题已经修复，后续部署不会再出现本次的Parse Error。

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