跳到主要内容Git 和 GitHub 零基础入门指南 | 极客日志编程语言大前端
Git 和 GitHub 零基础入门指南
介绍 Git 版本控制工具与 GitHub 托管平台的区别及基础使用方法。涵盖账号注册、Git 安装配置、远程仓库创建、本地仓库初始化、代码推送(含 PAT 令牌认证)、日常更新工作流、常见错误排查、.gitignore 配置以及 GitHub Pages 部署。适合编程初学者快速上手代码云端管理。
DevOpsTeam28 浏览 Git 和 GitHub 基础使用指南
一、先搞清楚:Git 和 GitHub 是什么关系?
想象你在写一本日记:
| 工具 | 生活比喻 | 作用 |
|---|
| Git | 你桌上的时光机(一台老式相机) | 装在你电脑上,能记录代码的每一次修改(拍照存档),随时回退到之前的版本,即使断网也能工作 |
| GitHub | 互联网上的图书馆(GitHub.com网站) | 提供存放代码的"书架"(远程仓库),你可以把本地备份"寄"到这里,换电脑时能下载,还能给别人看 |
一句话总结:Git 是工具(相机),GitHub 是平台(图书馆)。就像微信(工具)和微信朋友圈(平台)的关系。
关键区别:
- Git 是软件,安装在你的电脑上,管理本地代码版本
- GitHub 是网站,提供代码托管服务(类似"代码版网盘")
二、准备工作:一次性配置(5 分钟)
1. 注册 GitHub 账号(办借书证)
- 打开 github.com
- 点击右上角 Sign up(注册)
- 填写:
- Email:常用邮箱(建议用 QQ 邮箱或 Gmail)
- Password:密码(大小写 + 数字,8 位以上)
- Username:用户名(建议用英文名 + 数字,如
zhangsan-web,以后很难改!)
- 去邮箱点击验证链接完成注册
2. 安装 Git(买时光机)
Windows:
- 访问 git-scm.com 下载,一直点 Next(保持默认)
- 验证安装:打开命令提示符或 Git Bash,输入:
git --version
如果显示版本号(如 git version 2.40.0)就成功了!
Mac:
- 打开终端(Terminal),输入
git --version
- 如果没安装,系统会提示你安装,点击确认即可
3. 配置身份(给相机贴名字标签)
打开 Git Bash(Windows)或终端(Mac),输入以下命令(替换为你的信息):
git config --global user.name
git config --global user.email
"你的 GitHub 用户名"
"你的邮箱@example.com"
作用:就像在每张照片背面签名,以后查看历史记录就知道是谁改的。
三、创建远程仓库:在图书馆申请一个书架
步骤 1:新建空仓库(⚠️ 关键避坑点)
- 登录 GitHub,点击右上角 + → New repository
- 填写信息:
- Repository name:
HTML-Study-Week1(仓库名,英文短横线连接)
- Description:
第一周 HTML 学习代码和笔记(可选)
- Public/Private:选 Public(免费公开)
- Initialize this repository with:❌ 不要勾选任何选项(不选 README、不选 .gitignore)
- ⚠️ 为什么? 如果勾选了 README,远程仓库会有文件而本地没有,第一次推送会报错冲突!
- 点击 Create repository
步骤 2:复制仓库地址
创建成功后,在页面中间看到 Quick setup 区域:
- 确保选中 HTTPS 标签(不是 SSH,SSH 需要额外配置密钥)
- 点击地址右侧的复制按钮(如
https://github.com/你的用户名/HTML-Study-Week1.git)
- 保存好这个地址,待会儿要用
四、本地仓库与远程关联:把你的书桌连上图书馆
假设你的 HTML 作业放在桌面的 Week1-Homework 文件夹里。
第 1 步:进入本地文件夹
cd C:/Users/你的用户名/Desktop/Week1-Homework
cd ~/Desktop/Week1-Homework
快捷方式:Windows 用户可以直接在文件夹空白处右键 → Git Bash Here
第 2 步:初始化本地仓库(安装时光机)
- 成功提示:
Initialized empty Git repository...
- 发生了什么:文件夹里多了隐藏的
.git 文件夹(时光机的硬盘,别删!)
第 3 步:把文件打包(拍照存档)
. 表示"当前文件夹的所有文件",包括子文件夹
- 注意:如果项目中有
.gitignore 文件指定了忽略规则(比如临时文件、系统文件),那么这些文件不会被添加
git commit -m "第一周作业:HTML 基础标签和表单"
- 注意:
-m 后面必须写清楚做了什么,如"添加 CSS 样式"、"修复图片路径"
- 简单描述:
-m "修复登录表单验证逻辑"
- 如果一行写不下需要详细描述,可以不用
-m 参数,Git 会打开编辑器让你写多行
- 避坑:如果忘记写
-m 进入了奇怪界面(Vim 编辑器),按 Esc → 输入 :q! → 回车退出,然后重新提交
第 4 步:关联远程仓库(拨通图书馆电话)
git remote add origin https://github.com/你的用户名/HTML-Study-Week1.git
git remote add:添加远程地址
origin:给远程仓库起的外号(习惯叫 origin,你可以理解为"默认云端")
- 后面一串:你的仓库网址
看到显示 origin https://github.com/... 即成功。
五、推送到 GitHub:把书运到图书馆(⚠️ 重点环节)
首先确认分支名称
GitHub 现在默认主分支叫 main,但你的本地 Git 版本可能默认是 master。
- 如果显示
* master:你的分支是 master
- 如果显示
* main:你的分支是 main
核心推送命令
git push -u origin main
git push -u origin master
git push:推送
-u:–set-upstream 的缩写,第一次推送需要,作用是"记住这次推送的目标位置",以后直接 git push 即可
origin:刚才起的外号(往哪个图书馆送)
main/master:你的分支名
⚠️ 关键:身份验证(PAT 个人访问令牌)
执行上面的 push 命令后,会弹出窗口让你登录。注意:这里不能输 GitHub 密码! GitHub 在 2021 年后取消了密码登录,必须用 PAT(Personal Access Token)。
如何生成 PAT 令牌(只需一次,永久使用):
- 登录 GitHub,点击右上角 头像 → Settings(设置)
- 左侧最下方点击 Developer settings → Personal access tokens → Tokens (classic)
- 点击 Generate new token (classic)
- 配置:
- Note:
我的电脑(随便写,方便识别)
- Expiration:选 90 days(90 天过期,更安全)或 No expiration(永不过期,方便但风险高)
- ⚠️ 安全建议:对于个人学习项目,选 90 天到期后重新生成更安全
- Select scopes:勾选
repo(仓库权限,允许推送代码)
- 点击底部 Generate token
- ⚠️ 立即复制生成的字符串(格式如
ghp_xxxxxxxxxxxx)!刷新页面后就看不到了,丢了需要重新生成
- 保存到安全的地方:建议保存在密码管理器或本地文本文件中
验证时输入:
- Username:你的 GitHub 用户名
- Password:粘贴刚才复制的 PAT 令牌(不是登录密码!)
验证成功
终端显示 Writing objects: 100%... 或 Done,即推送成功!🎉
验证结果
刷新 GitHub 网页,看到你的 HTML 文件和笔记出现了!
六、本周工作流:以后每周如何更新?
git add .
git commit -m "第二周更新:添加 CSS 样式和响应式布局"
git push
七、⚠️ 避坑指南:这些错误 90% 的人会犯
错误 1:git push 提示 "rejected" 或 "non-fast-forward"
原因:远程仓库有文件而本地没有(比如你手贱在网页上点了编辑 README)
解决:先拉取再推送
git pull origin main --allow-unrelated-histories
git push origin main
--allow-unrelated-histories 参数允许合并没有共同祖先的历史(第一次同步常用)
错误 2:git push 提示 "Permission denied" 或认证失败
原因:用了 GitHub 登录密码而不是 PAT 令牌
解决:按上文步骤生成 PAT,用那个长字符串当密码
错误 3:fatal: not a git repository
原因:你当前不在项目文件夹里,或没执行 git init
解决:cd 进入正确的项目文件夹,执行 git init
错误 4:提示 "src refspec main does not match any"
原因:你的本地分支名可能是 master 而不是 main
解决:查看分支名 git branch,根据显示的分支名推送:
git push -u origin master
git branch -m main
git push -u origin main
错误 5:图片/笔记没传上去(.gitignore 问题)
- 检查项目根目录是否有
.gitignore 文件
- 查看里面是否写了忽略规则(如
*.md)
- 如果想上传被忽略的文件,可以:
- 删除
.gitignore 中的对应规则
- 或强制添加:
git add -f 文件名.md
错误 6:PAT 令牌过期
表现:之前能推送,突然要重新登录且令牌无效
解决:重新生成 PAT 令牌(步骤同上),用新令牌登录
八、创建.gitignore 文件:告诉 Git 哪些文件不用上传
有些文件不应该上传到 GitHub(比如系统文件、编辑器临时文件):
- 在项目根目录创建
.gitignore 文件(没有后缀名!)
- 添加常见忽略规则:
# 系统文件
.DS_Store # Mac 系统文件
Thumbs.db # Windows 缩略图
# 编辑器/IDE 文件
.vscode/
.idea/
*.swp
*.swo
# 依赖文件夹(如果有)
node_modules/
# 日志文件
*.log
# 敏感文件(不要上传密码!)
config.ini
*.key
*.pem
- 保存后,这些文件就不会被
git add . 添加
九、GitHub Pages:把你的网页变成在线网站
- 进入你的 GitHub 仓库页面
- 点击 Settings(设置)→ 左侧 Pages
- Source 选择:main(或 master)分支 → /(root) 文件夹
- 点击 Save
- 等待 1-2 分钟,刷新页面看到绿色提示和你的网站地址
- 如果你的仓库名是
用户名.github.io,访问:https://用户名.github.io
- 如果是其他仓库名,访问:
https://用户名.github.io/仓库名
示例:你的用户名是 zhangsan-web,仓库名是 HTML-Study-Week1,那么网站地址是:
十、学习检查清单
- 注册 GitHub 账号并验证邮箱
- 安装 Git,能用
git --version 验证
- 配置了用户名和邮箱(
git config)
- 在 GitHub 创建远程仓库(不勾选 README)
- 本地项目文件夹
git init 初始化
- 完成至少一次
git add + git commit + git push
- 成功生成 PAT 令牌并通过认证
- 在 GitHub 网页上能看到你的代码文件
- 知道如何查看本地分支名(
git branch)
十一、常见问题 Q&A
Q:Git 和 GitHub 一定要一起用吗?
A:不一定。Git 可以单独使用(本地版本控制),GitHub 只是 Git 远程仓库的一种。类似服务还有 GitLab、Gitee 等。
Q:PAT 令牌和 SSH 密钥哪个好?
A:对于初学者,PAT 令牌(HTTPS)更简单。SSH 密钥配置稍复杂,但更安全方便(无需每次输入密码)。你可以先掌握 PAT,后期再学 SSH。
Q:代码推送到 GitHub 后,别人能看到吗?
A:如果仓库是 Public(公开),所有人都能看到。如果是 Private(私有),只有你和你邀请的人能看到。个人账户的私有仓库也是免费的。
Q:上传有大小限制吗?
A:单个文件建议不超过 100MB,仓库总大小不超过 1GB(一般代码项目远小于这个值)。大文件建议用 Git LFS。
至此,你的代码已安全存储于云端。即使电脑损坏,只要登录 GitHub 就能找回所有努力。
相关免费在线工具
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown转HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
- HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
- JSON美化和格式化
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online