写好网站的代码后，第一件事就是想要上线看看效果。根据 xhp 的推荐，我选择了 Vercel 作为部署平台。Vercel 自带服务器，并且可以自动生成域名，对新手非常友好 🎉
但在部署过程中，我遇到了几个 Git 相关的问题。这些问题 AI 很难直接帮你解决，因为涉及具体的本地环境和操作流程。这里把我的踩坑经验整理一下，希望能帮到同样在路上的你。
问题一：Commit 后仍需配置远程仓库
很多人（包括我）会以为 git commit 完就万事大吉了，但其实还需要把本地仓库和远程 GitHub 仓库关联起来。
检查并配置远程仓库
# 查看当前远程仓库配置
git remote -v
# 如果没有任何输出，说明还没配置远程仓库
# 添加远程仓库（替换为你的用户名和仓库名）
git remote add origin https://github.com/你的用户名/你的仓库名.git
# 再次验证配置是否成功
git remote -v
💡 小提示：
origin是远程仓库的默认别名，你可以自定义，但保持默认最省事。
问题二：日常 Git 使用流程不熟悉
刚开始用 Git 时，容易忘记命令顺序。我整理了一个「最小可用流程」，适合日常提交代码：
📋 标准四步曲
# 1️⃣ 查看修改状态
git status
# 2️⃣ 添加修改到暂存区（注意有个点！）
git add .
# 3️⃣ 提交到本地仓库
git commit -m "feat: 添加首页布局组件"
# 4️⃣ 推送到远程仓库
git push
🔁 关于 -u 参数和分支管理
首次推送时需要设置上游分支：
# 首次推送，设置上游分支（以 main 分支为例）
git push -u origin main
# 之后就可以直接用 git push 了
查看和切换分支：
# 查看当前分支
git branch
# 切换到其他分支
git checkout dev
# 在新分支上重复 add → commit → push 流程
# 如果是新分支首次推送，同样需要 -u 参数
git push -u origin dev
⚠️ 注意：现在 GitHub 新建仓库默认主分支是
main而不是master，请根据实际情况调整。
问题三：每次 push 都要输密码，配置 SSH 即可
在公司或自己的电脑上，如果每次推送都要输入 GitHub 账号密码，真的很影响效率。配置 SSH 密钥后可以彻底解决这个问题 🔐
🛠️ SSH 配置七步走
# 1️⃣ 生成 SSH 密钥（邮箱换成你的 GitHub 邮箱）
ssh-keygen -t ed25519 -C "your-email@example.com"
# 一路按 Enter 使用默认设置即可
# 2️⃣ 启动 SSH 代理
eval "$(ssh-agent -s)"
# 3️⃣ 添加密钥到代理
ssh-add ~/.ssh/id_ed25519
# 4️⃣ 复制公钥内容
cat ~/.ssh/id_ed25519.pub
# 复制输出的内容（以 ssh-ed25519 开头）
# 5️⃣ 去 GitHub 添加 SSH Key
# Settings → SSH and GPG keys → New SSH key → 粘贴公钥
# 6️⃣ 修改远程仓库为 SSH 方式（重要！）
git remote set-url origin git@github.com:你的用户名/你的仓库名.git
# 7️⃣ 验证配置
git remote -v
# 应该显示 git@github.com 开头的地址，而不是 https://
配置完成后，再执行 git push 就不会再提示输入密码啦 ✨
🎯 小结
| 问题 | 解决方案 | 关键命令 |
|---|---|---|
| 未关联远程仓库 | 添加 origin | git remote add origin ... |
| 推送流程混乱 | 记住四步曲 | status → add → commit → push |
| 频繁输密码 | 配置 SSH 密钥 | ssh-keygen + GitHub 设置 |
第一次部署个人网站，虽然踩了不少坑，但每解决一个问题都很有成就感。另外AI真好用啊！！！
📝 后记：博客代码块渲染踩坑记录
在部署完成后，我发现博客文章中的代码块渲染遇到了一些问题，这里也记录一下解决过程，希望能帮助到其他使用 Next.js + Markdown 的开发者。
问题 1：代码块格式错误导致 Markdown 解析失败
现象：文章中 # 标题符号直接显示在页面上，没有被正确渲染。
原因：在 Typora 等编辑器中写 Markdown 时，代码块的结束标记误用了四个反引号 ``` 而不是标准的三个反引号 ```。这导致 Markdown 解析器认为代码块没有结束，把后面的所有内容（包括标题）都当作代码处理了。
解决：检查所有代码块，确保使用正确的三反引号标记：
```bash
git status
```
问题 2：代码块缺少样式背景
现象：代码块中的文字显示正常，但没有任何背景色和边框，看起来像普通文本。
原因：Tailwind CSS 的 Preflight 机制会清除浏览器默认样式，包括 <pre> 标签的背景和内边距。
解决：在 globals.css 中添加代码块样式，或使用 @tailwindcss/typography 插件。
问题 3：语法高亮导致文字难以看清
现象：使用 react-syntax-highlighter 等库后，某些关键字（如 git push 中的 push）颜色和背景太接近，几乎看不见。
原因：预设的深色主题（如 vscDarkPlus）在某些语法元素上对比度不够，或者主题的深色背景和自定义背景冲突。
解决：最终放弃了复杂的语法高亮库，改用简单的纯色方案：
- 深色模式：
#1e1e1e背景 +#d4d4d4文字 - 浅色模式：
#f5f5f5背景 +#24292e文字
这样虽然没有彩色语法高亮，但所有文字都清晰可读，风格也更接近知乎等简洁的博客平台。
问题 4：代码块内部元素有白色背景
现象：代码块外层是深色背景，但里面的文字有白色/浅色背景，像记号笔涂抹一样难看。
原因：全局 CSS 给所有 <code> 标签设置了浅色背景（用于行内代码），导致代码块内的 <code> 也继承了白色背景。
解决：使用 CSS 选择器强制代码块内部的 <code> 背景透明：
/* 代码块内部样式透明化 */
.prose div[class*="my-4"] code {
background-color: transparent !important;
color: inherit !important;
}
📌 附录：常用 Git 命令速查
git init # 初始化仓库
git clone url # 克隆远程仓库
git branch -M main # 重命名当前分支为 main
git log --oneline # 查看简洁提交历史
git pull # 拉取远程更新
git stash # 临时暂存修改
Comments (0)