如何在Github Pages部署SvelteKit应用？构建环节遇阻求助

首先得明确：不同技术栈的项目，构建命令和默认输出文件夹不一样，先对应你的项目类型排查：

• React/Vue3+Vite：执行npm run build，默认输出到dist文件夹
• React+CRA：执行npm run build，默认输出到build文件夹
• Vue2：执行npm run build，默认输出到dist文件夹
• Hexo等静态站点生成器：执行hexo generate，输出到public文件夹

如果执行构建命令后没看到对应文件夹，按以下步骤排查：

1. 看终端构建日志：如果有红色报错（比如依赖没装全、代码语法错），构建会直接中断，自然不会生成输出目录，先把报错解决了再重新构建
2. 查配置文件：比如Vite的vite.config.js里的build.outDir字段、CRA可以通过package.json的homepage或自定义配置修改输出路径，确认是不是被改成了其他位置（比如隐藏文件夹）
3. 检查.gitignore：如果输出目录（比如dist/build）被加到了忽略列表，Git不会追踪它，但文件夹其实已经生成了——直接去系统文件管理器里找项目根目录就能看到

解决完构建文件夹的问题后，部署到Github Pages的基础流程：

1. 确保项目代码已经推送到你的Github仓库
2. 打开仓库的「Settings」页面，找到「Pages」选项
3. 部署方式选「Deploy from a branch」，然后指定分支和目录（比如把构建后的文件夹内容推到gh-pages分支，或者直接选主分支下的构建目录）
4. 嫌手动推送麻烦的话，用Github Actions自动构建：在仓库里创建.github/workflows/deploy.yml，粘贴以下代码（注意把publish_dir改成你的构建输出目录）：

   name: Deploy to Github Pages
   on:
     push:
       branches: [main]
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - name: Install dependencies
           run: npm install
         - name: Build project
           run: npm run build
         - name: Deploy to Pages
           uses: peaceiris/actions-gh-pages@v4
           with:
             github_token: ${{ secrets.GITHUB_TOKEN }}
             publish_dir: ./dist
   

5. 提交这个文件到仓库，Github会自动执行构建和部署，等几分钟就能在Pages页面看到你的站点地址了

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