实战项目：个人博客版本管理

通过实际项目学习 Git 版本控制，从初始化到部署的完整流程

⏱️ 30 分钟📊 实战📅 2024/1/11
实战博客部署

项目概述

我们将创建一个简单的个人博客项目，学习：

  • 🏗️ 项目初始化
  • 📝 内容管理
  • 🌿 分支策略
  • 🚀 自动化部署
  • 🔄 协作工作流

项目结构

my-blog/
├── .git/
├── .gitignore
├── README.md
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── posts/
│   ├── 2024-01-01-first-post.md
│   └── 2024-01-02-second-post.md
└── images/
    └── avatar.jpg

第一步：初始化项目

# 创建项目目录
mkdir my-blog
cd my-blog

# 初始化 Git
git init

# 创建 .gitignore
cat > .gitignore << EOF
.DS_Store
*.log
node_modules/
.env
EOF

# 创建 README
cat > README.md << EOF
# My Personal Blog

一个简单的个人博客网站。

## 技术栈

- HTML5
- CSS3
- JavaScript

## 本地运行

直接打开 index.html 文件即可。
EOF

# 提交
git add .
git commit -m "初始化博客项目"

第二步：创建基础文件

# 创建主页
cat > index.html << EOF
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>我的个人博客</h1>
        <nav>
            <a href="#home">首页</a>
            <a href="#posts">文章</a>
            <a href="#about">关于</a>
        </nav>
    </header>
    <main id="posts"></main>
    <script src="js/main.js"></script>
</body>
</html>
EOF

# 创建样式
mkdir css
cat > css/style.css << EOF
body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 40px;
}

nav a {
    margin: 0 10px;
    text-decoration: none;
}
EOF

# 创建脚本
mkdir js
cat > js/main.js << EOF
console.log('Blog loaded!');
EOF

# 提交
git add .
git commit -m "添加博客基础文件"

第三步：使用分支开发新功能

创建新文章功能

# 创建功能分支
git checkout -b feature/add-posts

# 创建文章目录
mkdir posts

# 添加第一篇文章
cat > posts/2024-01-01-first-post.md << EOF
# 我的第一篇博客

今天开始写博客了！

## 为什么写博客

- 记录学习
- 分享知识
- 提升写作能力

## 下一步计划

- 学习更多技术
- 持续更新内容
EOF

# 提交
git add posts/
git commit -m "添加第一篇博客文章"

# 更新 JS 加载文章
cat >> js/main.js << EOF

// 加载文章列表
async function loadPosts() {
    const posts = [
        { title: '我的第一篇博客', date: '2024-01-01', file: 'first-post' }
    ];

    const postsContainer = document.getElementById('posts');
    posts.forEach(post => {
        const article = document.createElement('article');
        article.innerHTML = \`
            <h2>\${post.title}</h2>
            <p class="date">\${post.date}</p>
        \`;
        postsContainer.appendChild(article);
    });
}

loadPosts();
EOF

# 提交
git add js/main.js
git commit -m "添加文章加载功能"

# 合并到主分支
git checkout main
git merge feature/add-posts

# 删除功能分支
git branch -d feature/add-posts

第四步：添加样式优化

# 创建样式分支
git checkout -b feature/improve-styles

# 更新样式
cat >> css/style.css << EOF

article {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

article h2 {
    color: #333;
    margin-bottom: 10px;
}

.date {
    color: #999;
    font-size: 14px;
}
EOF

# 提交
git add css/style.css
git commit -m "优化文章列表样式"

# 合并
git checkout main
git merge feature/improve-styles
git branch -d feature/improve-styles

第五步：添加 GitHub Actions 自动部署

# 创建 GitHub Actions 配置
mkdir -p .github/workflows
cat > .github/workflows/deploy.yml << EOF
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: \${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./
EOF

# 提交
git add .github/
git commit -m "添加 GitHub Pages 自动部署"

第六步：推送到 GitHub

# 在 GitHub 创建仓库后
git remote add origin https://github.com/yourusername/my-blog.git

# 推送
git push -u origin main

分支策略

主分支

  • main: 生产环境代码

功能分支

  • feature/*: 新功能开发
  • fix/*: Bug 修复
  • docs/*: 文档更新

工作流

# 开发新功能
git checkout -b feature/new-feature
# 开发...
git commit -m "完成新功能"

# 回到 main
git checkout main
git merge feature/new-feature
git push

日常维护

添加新文章

# 创建文章
cat > posts/$(date +%Y-%m-%d)-new-post.md << EOF
# 新文章标题
内容...
EOF

# 提交
git add posts/
git commit -m "发布新文章: 文章标题"
git push

修复 Bug

# 创建修复分支
git checkout -b fix/typo-in-post

# 修复...
git commit -m "修复文章中的拼写错误"

# 合并并推送
git checkout main
git merge fix/typo-in-post
git push

协作场景

场景 1: 接受他人贡献

# 他人 fork 并提交 PR

# 你拉取审查
git fetch origin pull/123/head:pr-123
git checkout pr-123

# 审查通过后合并
git checkout main
git merge pr-123
git push

场景 2: 多人协作

# 拉取最新代码
git pull origin main

# 创建功能分支
git checkout -b feature/my-work

# 开发...
# 定期同步主分支
git fetch origin
git rebase origin/main

# 完成后推送
git push origin feature/my-work

版本标签

# 发布版本
git tag -a v1.0.0 -m "第一个正式版本"
git push origin v1.0.0

# 查看所有版本
git tag

# 切换到某个版本
git checkout v1.0.0

项目扩展

1. 添加评论系统

git checkout -b feature/comments
# 集成 Giscus 或 Disqus
git commit -m "添加评论功能"
git checkout main
git merge feature/comments

2. SEO 优化

git checkout -b feature/seo
# 添加 meta 标签、sitemap
git commit -m "SEO 优化"
git checkout main
git merge feature/seo

3. 性能优化

git checkout -b feature/performance
# 压缩图片、懒加载
git commit -m "性能优化"
git checkout main
git merge feature/performance

小结

通过这个实战项目，你学会了：

  • ✅ 从零搭建项目
  • ✅ 使用分支管理功能
  • ✅ 提交规范的commit
  • ✅ 自动化部署
  • ✅ 团队协作流程

这些技能适用于任何项目！

下一步

  • 添加更多功能
  • 尝试使用 Git Flow
  • 学习 CI/CD
  • 探索 GitHub Actions

继续实践，提升技能！🚀

这篇教程有帮助吗？