GitHub新建项目实战教程零基础创建代码仓库掌握版本控制核心技能

威震华夏关云长

GitHub新建项目实战教程零基础创建代码仓库掌握版本控制核心技能

什么是GitHub

GitHub是一个基于Git的代码托管平台，它为开发者提供了强大的版本控制功能和协作工具。通过GitHub，你可以：

• 存储和管理你的代码
• 跟踪代码的变更历史
• 与其他开发者协作
• 参与开源项目
• 展示你的技能和项目

GitHub不仅是一个代码仓库，更是全球最大的开发者社区之一。无论你是初学者还是经验丰富的开发者，GitHub都是你不可或缺的工具。

注册GitHub账号

在开始使用GitHub之前，你需要先注册一个账号：

1. 打开GitHub官网：https://github.com
2. 点击右上角的”Sign up”按钮
3. 输入你的用户名、邮箱地址和密码
4. 选择是否接收产品更新和公告
5. 验证你的邮箱地址
6. 完成简单的验证步骤

注册完成后，你就可以登录GitHub并开始创建你的第一个项目了。

创建新的代码仓库

创建一个新的代码仓库（Repository）是使用GitHub的第一步。按照以下步骤操作：

1. 登录GitHub账号
2. 点击页面右上角的”+“图标，选择”New repository”
3. 填写仓库信息：Repository name：为你的仓库起一个名字，例如”my-first-project”Description（可选）：添加简短的描述，说明这个仓库的用途Public/Private：选择仓库类型。Public仓库对所有人可见，Private仓库只有你和你授权的人才能看到Initialize this repository with a README：勾选此项会自动创建一个README文件，这是一个好习惯Add .gitignore：选择适合你项目的.gitignore模板，它会告诉Git哪些文件不需要跟踪Choose a license：为你的项目选择一个开源许可证
4. Repository name：为你的仓库起一个名字，例如”my-first-project”
5. Description（可选）：添加简短的描述，说明这个仓库的用途
6. Public/Private：选择仓库类型。Public仓库对所有人可见，Private仓库只有你和你授权的人才能看到
7. Initialize this repository with a README：勾选此项会自动创建一个README文件，这是一个好习惯
8. Add .gitignore：选择适合你项目的.gitignore模板，它会告诉Git哪些文件不需要跟踪
9. Choose a license：为你的项目选择一个开源许可证
10. 点击”Create repository”按钮完成创建

登录GitHub账号

点击页面右上角的”+“图标，选择”New repository”

填写仓库信息：

• Repository name：为你的仓库起一个名字，例如”my-first-project”
• Description（可选）：添加简短的描述，说明这个仓库的用途
• Public/Private：选择仓库类型。Public仓库对所有人可见，Private仓库只有你和你授权的人才能看到
• Initialize this repository with a README：勾选此项会自动创建一个README文件，这是一个好习惯
• Add .gitignore：选择适合你项目的.gitignore模板，它会告诉Git哪些文件不需要跟踪
• Choose a license：为你的项目选择一个开源许可证

点击”Create repository”按钮完成创建

创建完成后，你会看到仓库的主页面，其中包含README文件（如果你选择了初始化仓库）。

安装和配置Git

要在本地计算机上与GitHub仓库交互，你需要安装Git工具。

Windows系统：

1. 访问Git官网：https://git-scm.com/download/win
2. 下载并运行安装程序
3. 按照安装向导的提示完成安装（可以使用默认设置）

macOS系统：

1. 如果已安装Homebrew，运行命令：brew install git
2. 或者从官网下载安装程序：https://git-scm.com/download/mac

Linux系统（以Ubuntu为例）：

2. sudo apt update
3. sudo apt install git

复制代码

安装完成后，打开终端（Windows用户可以使用Git Bash）并配置你的用户信息：

2. # 配置用户名
3. git config --global user.name "你的GitHub用户名"
5. # 配置邮箱
6. git config --global user.email "你的GitHub注册邮箱"

复制代码

这些信息会出现在你提交的记录中，所以确保使用与GitHub账号相同的信息。

运行以下命令验证Git是否安装成功：

2. git --version

复制代码

如果显示Git的版本号，说明安装成功。

基本的Git命令操作

Git是一个分布式版本控制系统，它通过一系列命令来管理代码的版本。下面是一些最基本的Git命令：

在本地创建一个新文件夹，并在其中初始化Git仓库：

2. # 创建项目文件夹
3. mkdir my-local-project
4. cd my-local-project
6. # 初始化Git仓库
7. git init

复制代码

创建一个新文件并添加到Git暂存区：

2. # 创建一个新文件
3. echo "# 我的第一个项目" > README.md
5. # 查看仓库状态
6. git status
8. # 添加文件到暂存区
9. git add README.md
11. # 或者添加所有文件
12. git add .

复制代码

将暂存区的文件提交到本地仓库：

2. # 提交更改并添加提交信息
3. git commit -m "添加README文件"

复制代码

提交信息应该简洁明了，描述这次提交做了什么。

查看仓库的提交历史：

2. # 查看提交历史
3. git log
5. # 查看简洁的提交历史
6. git log --oneline

复制代码

将本地代码推送到GitHub

现在你已经学会了基本的Git命令，接下来我们将本地仓库与GitHub仓库关联，并将代码推送到GitHub。

1. 在GitHub上创建一个新的仓库（如前所述）
2. 复制仓库的URL（HTTPS或SSH格式）
3. 在本地仓库中添加远程仓库：

2. # 添加远程仓库
3. git remote add origin https://github.com/你的用户名/你的仓库名.git

复制代码

将本地代码推送到GitHub：

2. # 推送代码到GitHub的main分支
3. git push -u origin main

复制代码

如果你使用的是旧版本的Git，默认分支可能是master，那么命令应该是：

2. git push -u origin master

复制代码

-u参数会将本地分支与远程分支关联，以后可以直接使用git push命令推送。

如果其他人对GitHub仓库进行了更改，你可以使用以下命令获取最新代码：

2. git pull origin main

复制代码

克隆现有仓库

如果你想参与一个已有的项目，或者在其他设备上继续你的工作，你可以克隆（clone）现有的仓库：

2. git clone https://github.com/用户名/仓库名.git

复制代码

这会在当前目录下创建一个与仓库同名的文件夹，并下载所有文件和历史记录。

分支管理

分支是Git的强大功能之一，它允许你在不影响主线（main/master分支）的情况下开发新功能或修复bug。

2. # 创建一个新分支
3. git branch feature-branch
5. # 切换到新分支
6. git checkout feature-branch
8. # 或者创建并切换到新分支（一步完成）
9. git checkout -b feature-branch

复制代码

当你在分支上完成工作后，可以将其合并回主分支：

2. # 切换回主分支
3. git checkout main
5. # 合并feature-branch到主分支
6. git merge feature-branch

复制代码

合并完成后，可以删除不再需要的分支：

2. # 删除本地分支
3. git branch -d feature-branch
5. # 删除远程分支
6. git push origin --delete feature-branch

复制代码

解决合并冲突

当多个人修改同一文件的同一部分时，可能会发生合并冲突。解决冲突的步骤如下：

1. 尝试合并分支，Git会提示冲突的文件
2. 打开冲突的文件，查找标记为<<<<<<<,=======,>>>>>>>的部分
3. 手动编辑文件，保留需要的代码，删除冲突标记
4. 保存文件并标记为已解决：git add 冲突文件名
5. 完成合并：git commit

2. git add 冲突文件名

复制代码

2. git commit

复制代码

实战项目：创建一个简单的网页项目

让我们通过一个实际项目来巩固所学知识。我们将创建一个简单的网页项目并推送到GitHub。

1. 登录GitHub，点击”+“图标，选择”New repository”
2. 仓库名称：simple-website
3. 描述：一个简单的网页项目
4. 选择”Public”
5. 勾选”Initialize this repository with a README”
6. 点击”Create repository”

2. git clone https://github.com/你的用户名/simple-website.git
3. cd simple-website

复制代码

创建以下文件结构：

2. simple-website/
3. ├── index.html
4. ├── css/
5. │   └── style.css
6. └── js/
7.     └── script.js

复制代码

index.html:

2. <!DOCTYPE html>
3. <html lang="zh-CN">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>我的简单网站</title>
8.     <link rel="stylesheet" href="css/style.css">
9. </head>
10. <body>
11.     <header>
12.         <h1>欢迎来到我的网站</h1>
13.     </header>
14.     <main>
15.         <p>这是一个使用GitHub创建的简单网站项目。</p>
16.         <button id="changeColor">改变背景颜色</button>
17.     </main>
18.     <footer>
19.         <p>&copy; 2023 我的简单网站</p>
20.     </footer>
21.     <script src="js/script.js"></script>
22. </body>
23. </html>

复制代码

css/style.css:

2. body {
3.     font-family: Arial, sans-serif;
4.     line-height: 1.6;
5.     margin: 0;
6.     padding: 0;
7.     background-color: #f4f4f4;
8. }
10. header {
11.     background-color: #333;
12.     color: #fff;
13.     padding: 1rem;
14.     text-align: center;
15. }
17. main {
18.     padding: 2rem;
19.     text-align: center;
20. }
22. footer {
23.     background-color: #333;
24.     color: #fff;
25.     padding: 1rem;
26.     text-align: center;
27.     position: fixed;
28.     bottom: 0;
29.     width: 100%;
30. }
32. button {
33.     padding: 10px 15px;
34.     background-color: #4CAF50;
35.     color: white;
36.     border: none;
37.     border-radius: 4px;
38.     cursor: pointer;
39. }
41. button:hover {
42.     background-color: #45a049;
43. }

复制代码

js/script.js:

2. document.getElementById('changeColor').addEventListener('click', function() {
3.     const colors = ['#f4f4f4', '#e8f5e9', '#e3f2fd', '#fff3e0', '#f3e5f5'];
4.     const randomColor = colors[Math.floor(Math.random() * colors.length)];
5.     document.body.style.backgroundColor = randomColor;
6. });

复制代码

2. # 添加所有文件到暂存区
3. git add .
5. # 提交更改
6. git commit -m "添加网站基本结构和功能"
8. # 推送到GitHub
9. git push origin main

复制代码

2. # 创建并切换到新分支
3. git checkout -b add-about-page
5. # 创建关于页面
6. mkdir about
7. echo '<!DOCTYPE html>
8. <html lang="zh-CN">
9. <head>
10.     <meta charset="UTF-8">
11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
12.     <title>关于我们 - 我的简单网站</title>
13.     <link rel="stylesheet" href="../css/style.css">
14. </head>
15. <body>
16.     <header>
17.         <h1>关于我们</h1>
18.     </header>
19.     <main>
20.         <p>这是关于页面的内容。我们是一个致力于创建简单而有效网站的团队。</p>
21.         <a href="../index.html">返回首页</a>
22.     </main>
23.     <footer>
24.         <p>&copy; 2023 我的简单网站</p>
25.     </footer>
26. </body>
27. </html>' > about/index.html
29. # 提交更改
30. git add .
31. git commit -m "添加关于页面"
33. # 推送分支到GitHub
34. git push origin add-about-page

复制代码

2. # 切换回主分支
3. git checkout main
5. # 合并分支
6. git merge add-about-page
8. # 推送到GitHub
9. git push origin main

复制代码

GitHub Pages：托管你的网站

GitHub提供了免费的静态网站托管服务GitHub Pages，你可以用它来托管你的项目网站。

1. 在GitHub仓库页面，点击”Settings”
2. 滚动到”GitHub Pages”部分
3. 在”Source”下，选择”main branch”或”master branch”
4. 点击”Save”

几分钟后，你的网站将在以下URL可用：https://你的用户名.github.io/仓库名

常见问题解决方法

当你尝试推送或拉取代码时，可能会遇到认证问题。GitHub已经不再支持密码认证，推荐使用个人访问令牌（Personal Access Token, PAT）或SSH密钥。

创建个人访问令牌：

1. 登录GitHub，点击右上角的头像，选择”Settings”
2. 在左侧菜单中，点击”Developer settings”
3. 选择”Personal access tokens”，然后点击”Tokens (classic)”
4. 点击”Generate new token”
5. 输入令牌名称，选择过期时间，勾选需要的权限（至少需要repo权限）
6. 点击”Generate token”
7. 复制生成的令牌（只显示一次，请妥善保存）

使用令牌时，在提示输入密码时输入这个令牌。

这个错误表示当前目录不是Git仓库。解决方法：

2. # 如果应该是一个Git仓库，初始化它
3. git init
5. # 如果你想克隆一个现有仓库
6. git clone https://github.com/用户名/仓库名.git

复制代码

这个错误通常发生在远程仓库有本地没有的更改时。解决方法：

2. # 先拉取远程更改
3. git pull origin main
5. # 解决可能的冲突后，再次推送
6. git push origin main

复制代码

如果你需要撤销最近的提交：

2. # 撤销提交但保留更改
3. git reset --soft HEAD~1
5. # 撤销提交并丢弃更改
6. git reset --hard HEAD~1

复制代码

进阶技巧

.gitignore文件告诉Git哪些文件或目录不需要跟踪。创建一个.gitignore文件：

2. # 创建.gitignore文件
3. touch .gitignore

复制代码

然后添加需要忽略的文件或目录，例如：

2. # 依赖目录
3. node_modules/
5. # 环境文件
6. .env
8. # IDE文件
9. .vscode/
10. .idea/
12. # 操作系统生成的文件
13. .DS_Store
14. Thumbs.db

复制代码

标签用于标记重要的版本，如发布版本：

2. # 创建轻量标签
3. git tag v1.0.0
5. # 创建带注释的标签
6. git tag -a v1.0.0 -m "版本1.0.0发布"
8. # 推送标签到远程仓库
9. git push origin v1.0.0
11. # 推送所有标签
12. git push origin --tags

复制代码

GitHub CLI是一个命令行工具，让你可以直接在终端中与GitHub交互。

安装GitHub CLI：

• Windows: 下载并运行安装程序：https://github.com/cli/cli/releases
• macOS:brew install gh
• Linux: 参考官方文档

使用GitHub CLI创建仓库：

2. # 登录GitHub
3. gh auth login
5. # 创建新仓库
6. gh repo create my-new-repo --public --source=. --remote=origin --push

复制代码

总结

通过本教程，你已经学会了：

1. 注册和设置GitHub账号
2. 创建和管理GitHub仓库
3. 安装和配置Git
4. 使用基本的Git命令
5. 将本地代码推送到GitHub
6. 管理分支和解决合并冲突
7. 创建一个简单的网页项目
8. 使用GitHub Pages托管网站
9. 解决常见问题
10. 一些进阶技巧

GitHub是一个强大的工具，掌握它将大大提高你的开发效率和协作能力。继续探索GitHub的更多功能，如Issues、Pull Requests、Actions等，你会发现它能为你的项目带来更多可能性。

记住，熟能生巧。多使用GitHub和Git，通过实际项目来巩固你的知识。祝你在GitHub的旅程中取得成功！