当前位置：首页 > news >正文

零成本玩转Gitee Pages：手把手教你构建个人专属.gitee.io静态网站

news 2026/6/29 2:54:49

1. 为什么选择Gitee Pages搭建个人网站？

作为一个技术爱好者，我最初搭建个人网站时也纠结过各种方案。传统方式需要购买域名、租用服务器，每年至少几百块的开销不说，光是配置环境就能劝退不少新手。后来我发现Gitee Pages这个宝藏功能，它完美解决了三个痛点：零成本、零运维、零门槛。

Gitee Pages是码云（Gitee）提供的静态网页托管服务，最大的特点就是免费生成专属的.gitee.io二级域名。我实测上传一个HTML文件到部署完成，最快只要5分钟。相比需要配置Nginx、处理SSL证书的云服务器方案，它就像把文件扔进文件夹就能自动发布一样简单。

适合使用Gitee Pages的场景包括：个人技术博客、作品集展示、项目文档、小型活动页面等。不过要注意两个限制：一是仅支持静态资源（HTML/CSS/JS），不能运行PHP等后端代码；二是未实名认证的仓库每月有1GB流量限制，但对个人展示完全够用。

2. 从零开始的完整建站流程

2.1 注册与仓库创建

首先访问Gitee官网注册账号，建议直接用手机号注册，因为后续开启Pages服务需要实名认证。登录后点击右上角"+"号选择"新建仓库"，这里有几个关键设置：

仓库名称：这将成为你网站域名的一部分（如仓库名myblog，则域名为username.gitee.io/myblog）
勾选"使用Readme文件初始化仓库"（避免空仓库无法开启Pages）
许可证建议选MIT（对开源项目最友好）

我建议仓库名用英文且避免特殊字符，比如你想搭建技术博客可以用"tech-blog"，想展示作品可以用"portfolio"。

2.2 上传网站文件

仓库创建后，我们需要准备网站的核心文件。最基本的静态网站只需要：

index.html（必须存在，作为网站首页）
css/（存放样式文件）
js/（存放脚本文件）
images/（存放图片资源）

你可以手动编写HTML，也可以使用Hexo、Hugo等静态网站生成器。这里给个最简单的index.html示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的个人网站</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>欢迎来到我的小站</h1> <p>这里将分享我的技术笔记和创作作品</p> <script src="js/main.js"></script> </body> </html>

上传文件有两种方式：

网页直传：在仓库页面点击"上传文件"按钮，拖拽本地文件到指定区域
Git命令（推荐）：

git clone https://gitee.com/你的用户名/仓库名.git cd 仓库名 # 将网站文件复制到该目录后执行： git add . git commit -m "首次提交网站文件" git push origin master

3. 开启Pages服务的详细指南

3.1 基础配置

文件上传完成后，在仓库页面点击"服务"→"Gitee Pages"，你会看到如下选项：

部署分支：通常选master/main
部署目录：保持默认"/"（除非你把网站文件放在子目录）
强制使用HTTPS：建议勾选

点击"启动"按钮后，如果仓库未实名认证会提示你先认证。认证过程很简单，按页面指引完成身份证上传和人脸识别即可，通常30分钟内就能通过。

3.2 自定义域名（可选）

虽然.gitee.io的域名已经很好用，但如果你想用自己购买的域名（比如www.yourname.com），可以在Pages设置里填写域名，然后到域名服务商处添加CNAME记录指向username.gitee.io。不过要注意：

Gitee Pages不支持裸域名（即不带www的域名）
国内域名需完成ICP备案
每个仓库只能绑定一个自定义域名

4. 进阶技巧与常见问题

4.1 自动化部署方案

每次手动上传文件太麻烦？可以配置GitHub Actions或Gitee Go实现自动部署。以Gitee Go为例：

在仓库根目录创建.gitee/.workflow目录
新建build.yml文件，内容如下：

name: Build and Deploy steps: - name: Deploy to Gitee Pages uses: yanglbme/gitee-pages-action@main with: gitee-username: ${{ secrets.GITEE_USERNAME }} gitee-password: ${{ secrets.GITEE_PASSWORD }} gitee-repo: 你的仓库名