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构建需要时间尤其是第一次构建可能比较慢浏览器缓存了旧版本可以尝试强制刷新CtrlF5可能是构建失败了去Gitee Pages页面看看有没有错误提示我遇到最多的是缓存问题特别是修改CSS样式后经常需要清缓存才能看到效果。7.2 自定义样式不生效如果你添加了CSS文件但样式没生效检查以下几点文件路径是否正确比如 hrefcss/style.css relstylesheet文件是否真的提交到了仓库CSS选择器是否正确可以用浏览器开发者工具检查建议一开始把CSS直接写在HTML文件里等确认基本功能没问题再分离到单独文件这样调试更方便。7.3 图片无法显示图片不显示通常是路径问题。在Gitee Pages中建议创建一个专门的目录存放图片比如images使用相对路径引用图片比如确保图片文件名没有中文或特殊字符我习惯把所有资源文件都放在assets目录下结构清晰也不容易出错。