跳到主要内容

1 篇博文 含有标签「GitHub Pages」

查看所有标签

2 小时从零部署个人网站到 GitHub Pages

· 阅读需 5 分钟

从零开始，在 2 小时内部署你的个人网站到 GitHub Pages，完全免费！

一句话总结​

跟着我一步步操作，2 小时内搞定个人网站部署，适合完全小白的你。

核心笔记​

  • 注册 GitHub 账户
  • 创建 GitHub Pages 仓库
  • 使用 OpenCode 创建项目
  • 配置 glm-4.7 模型
  • 编写和发布页面

学完你能做什么​

完成本教程后，你将能够：

  • 拥有属于自己的个人网站
  • 使用 AI 辅助编程
  • 掌握 GitHub Pages 部署流程
  • 学会自然语言编程

你现在的困境​

  • 没有编程基础，不知道如何开始
  • 想要个人网站但不知如何部署
  • 看到各种教程无从下手
  • 害怕操作复杂，怕出错

什么时候用这一招​

  • 想要搭建个人博客或作品集
  • 需要学习网站部署流程
  • 想要实践 AI 编程
  • 完全零基础，需要详细教程

核心思路​

GitHub Pages 提供免费的静态网站托管服务，我们只需要：

  1. 注册 GitHub 账户
  2. 创建一个仓库
  3. 使用 OpenCode 生成网站代码
  4. 推送代码到 GitHub，自动部署

跟我做​

步骤 1：注册 GitHub 账户（5 分钟）​

  1. 访问 https://github.com
  2. 点击右上角的"Sign up"按钮
  3. 选择注册方式：
    • 邮箱注册
    • Google 账号登录
  4. 填写用户名（这个会出现在你的网站地址中）
  5. 完成邮箱验证

注意： 记住你的用户名，后续会用到！

步骤 2：安装和配置 OpenCode（20 分钟）​

2.1 下载 OpenCode​

访问 OpenCode 官网下载并安装最新版本。

2.2 配置 glm-4.7 模型​

  1. 打开 OpenCode
  2. 进入设置 → 模型配置
  3. 添加 glm-4.7 模型：
    • 模型名称：glm-4.7
    • API 地址：根据实际情况填写
    • 模型版本：最新稳定版

2.3 先看 Start 教程​

在 OpenCode 中查看 Start 教程，熟悉基本操作：

  • 如何创建新项目
  • 如何使用自然语言编写代码
  • 如何预览和测试代码

步骤 3：创建个人网站项目（30 分钟）​

打开 OpenCode，使用自然语言描述需求：

请帮我创建一个简洁的个人网站，包含以下内容：
- 首页：自我介绍、联系方式、作品展示
- 设计风格：简洁现代，响应式设计
- 技术栈：HTML + CSS + JavaScript
- 包含导航栏和页脚

OpenCode 会自动生成代码，你可以：

  1. 审查生成的代码
  2. 提出修改意见
  3. 要求添加更多功能

步骤 4：创建 GitHub Pages 仓库（10 分钟）​

  1. 登录 GitHub
  2. 点击右上角的 "+" 按钮
  3. 选择 "New repository"
  4. 仓库名称格式：你的用户名.github.io
    • 例如：zhangsan.github.io
  5. 设置为 Public（公开）
  6. 点击 "Create repository"

重要： 仓库名称必须是 用户名.github.io 格式！

步骤 5：创建网站文件（15 分钟）​

在 OpenCode 中，根据之前生成的代码，创建以下文件结构：

你的项目文件夹/
├── index.html        # 首页
├── css/
│   └── style.css    # 样式文件
├── js/
│   └── main.js      # JavaScript 文件
└── img/             # 图片资源

在 OpenCode 中生成每个文件的内容。

步骤 6：推送代码到 GitHub（15 分钟）​

6.1 初始化 Git​

在你的本地项目文件夹中，打开命令行：

# 初始化 Git 仓库
git init

# 添加所有文件
git add .

# 提交代码
git commit -m "初次部署个人网站"

6.2 关联 GitHub 仓库​

# 添加远程仓库地址（替换成你的用户名）
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git

# 推送代码到 GitHub
git push -u origin main

如果遇到错误，尝试使用：

git branch -M main
git push -u origin main

步骤 7：等待部署（10 分钟）​

GitHub Pages 会自动检测到 用户名.github.io 仓库，并开始部署。

  1. 访问 https://你的用户名.github.io
  2. 等待 1-2 分钟
  3. 刷新页面，你的网站就上线了！

查看部署状态：

  • 进入仓库 → Settings → Pages
  • 查看部署状态和历史

步骤 8：更新和迭代（随时）​

网站部署后，你可以随时更新：

  1. 在 OpenCode 中修改内容
  2. 提交更改：git add . && git commit -m "更新内容"
  3. 推送到 GitHub：git push
  4. 等待自动部署完成

检查点​

✔ 成功注册 GitHub 账户 ✔ 下载并配置了 OpenCode ✔ 添加了 glm-4.7 模型 ✔ 熟悉了 Start 教程 ✔ 创建了个人网站项目 ✔ 创建了 GitHub Pages 仓库 ✔ 成功推送代码到 GitHub ✔ 访问你的网站正常显示

踩坑提醒​

问题 1：仓库名称错误​

问题： 网站无法访问，显示 404 错误

原因： 仓库名称不是 用户名.github.io 格式

解决： 检查仓库名称，确保格式正确

问题 2：推送代码失败​

问题： 执行 git push 时报错

原因： 网络问题或权限问题

解决：

  • 检查网络连接
  • 确认 GitHub 账户和权限
  • 尝试使用 SSH 而不是 HTTPS

问题 3：网站部署慢​

问题： 推送代码后网站很久才更新

原因： GitHub Pages 部署需要时间

解决： 耐心等待 1-2 分钟，或查看 Pages 设置中的部署状态

问题 4：OpenCode 生成的代码有问题​

问题： 生成的代码不能正常运行

原因： 需求描述不够详细

解决： 更详细地描述需求，提供更多上下文信息

本课小结​

恭喜你！🎉

你现在拥有了：

  • 一个完全免费的个人网站
  • 掌握了 GitHub Pages 部署技能
  • 学会了使用 OpenCode + glm-4.7 编程
  • 可以随时更新和改进你的网站

下一课预告​

下一篇文章将介绍如何使用 OpenCode 实现更多高级功能，比如添加博客系统、评论功能等，敬请期待！