【学习笔记】我在VSCode中第一次使用Git连接到GitHub的步骤和遇到的问题

41 阅读3分钟

因为想要开始我的全栈开发的道路,我询问了deepseek相关建议,决定从做一个Todo List项目开始,并学习使用GitHub管理代码。

我是完全没有接触过GitHub的,所以只能询问deepseek如何使用它,也遇到了很多问题。

首先就是无法进入页面的问题,我无法访问GitHub,deepseek给我的建议是使用国内的替代平台Gitee,但幸运的是,我的GitHub能进入页面了。

image.png

deepseek指示我立刻进行todo-list仓库的创建,点击绿色的“创建存储库”按钮,填写仓库信息,包括项目名(小写,连字符)、概述、公开、勾选创建项目介绍文件Add a README file、勾选.gitignore模板并选择Node(过滤掉不需要上传的临时文件),最后点击页面最下方的绿色按钮 “Create repository”,我的第一个仓库就建好了。 紧接着我便开始进行第一次的代码提交。介于我还没有开始写我的代码,所以仅仅是最基础的框架。我在VSCode界面按下+反引号键打开了终端并输入了git clone https://github.com/你的GitHub用户名/todo-list.git,却出现了报错:

image.png

原因是我并没有安装Git软件。为提升下载速度使用清华大学开源软件镜像站mirrors.tuna.tsinghua.edu.cn/github-rele…下载安装Git-2.52.0-64-bit.exe,所有选项保持默认,安装完成后闭所有终端和VSCode,重新打开,然后输入 git --version 验证

image.png

git clone https://github.com/你的名字/todo-list.git
cd todo-list

成功从GitHub克隆了项目仓库并处于项目文件夹中,接下来我依次输入并执行以下三条命令来创建三个基础文件:

New-Item index.html -Type File
New-Item style.css -Type File
New-Item script.js -Type File

输入以下指令进行第一次功能提交再次出现问题:

git add.
git commit -m "feat: create project structure with basic HTML"
git push
image.png

此时需设置git全局身份并重新提交和推送

git config --global user.email "你的邮箱@example.com"
git config --global user.name "你的名字或GitHub用户名"
git commit -m "feat: create project structure with basic HTML"
git push
image.png image.png

Git在要求验证身份后才能将本地代码推送到GitHub,默认浏览器认证出现无法加载问题,只能使用SSH密钥。

 ~/.ssh/id_ed25519.pub

验证电脑上没有SSH密钥后生成SSH密钥:

ssh-keygen -t ed25519 -C "注册GitHub账号时使用的真实邮箱"

image.png 成功后会看到终端画出一个随机字符组成的“艺术图”

image.png
cat ~/.ssh/id_ed25519.pub

接下来执行下一条命令来显示并复制公钥访问:<github.com/settings/ke… 点击绿色的  “New SSH key”  按钮,在 “Key” 这个大文本框里粘贴刚刚复制的整段公钥文字,最后点击 “Add SSH key” 按钮保存。 添加成功后,回到终端,执行最后两条命令来完成配置和推送:

# 1. 将仓库的远程地址从HTTPS改为SSH
git remote set-url origin git@github.com:你的用户名/仓库名.git
# 2. 执行推送,这次应该不再弹出浏览器
git push

期间在连接 github.com 时遇到了网络问题

image.png image.png

以管理员身份打开记事本并打开 C:\Windows\System32\drivers\etc\ 文件夹中的hosts文件在文件末尾添加20.205.243.166 github.com并保存 再次打开cmd输入指令刷新DNS缓存:

ipconfig/flushdns

重启终端再次测试连接

ssh -T git@github.com

出现提示:

image.png

只需要输入 yes 然后按回车,之后就是前面的在GitHub添加密钥的步骤了。

image.png

出现该提示说明代码已经成功推送到GitHub。 打开GitHub主页进入todo-list仓库可以看到文件

image.png

至此我完成了环境配置、Git/SSH学习和GitHub初体验。 在VSCode的“源代码管理”面板也可以看到提交历史。

image.png