【建站/Gitee】Gitee Pages 快速搭建个人静态网站指南
1. 为什么选择Gitee Pages搭建个人网站
最近几年，个人网站越来越受欢迎，无论是用来展示作品集、写技术博客，还是作为个人品牌的门面，一个专属的网站都能带来不少便利。但对于很多非专业开发者来说，搭建网站听起来就很复杂，需要购买服务器、配置环境、维护安全等等，门槛实在太高。
这就是为什么我推荐使用Gitee Pages来搭建静态网站。Gitee Pages是Gitee（码云）提供的一项免费服务，可以让你直接把代码仓库变成可访问的网站。我自己的技术博客就是用这个方案搭建的，实测下来特别适合个人使用，有这几个明显优势：
- 完全免费：不需要租用服务器，Gitee提供免费的托管服务
- 操作简单：只需要会基本的Git操作，不需要后端开发知识
- 访问稳定：国内访问速度快，不像某些国外服务经常抽风
- 支持自定义域名：虽然免费，但可以绑定自己的域名，看起来很专业
我见过很多设计师用Gitee Pages搭建作品集，也有程序员用来写技术博客，甚至有些小团队用它来做产品官网。如果你需要一个轻量级的网站，又不想折腾复杂的服务器配置，这个方案绝对值得一试。
2. 前期准备工作
2.1 注册Gitee账号
首先你需要一个Gitee账号，这是使用Gitee Pages的前提条件。打开Gitee官网，点击右上角的"注册"按钮，按照提示填写邮箱、用户名和密码。
这里有个小建议：用户名尽量简洁好记，因为这会成为你默认网站地址的一部分。比如你的用户名是"zhangsan"，那么默认的网站地址就是"zhangsan.gitee.io"。我见过有人用很长的用户名，结果分享网站时特别不方便。
注册完成后，记得去邮箱验证账号，这是必须的步骤。如果收不到验证邮件，检查下垃圾邮件箱，有时候会被误判。
2.2 安装Git工具
虽然Gitee网页端也能完成一些基本操作，但我强烈建议你在本地电脑安装Git工具。这样后续更新网站内容会方便很多。
Windows用户可以直接下载Git for Windows，安装时记得勾选"Add to PATH"选项，这样可以在命令行直接使用Git。Mac用户更简单，系统自带Git，只需要打开终端(Terminal)就能用。
安装完成后，打开命令行工具，输入以下命令检查是否安装成功：
git --version如果看到类似"git version 2.32.0"的输出，说明安装正确。顺便建议配置下Git的全局用户名和邮箱，这样提交代码时会自动记录作者信息：
git config --global user.name "你的名字" git config --global user.email "你的邮箱"3. 创建网站仓库
3.1 新建仓库
登录Gitee后，点击右上角的"+"号，选择"新建仓库"。这里有几个关键设置需要注意：
- 仓库名称：建议直接用"用户名.gitee.io"的格式，比如我的用户名是zhangsan，就填"zhangsan.gitee.io"。这是Gitee Pages的默认命名规则，用这种格式仓库会自动开启Pages功能。
- 公开/私有：选择"公开"，私有仓库不支持Pages服务
- 初始化仓库：勾选"使用README文件初始化仓库"，这样创建后就有个基础结构
其他设置保持默认即可，点击"创建"按钮完成仓库创建。
3.2 仓库结构说明
创建完成后，你会看到一个全新的仓库。对于静态网站来说，通常只需要关注这几个文件和目录：
- index.html：网站的首页文件，访问域名时默认加载这个文件
- README.md：仓库的说明文档，不会显示在网站上
- 其他资源文件：比如CSS样式表、JavaScript脚本、图片等可以放在单独的目录中
我建议一开始保持结构简单，先只放一个index.html文件，等熟悉了再慢慢添加其他内容。这样出问题的概率小，也方便调试。
4. 编写网站内容
4.1 创建首页文件
现在我们来创建网站的第一个页面。点击仓库中的"新建文件"按钮，文件名填"index.html"，这是网站的默认入口文件。
在编辑器中输入以下基础HTML代码：
<!DOCTYPE html> <html> <head> <title>我的个人网站</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #333; } </style> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是我的第一个Gitee Pages网站，正在建设中...</p> </body> </html>这段代码创建了一个非常简单的页面，包含一个标题和一段文字。点击"提交"按钮保存文件，记得填写有意义的提交信息，比如"添加首页HTML文件"。
4.2 本地开发工作流
虽然可以直接在网页端编辑文件，但对于长期维护来说，我建议采用本地开发的工作流。具体步骤如下：
- 在本地电脑创建一个项目文件夹
- 打开命令行，进入这个文件夹
- 执行以下命令克隆仓库：
git clone https://gitee.com/你的用户名/你的仓库名.git- 在本地编辑文件，比如用VS Code等编辑器修改index.html
- 修改完成后，依次执行以下命令提交更改：
git add . git commit -m "更新网站内容" git push origin master这样每次更新网站内容只需要这三条命令，非常方便。我自己的博客就是用这种方式维护的，写新文章时先本地写好，测试没问题再推送到Gitee。
5. 启用Gitee Pages服务
5.1 开启Pages功能
有了网站内容后，现在需要开启Gitee Pages服务。进入你的仓库，点击上方菜单中的"服务"，选择"Gitee Pages"。
在打开的页面中，你会看到几个选项：
- 部署分支：选择master（默认）
- 部署目录：保持默认的"/"（根目录）
- 强制使用HTTPS：建议勾选，更安全
点击"启动"按钮，稍等片刻，Gitee就会开始构建你的网站。第一次构建可能需要1-2分钟，之后每次更新内容后的构建会快很多。
5.2 访问你的网站
构建完成后，页面会显示你的网站地址，通常是"用户名.gitee.io"的格式。点击这个链接，就能看到你刚创建的网站了！
如果看到的是404页面，别着急，可能是构建还没完成，等1-2分钟刷新试试。我遇到过几次这种情况，耐心等待就好。
6. 进阶配置与优化
6.1 使用自定义域名
虽然Gitee提供的域名已经很好用了，但如果你想用自己购买的域名，也是支持的。具体操作步骤：
- 在域名服务商那里添加CNAME记录，指向你的Gitee Pages地址
- 在仓库根目录添加一个名为"CNAME"的文件，内容是你的域名
- 在Gitee Pages设置中绑定这个域名
我自己的博客就是用的自定义域名，实测访问很稳定。不过要注意的是，国内使用自定义域名需要备案，这是规定要求。
6.2 使用静态网站生成器
如果网站内容越来越多，手动维护HTML文件会很麻烦。这时候可以考虑使用静态网站生成器，比如Hexo、Hugo或VuePress。
以Hexo为例，安装后只需要写Markdown格式的文章，Hexo会自动生成完整的网站结构。部署到Gitee Pages也很简单，安装hexo-deployer-git插件后，一条命令就能完成部署：
hexo deploy我的技术博客就是用Hexo搭建的，写文章特别方便，还能自动生成分类、标签等功能。如果你打算长期维护网站，建议早点切换到这类工具。
6.3 添加网站统计
想知道有多少人访问你的网站吗？可以添加百度统计或者Google Analytics。以百度统计为例，注册后获取统计代码，然后添加到网站的HTML文件中，通常是放在
标签内。添加统计后，你就能看到访问量、来源、用户行为等数据了。我每周都会看看博客的统计数据，了解哪些内容更受欢迎，对调整写作方向很有帮助。
7. 常见问题与解决方案
7.1 网站更新后不生效
有时候推送了新内容，但访问网站发现还是旧版本。这种情况通常有几个原因：
- Gitee Pages构建需要时间，尤其是第一次构建可能比较慢
- 浏览器缓存了旧版本，可以尝试强制刷新（Ctrl+F5）
- 可能是构建失败了，去Gitee Pages页面看看有没有错误提示
我遇到最多的是缓存问题，特别是修改CSS样式后，经常需要清缓存才能看到效果。
7.2 自定义样式不生效
如果你添加了CSS文件但样式没生效，检查以下几点：
- 文件路径是否正确，比如 href="css/style.css" rel="stylesheet">
- 文件是否真的提交到了仓库
- CSS选择器是否正确，可以用浏览器开发者工具检查
建议一开始把CSS直接写在HTML文件里，等确认基本功能没问题再分离到单独文件，这样调试更方便。
7.3 图片无法显示
图片不显示通常是路径问题。在Gitee Pages中，建议：
- 创建一个专门的目录存放图片，比如"images"
- 使用相对路径引用图片，比如
- 确保图片文件名没有中文或特殊字符
我习惯把所有资源文件都放在assets目录下，结构清晰也不容易出错。