在Linux服务器上高效更新React个人作品集网站的最佳实践

核心方案：Git钩子 + 自动化脚本 #

1. 服务器端配置Git仓库 #

• 在服务器上创建裸仓库（仅存Git版本数据，无工作目录），示例路径~/portfolio-bare.git：

  mkdir ~/portfolio-bare.git && cd ~/portfolio-bare.git
  git init --bare
  

• 进入裸仓库的hooks目录，创建并赋予post-receive钩子执行权限：

  cd hooks
  touch post-receive && chmod +x post-receive
  

• 编辑post-receive脚本，指定网站根目录并自动拉取更新（假设站点根目录为/var/www/portfolio）：

  #!/bin/bash
  GIT_WORK_TREE=/var/www/portfolio git checkout -f main
  # 若项目需构建（如Vue/React静态站），追加构建命令：
  # cd /var/www/portfolio && npm install && npm run build
  

2. 本地仓库关联服务器远程 #

• 在本地项目仓库添加服务器远程地址：

  git remote add server ssh://你的服务器用户名@服务器IP/~/portfolio-bare.git
  

• 后续更新流程：本地提交代码 → 推送到GitHub → 推送到服务器远程，自动触发部署：

  git push origin main
  git push server main
  

进阶优化：GitHub Actions自动触发部署 #

若想实现推送到GitHub后自动同步服务器，无需手动推两次，可配置GitHub Actions：

• 在项目根目录创建.github/workflows/deploy.yml：

  name: Deploy to Server
  on:
    push:
      branches: [ main ]
  jobs:
    deploy:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout code
          uses: actions/checkout@v4
        - name: Deploy via SSH
          uses: appleboy/ssh-action@v1.0.3
          with:
            host: ${{ secrets.SERVER_HOST }}
            username: ${{ secrets.SERVER_USER }}
            key: ${{ secrets.SERVER_SSH_KEY }}
            script: |
              cd /var/www/portfolio
              git pull origin main
              # 如需构建，追加命令
              # npm install && npm run build
  

• 在GitHub仓库Settings > Secrets and variables > Actions中添加3个密钥：SERVER_HOST（服务器IP）、SERVER_USER（服务器用户名）、SERVER_SSH_KEY（服务器免密登录私钥）。

关键注意事项 #

• 确保服务器站点目录权限正确，Git执行用户拥有读写权限：

  sudo chown -R 你的用户名:www-data /var/www/portfolio
  

• 静态站点部署后可重载Nginx/Apache刷新缓存（可选）：

  sudo systemctl reload nginx
  

• 禁止直接修改服务器站点目录文件，所有变更通过本地Git提交推送，保持版本一致性。

参考指南方向 #

• Git官方文档中关于post-receive等钩子的详细用法说明
• GitHub Actions官方文档里的SSH部署案例
• 静态站点自动化部署的Git+SSH组合教程

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