ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

《GitHub 从入门到进阶完整教程》

《GitHub 从入门到进阶完整教程》 GitHub 从入门到进阶完整教程GitHub 是全球最大的基于 Git 的代码托管与协作平台本教程从基础概念、环境搭建、核心操作到团队协作循序渐进带你掌握 GitHub 完整使用流程。一、基础概念Git 与 GitHub1. 核心区别Git一款开源的分布式版本控制系统安装在本地电脑上用于管理代码的版本历史、分支切换、内容追溯。GitHub基于 Git 的远程代码托管平台提供云端仓库存储同时支持团队协作、代码评审、开源社区等功能。2. 核心术语术语含义Repository仓库存放代码和版本历史的项目文件夹分本地仓库和远程仓库Commit提交代码版本的快照每次提交生成唯一哈希ID可随时回退Branch分支独立的开发线支持并行开发互不干扰默认主分支通常为mainStage暂存区提交前的临时存储区用于筛选要提交的修改Remote远程仓库托管在 GitHub 等平台的云端仓库Pull RequestPR合并请求用于分支合并前的代码评审二、环境准备账号与工具安装1. 注册 GitHub 账号访问 GitHub 官网填写用户名、邮箱、密码完成注册验证邮箱后即可使用基础功能2. 安装 Git 客户端Git 是本地操作的核心工具必须先安装Windows前往 Git 官网 下载安装包默认配置一路下一步即可Mac终端执行xcode-select --install自动安装或通过官网下载LinuxUbuntu/Debian终端执行sudo apt install git安装完成后打开终端/ Git Bash执行以下命令验证安装git--version输出版本号即安装成功。3. 配置 Git 全局信息设置你的用户名和邮箱用于标记提交者身份# 配置用户名建议和 GitHub 用户名一致gitconfig--globaluser.name你的GitHub用户名# 配置邮箱使用 GitHub 注册邮箱gitconfig--globaluser.email你的注册邮箱# 查看配置是否生效gitconfig--list4. 配置 SSH 密钥免密登录推荐SSH 密钥可以让你本地推送代码时无需重复输入账号密码是开发者标配生成密钥对ssh-keygen-ted25519-C你的注册邮箱连续按三次回车默认路径、无密码即可生成。查看公钥内容Windowscat ~/.ssh/id_ed25519.pubMac/Linuxcat ~/.ssh/id_ed25519.pub复制输出的全部内容。添加到 GitHub打开 GitHub → 右上角头像 →Settings→ 左侧SSH and GPG keys→ 点击New SSH keyTitle 随便填比如“家用电脑”Key 粘贴刚才复制的公钥内容点击Add SSH key完成测试连接终端执行ssh-Tgitgithub.com出现Hi 用户名! Youve successfully authenticated即配置成功。三、入门核心仓库基础操作场景1克隆远程仓库到本地最常用当 GitHub 上已有项目你想下载到本地修改打开目标 GitHub 仓库点击绿色Code按钮选择 SSH 地址并复制终端进入你想存放项目的文件夹执行克隆命令gitclone gitgithub.com:用户名/仓库名.git克隆完成后进入项目目录即可开始修改代码。场景2本地项目关联 GitHub 远程仓库本地已有代码想上传到 GitHub 新建的空仓库在 GitHub 上新建仓库右上角→New repository填写仓库名不要勾选初始化选项终端进入本地项目文件夹初始化本地 Git 仓库gitinit关联远程仓库地址替换为你新建的仓库 SSH 地址gitremoteaddorigin gitgithub.com:用户名/仓库名.git后续执行提交、推送操作即可。核心提交流程必记修改代码后从本地到远程的标准三步操作# 1. 将修改添加到暂存区. 代表所有修改文件也可指定文件名gitadd.# 2. 提交到本地仓库双引号内写本次修改的说明gitcommit-mfeat: 新增用户登录功能# 3. 推送到远程仓库的 main 分支# 首次推送加 -u 关联分支后续直接 git push 即可gitpush-uorigin main其他高频基础命令# 查看当前仓库状态哪些文件修改了、哪些在暂存区gitstatus# 查看具体修改了什么内容gitdiff# 查看提交历史按 q 退出gitlog# 拉取远程仓库的最新更新别人提交了代码你本地同步gitpull# 查看当前关联的远程仓库地址gitremote-v四、核心能力分支管理分支是 Git 的灵魂支持多人并行开发、功能隔离保证主分支代码稳定。常用分支命令# 查看所有本地分支带 * 的是当前分支gitbranch# 创建新分支不会自动切换gitbranch 分支名# 切换到指定分支gitswitch 分支名# 或旧版写法gitcheckout 分支名# 创建并切换到新分支最常用gitswitch-c分支名# 或旧版写法gitcheckout-b分支名# 合并指定分支到当前分支比如在 main 分支执行合并 dev 分支gitmerge dev# 删除本地分支合并完成后清理gitbranch-d分支名# 删除远程分支gitpush origin--delete分支名分支开发标准流程从主分支main创建开发分支git switch -c dev-login在新分支上编写代码、提交修改开发完成后切换回主分支git switch main先拉取主分支最新代码git pull合并开发分支到主分支git merge dev-login推送主分支到远程git push解决代码冲突当两个分支修改了同一文件的同一行合并时会触发冲突需要手动解决执行 merge 后终端提示CONFLICT执行git status找到冲突文件打开冲突文件会看到如下标记 HEAD 当前分支的代码 主分支的代码内容 待合并分支的代码内容 dev-login手动编辑文件保留需要的代码删除标记保存后重新暂存、提交冲突即解决gitadd.gitcommit-mfix: 合并冲突五、团队协作Fork Pull Request 工作流这是开源项目和多人团队最主流的协作方式核心是“先提交申请审核后再合并”。完整协作流程Fork 目标仓库打开别人的项目仓库点击右上角Fork按钮将仓库复制到你自己的 GitHub 账号下。克隆你自己的仓库从你的账号下克隆 Fork 后的仓库到本地gitclone gitgithub.com:你的用户名/仓库名.git创建开发分支不要直接在 main 分支修改新建功能分支开发gitswitch-cfix-bug-xxx提交并推送修改代码后提交并推送到你自己的远程仓库gitadd.gitcommit-mfix: 修复xxxbuggitpush origin fix-bug-xxx发起 Pull RequestPR回到你的 GitHub 仓库页面会自动出现Compare pull request按钮点击后填写 PR 标题和详细说明描述你做了什么修改确认目标仓库是原作者的仓库目标分支是main点击Create pull request提交代码评审与合并原仓库维护者会审核你的代码可能提出修改意见。审核通过后会点击合并按钮你的代码就会进入原项目主分支。同步原仓库更新原仓库有新代码提交后需要同步到你本地的仓库# 1. 添加原仓库为上游远程只需要执行一次gitremoteaddupstream gitgithub.com:原作者用户名/仓库名.git# 2. 拉取上游仓库的最新代码gitfetch upstream# 3. 切换到本地 main 分支合并上游更新gitswitch maingitmerge upstream/main# 4. 推送到你自己的远程仓库gitpush六、GitHub 常用功能Issues用于提交 Bug、功能建议、任务讨论是项目协作的沟通工具Wiki用于存放项目文档、使用教程、架构说明Releases发布正式版本可打包安装包、标注更新日志GitHub Pages免费托管静态网站可用于搭建个人博客、项目文档站Actions自动化流水线工具可实现自动测试、自动部署CI/CDStar / Watch / ForkStar收藏项目Watch关注项目动态有更新会收到通知Fork复制项目到自己账号下七、进阶技巧1. .gitignore 文件在仓库根目录创建.gitignore文件指定不需要被 Git 追踪的文件比如依赖包、环境变量、编译产物示例# 依赖目录 node_modules .vendor # 环境变量 .env .env.local # IDE 配置 .idea .vscode # 系统文件 .DS_Store Thumbs.db2. 版本回退提交错误想回到之前的版本# 先查看提交历史复制要回退的 commit IDgitlog# 硬回退会丢弃回退点之后的所有修改谨慎使用gitreset--hard提交ID3. 临时暂存工作区写到一半需要切换分支但代码还没写完不想提交# 暂存当前工作区修改gitstash# 切换分支做完其他事回来后恢复暂存内容gitstash pop4. 标签Tag用于标记重要版本节点比如正式发布版本# 创建本地标签gittag v1.0.0# 推送标签到远程gitpush origin--tags八、最佳实践与常见问题开发规范提交信息规范采用类型: 描述格式比如feat: 新增注册接口新功能fix: 修复登录超时bug修复问题docs: 更新README文档文档修改style: 调整代码格式代码样式调整小步提交不要攒一大堆修改再提交每个功能点单独提交方便回溯主分支保持可用永远不在 main 分支直接开发所有功能在分支完成后再合并推送前先拉取git push前先执行git pull减少远程冲突常见问题push 被拒绝大概率是远程有新代码你本地没有先执行git pull同步后再推送权限 denied检查 SSH 密钥是否配置正确是否有该仓库的推送权限不知道怎么撤销修改工作区修改未 addgit checkout 文件名撤销修改已 add 未 commitgit reset HEAD 文件名撤回暂存附件一Git 高频命令速查表Git 高频命令速查表一、配置与初始化命令说明git --version查看 Git 版本git config --global user.name 用户名设置全局用户名git config --global user.email 邮箱设置全局邮箱git config --list查看所有配置git init在当前目录初始化本地仓库二、暂存与提交命令说明git status查看工作区、暂存区状态git add 文件名将指定文件加入暂存区git add .将所有修改加入暂存区git commit -m 提交说明提交到本地仓库git commit -am 提交说明跳过 add直接提交已追踪的文件git log查看提交历史按 q 退出git log --oneline精简版提交历史git diff查看工作区未暂存的修改git diff --cached查看暂存区与上一版本的差异三、分支管理命令说明git branch查看本地分支git branch -a查看所有分支本地远程git branch 分支名创建新分支git switch 分支名切换分支git switch -c 分支名创建并切换到新分支git merge 分支名将指定分支合并到当前分支git branch -d 分支名删除已合并的本地分支git branch -D 分支名强制删除本地分支未合并也删四、远程仓库操作命令说明git clone 仓库地址克隆远程仓库到本地git remote -v查看关联的远程仓库git remote add origin 仓库地址添加远程仓库别名 origingit push origin 分支名推送到远程指定分支git push -u origin 分支名推送并关联分支后续直接 git pushgit push origin --delete 分支名删除远程分支git pull拉取远程当前分支并合并git fetch拉取远程更新但不自动合并五、撤销与回退命令说明git checkout 文件名撤销工作区修改未 addgit restore 文件名同上新版 Git 推荐写法git reset HEAD 文件名撤回暂存区已 add 未 commitgit reset --soft 提交ID回退到指定提交修改保留在暂存区git reset --hard 提交ID强制回退丢弃所有后续修改慎用六、临时暂存Stash命令说明git stash暂存当前未完成的工作git stash list查看所有暂存记录git stash pop恢复最近一次暂存并删除记录git stash drop删除最近一次暂存记录git stash clear清空所有暂存记录七、标签Tag命令说明git tag v1.0.0创建本地标签git tag -a v1.0.0 -m 版本说明创建带注解的标签git tag查看所有标签git push origin v1.0.0推送单个标签到远程git push origin --tags推送所有标签到远程GitHub 三大核心工作流速记1. 克隆开发流已有远程仓库git clone 地址 → 改代码 → git add . → git commit -m 说明 → git push2. 本地项目上传流本地代码 → 新仓库GitHub 新建空仓库 → 本地 git init → git add . → git commit → git remote add origin 地址 → git push -u origin main3. Fork PR 协作流参与开源/他人项目Fork 原仓库 → 克隆自己的仓库 → 新建分支开发 → 推送自己的仓库 → GitHub 页面发起 Pull Request → 等待原作者审核合并同步原仓库更新git remote add upstream 原仓库地址仅一次 → git fetch upstream → git switch main → git merge upstream/main → git push附件二GitHub Pages 搭建静态网站GitHub Pages 是 GitHub 提供的免费静态网站托管服务可直接托管 HTML/CSS/JS 静态资源适合搭建个人博客、项目文档、演示站点。1. 站点类型GitHub Pages 分为两类区别仅在于仓库命名和访问地址项目站点依附于任意普通仓库访问地址https://你的用户名.github.io/仓库名/用户/组织站点仓库名必须为你的用户名.github.io访问地址https://你的用户名.github.io/一个账号只能有一个2. 最简搭建纯 HTML 项目站点无需任何构建工具3 分钟即可上线。步骤 1准备仓库与页面在 GitHub 新建一个仓库或使用已有仓库比如命名为my-demo-site在仓库根目录新建index.html写入简单的网页内容!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的GitHub Pages站点/title /head body h1Hello GitHub Pages!/h1 p这是我的第一个静态网站。/p /body /html提交并推送到远程main分支。步骤 2开启 Pages 服务进入仓库页面点击顶部Settings左侧菜单找到Pages在 Code and automation 分类下Build and deployment→Source选择Deploy from a branchBranch 选择main分支文件夹选择/ (root)点击Save等待 1-2 分钟刷新页面即可看到生成的站点地址步骤 3访问验证打开https://你的用户名.github.io/my-demo-site/即可看到你的网页。3. 个人主页站点username.github.io搭建方式和上面完全一致只有两点不同仓库名必须严格为你的用户名.github.io比如zhangsan.github.io访问地址直接是https://你的用户名.github.io/没有后缀路径4. 进阶绑定自定义域名如果你有自己的域名可以替换默认的 github.io 地址在仓库根目录新建CNAME文件全大写无后缀内容只写你的域名例如www.example.com提交推送到远程去你的域名服务商后台添加 DNS 解析若用子域名如 www添加 CNAME 记录指向你的用户名.github.io若用根域名添加 A 记录指向 GitHub Pages 官方最新 IP 地址回到仓库 Pages 设置页勾选Enforce HTTPS开启强制 HTTPS5. 常用静态生成器GitHub Pages 原生支持静态站点生成工具常见的有JekyllGitHub 官方原生支持无需额外配置Hexo、Hugo、VitePress、Docsify 等需配合 GitHub Actions 自动构建部署附件三GitHub Actions 自动化部署实战GitHub Actions 是 GitHub 内置的 CI/CD 自动化工具可以在你提交代码后自动执行构建、测试、部署等流程。1. 核心概念Workflow工作流一个完整的自动化流程对应一个.yml配置文件Job作业工作流中的一个执行单元包含多个步骤Step步骤具体执行的命令或动作Runner运行器执行任务的服务器GitHub 提供免费的 Ubuntu/Windows/macOS 运行环境工作流文件必须放在仓库的.github/workflows/目录下。2. 实战前端项目自动构建部署到 Pages以 Vite 构建的 Vue/React 项目为例实现「提交代码 → 自动构建 → 自动部署到 GitHub Pages」全流程。前置条件项目是需要构建的前端工程有 package.json执行npm run build会生成dist目录仓库已推送到 GitHub步骤 1修改 Pages 部署源进入仓库 Settings → PagesSource从「Deploy from a branch」改为GitHub Actions保存步骤 2创建工作流配置文件在项目根目录创建路径.github/workflows/deploy-pages.yml写入以下配置# 工作流名称 name: 部署到 GitHub Pages # 触发条件推送到 main 分支时自动执行 on: push: branches: - main # 支持手动触发 workflow_dispatch: # 设置权限允许部署 Pages permissions: contents: read pages: write id-token: write # 确保只有一个并发部署 concurrency: group: pages cancel-in-progress: false jobs: # 1. 构建任务 build: runs-on: ubuntu-latest steps: - name: 检出代码 uses: actions/checkoutv4 - name: 安装 Node.js uses: actions/setup-nodev4 with: node-version: 20 cache: npm - name: 安装依赖 run: npm ci - name: 构建项目 run: npm run build - name: 上传构建产物 uses: actions/upload-pages-artifactv3 with: path: ./dist # 2. 部署任务 deploy: needs: build runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: 部署到 GitHub Pages id: deployment uses: actions/deploy-pagesv4步骤 3项目路径适配项目站点必做如果是项目站点地址带/仓库名后缀需要在构建配置中添加基础路径否则静态资源会 404。以 Vite 项目为例修改vite.config.js添加base配置export default { // 替换为你的仓库名前后都要有斜杠 base: /你的仓库名/, // 其他配置... }如果是用户站点username.github.io则无需修改。步骤 4提交并触发自动部署将工作流文件和配置修改提交推送到main分支git add . git commit -m feat: 添加自动部署工作流 git push3. 查看运行状态进入仓库页面点击顶部Actions标签可以看到正在运行或已完成的工作流点击对应工作流可查看详细执行日志失败时可根据报错排查问题部署成功后即可通过 Pages 地址访问你的网站后续每次提交代码到 main 分支都会自动触发重新构建部署。4. 其他常用场景自动运行测试在 build 步骤中添加npm run test实现提交代码自动跑单测多环境部署区分开发环境、生产环境推送到不同分支触发不同部署发布 npm 包打 tag 时自动发布到 npm 仓库
返回列表