为何我的GitHub Pages仅显示index.html，不加载JSX和CSS内容？

核心问题 #

• 浏览器无法直接解析JSX文件，必须先编译为标准JavaScript代码才能运行。
• 你引用的DesktopRootRoot1.module.css是CSS模块，这类文件需要打包工具（如Vite、Webpack）处理类名映射后才能生效，直接通过<link>标签引用无法正确解析。

具体解决步骤 #

步骤1：用打包工具构建项目 #

如果你的项目基于React，推荐用Vite或Create React App完成打包：

1. 初始化项目（未初始化的话）：

   # Vite初始化React项目
   npm create vite@latest my-site -- --template react
   # 或Create React App初始化
   npx create-react-app my-site
   

2. 将DesktopRootRoot1.jsx和DesktopRootRoot1.module.css放到项目的src目录下，修改入口文件（如src/main.jsx）引入你的组件。
3. 执行打包命令：

   # Vite打包
   npm run build
   # Create React App打包
   npm run build
   

   打包完成后会生成dist（Vite）或build（Create React App）文件夹，里面是浏览器可直接识别的静态文件。

步骤2：部署到GitHub Pages #

将打包生成的dist或build文件夹内的所有文件，上传到GitHub仓库的gh-pages分支，或在仓库设置中指定GitHub Pages指向该文件夹。

临时应急方案（不推荐用于生产） #

如果暂时不想用打包工具，可做以下修改：

• 将DesktopRootRoot1.jsx转译为普通JS：去掉JSX语法，改用React.createElement写法，或在线转译后保存为.js文件，再在index.html中引用该.js文件。
• 将DesktopRootRoot1.module.css改为普通CSS文件（移除.module后缀），修改JSX中的类名为CSS文件内的原始类名，再通过<link>标签引用。

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