本地正常但GitHub Actions构建遇RollupError，求Hostinger自动部署方案

可能原因及解决方法 #

1. 文件名大小写不匹配 #

本地Windows/macOS系统默认不区分文件名大小写，但GitHub Actions使用的Ubuntu系统严格区分。比如你在src/App.jsx里写了：

import Contact from './components/Contact'

但实际组件文件是src/components/contact.jsx（小写开头），就会导致构建失败。

解决：

• 检查src/components目录下的组件文件名，确保和App.jsx中的导入路径大小写完全一致。
• 修正后提交代码到GitHub。

2. 组件文件未提交到仓库 #

如果Contact组件文件被误加进.gitignore，或者未执行git add/git commit，GitHub仓库中就没有该文件，导致Actions构建时找不到。

解决：

• 检查.gitignore文件，确认没有排除src/components下的组件文件。
• 执行git status查看未提交文件，将缺失的组件文件提交并推送到master分支。

3. 工作流配置缩进错误 #

你的GitHub工作流中，build步骤的缩进错误，被包含在Install all dependencies步骤内，可能导致执行顺序异常。修正后的工作流配置如下：

name: Generate a build and push to another branch

on: 
  push:
    branches:
     - master
     
jobs:
  build:
    runs-on: ubuntu-latest
    name: Build and Push
    steps:
      - name: git-checkout
        uses: actions/checkout@v2
        
      - name: Install all dependencies
        run: npm install
        
      - name: Build project
        run: npm run build 
        
      - name: Push build files
        uses: s0/git-publish-subdir-action@develop
        env:
          REPO: self
          BRANCH: build 
          FOLDER: dist 
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          MESSAGE: "Build: {{sha}} {msg}"

方法1：使用Hostinger自带的Git自动部署 #

1. 登录Hostinger hPanel，进入你的网站管理页面。
2. 找到Auto Deploy（或Git）选项，点击进入。
3. 选择连接GitHub，授权Hostinger访问你的项目仓库。
4. 配置部署参数：
   • 仓库：选择你的minimal-portfolio仓库
   • 分支：选择build分支（该分支存储构建好的dist文件）
   • 部署目录：设置为public_html（Hostinger的网站根目录）
5. 启用自动部署：勾选“当分支有新推送时自动部署”，保存配置。

之后每次推送代码到master分支，GitHub Actions会自动构建并推送到build分支，Hostinger会检测到build分支的更新，自动部署到你的网站。

方法2：通过GitHub Actions直接部署到Hostinger #

1. 在GitHub仓库的Settings -> Secrets and variables -> Actions中添加以下Secrets：
   • HOSTINGER_FTP_HOST: Hostinger的FTP服务器地址（可在hPanel的FTP Accounts页面找到）
   • HOSTINGER_FTP_USER: FTP用户名
   • HOSTINGER_FTP_PASS: FTP密码
2. 修改GitHub工作流，在Push步骤后添加部署步骤：

- name: Deploy to Hostinger via FTP
  uses: SamKirkland/FTP-Deploy-Action@v4.3.4
  with:
    server: ${{ secrets.HOSTINGER_FTP_HOST }}
    username: ${{ secrets.HOSTINGER_FTP_USER }}
    password: ${{ secrets.HOSTINGER_FTP_PASS }}
    local-dir: dist/
    server-dir: public_html/

这样每次构建完成后，会自动将dist目录的文件上传到Hostinger的public_html目录，实现自动部署。

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