Lazy loaded image
复盘手记
用一个脚本搞定Git提交和Vercel部署(macOS版)
字数 1330阅读时长 4 分钟
2025-6-29
icon
password
Place
工具库
📌 选题管理
💡
作为一名新手开发者,每次更新代码都要在终端输入一堆 Git 命令:git add .git commit -m "更新内容"git push origin main……这不仅繁琐,还容易出错。如果你用 Vercel 部署项目,想让代码从本地快速上线,这个过程可以更简单!这篇文章将教你如何在 macOS 上用一个脚本实现一键提交代码到 GitHub 并触发 Vercel 自动部署。即使你是技术小白,也能轻松学会!

准备工作:你需要什么?

在开始之前,确保你已经准备好以下内容:
  1. macOS 终端:macOS 自带“终端”应用(在“应用程序” > “实用工具”中,或用 Spotlight 搜索“终端”)。
  1. Git 已安装:打开终端,输入 git --version,如果显示版本号(比如 git version 2.39.5),说明 Git 已安装。如果没有,访问 Git 官网 下载安装。
    1. notion image
  1. GitHub 仓库:你的代码已经托管在一个 GitHub 仓库中,并且本地项目已配置好远程仓库(可以用 git remote -v 检查,确认有 origin 指向你的 GitHub 仓库)。
  1. Vercel 连接:你的 GitHub 仓库已连接到 Vercel 项目,确保推送到 main 分支会自动触发 Vercel 部署。(如果没设置,登录 Vercel 仪表板,连接你的 GitHub 仓库。)

步骤1:创建全局脚本文件夹

  • 打开终端:
    • 在 macOS 上,打开“终端”(在“应用程序” > “实用工具” > “终端”,或用 Spotlight 搜索“终端”)。
  • 创建 ~/.scripts 文件夹:
    • 输入以下命令,创建用户主目录下的 .scripts 文件夹:
    • 这个文件夹用来存放你的脚本,位置是 /Users/yourname/.scriptsyourname 是你的用户名)。
      • notion image
  • 确认文件夹存在:
  • 输入:
    • 如果看到 .scripts,说明创建成功。
      • notion image
     

    步骤2:创建和配置 deploy.sh 脚本

    • 创建 deploy.sh
      • 在终端输入:
        • 这会用 nano 编辑器创建一个新文件 deploy.sh
          • 输入代码后的终端如图所示
            输入代码后的终端如图所示
      • 粘贴以下脚本内容:
        • notion image
      • 保存并退出:
        • Ctrl+O,回车保存。
        • Ctrl+X ,退出 nano。
          • notion image
      • 给脚本添加执行权限:
        • 输入:
        • notion image
      • 验证脚本文件:
        • 检查文件是否存在:
        • 应该看到 deploy.sh
          • notion image

      步骤3:设置全局 deploy 别名

      • 打开 Zsh 配置文件:
        • macOS 默认使用 Zsh,编辑 ~/.zshrc
          • notion image
       
      • 滚动到文件末尾(用方向键↓),添加以下一行,
        • 记得替换 yourname 为你的实际用户名,例如我的是cha,则输入的是alias deploy='bash /Users/cha/.scripts/deploy.sh'
          • notion image
        • 保存并退出:
          • Ctrl+O,回车保存。
          • Ctrl+X 退出。
        • 应用更改:
          • 输入:
            • notion image
        • 验证别名:
          • 输入:
            • 应该看到类似 deploy='bash /Users/yourname/.scripts/deploy.sh' 的行
              • notion image
           

          步骤4:测试脚本

          • 修改一些项目代码:
            • 用 Cursor 编辑代码,保存更改。
          • 进入项目:
            • 假设你有一个项目在 /Users/yourname/myproject:
              • 如果不知道路径,在 Finder 中右键项目文件夹,选择“在终端中打开”,或拖动文件夹到终端。
            • 运行脚本:
              • 输入:
              • 终端会提示“请输入提交信息:”。 • 输入一个简短描述(比如“测试”),按回车。 • 脚本会: ◦ 检查你是否在 Git 仓库。 ◦ 检查是否有文件需要提交。 ◦ 执行 git add ., git commit -m "你的消息",git push origin 当前分支。 ◦ 输出成功或失败信息。
            • 检查 GitHub 和 Vercel:
              • 打开你的 GitHub 仓库,确认代码已推送。
              • 登录 Vercel 仪表板,检查是否触发了自动部署。
            • 测试脚本示例
              • notion image

            常见问题及解决办法

            “deploy: command not found”
            • 检查别名:
              • 确认是否有 alias deploy='bash /Users/yourname/.scripts/deploy.sh'
              • 确保运行了 source ~/.zshrc
            • 确认脚本存在:
              “错误:当前目录不是 Git 仓库
              • 确保你在项目目录:
                • 如果不是 Git 仓库,初始化:
                  “推送失败”
                  • 检查 GitHub 认证:
                    • 如果提示认证失败,可能需要设置个人访问令牌(在 GitHub 设置 > 开发者设置 > 个人访问令牌)。
                    • 确保网络正常,仓库配置正确。
                    Vercel 未部署
                    • 登录 Vercel 仪表板,确认 GitHub 仓库已连接。
                    • 检查分支是否正确(Vercel 默认监听 main 分支)。
                     
                    page icon
                    通过这个脚本,你已经将多步过程简化为一个命令。只需输入 deploy,输入一条消息,你的代码就会上传到 GitHub,Vercel 会在几分钟内将其部署到你的 live 站点。再也不用担心处理多个命令或担心打字错误。这种设置可以节省时间,减少压力,让你能够专注于构建项目。一旦 Vercel 完成部署,请检查你的站点以查看实时更改✌️。
                    上一篇
                    2025过半,分享让我效率倍增的12个Mac工具
                    下一篇
                    绕过限制!AltStore实现IOS微信双开图文攻略