介绍如何使用 GitHub Pages 零代码搭建免费静态网站。无需服务器配置，通过创建符合规范的仓库、编写 HTML 文件并提交至远程分支即可发布。支持自定义域名绑定与 HTTPS 加密。文章涵盖从环境准备、内容创作到故障排查的全流程，并提供资源压缩、缓存策略等性能优化建议。适合非技术背景用户快速建立个人博客或项目文档站点。
GitHub Pages 是由 GitHub 提供的静态网站托管服务，允许用户直接从代码仓库生成网站，无需后端服务器支持，完全免费且支持自定义域名。
对于非技术背景的用户来说，传统建站面临三大痛点：服务器配置复杂、维护成本高、域名费用昂贵。而 GitHub Pages 通过与代码仓库深度集成，将网站部署简化为'提交代码'动作，让你专注于内容创作而非技术实现。无论是个人简历展示、开源项目文档还是兴趣博客，都能找到适合的解决方案。
核心优势速览：
| 操作步骤 | 详细说明 |
|---|---|
| 创建专属仓库 | 登录代码托管平台，新建名为 username.github.io 的公共仓库（将 username 替换为你的用户名） |
| 克隆仓库到本地 | 执行 git clone https://github.com/<username>/<username>.github.io.git 命令下载项目 |
| 检查本地环境 | 确保已安装 Git 工具，可通过 git --version 验证安装状态 |
注意：仓库名称必须严格遵循 用户名.github.io 格式，这是系统识别网站根目录的关键。
| 操作步骤 | 详细说明 |
|---|---|
| 创建首页文件 | 在仓库根目录新建 index.html 作为网站入口 |
| 编写基础 HTML | 添加标题、导航和内容区域，可使用在线 HTML 模板快速构建 |
| 预览本地效果 | 用浏览器直接打开 index.html 文件查看页面效果 |
示例代码结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人网站</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>欢迎来到我的个人空间</h1>
</header>
<main>
<p>这是使用 GitHub Pages 创建的静态网站</p>
</main>
</body>
</html>
| 操作步骤 | 详细说明 |
|---|---|
| 跟踪文件变更 | 执行 git add . 将所有文件加入暂存区 |
| 提交更新说明 | 执行 git commit -m "添加网站首页内容" 记录变更 |
| 推送到远程仓库 | 执行 git push origin main 完成部署 |
| 验证网站生效 | 等待 1-2 分钟后访问 https://username.github.io |
提速技巧：使用 git status 命令可随时查看文件变更状态，确保所有修改都已提交。
| 操作步骤 | 详细说明 |
|---|---|
| 购买域名 | 从域名服务商处获取心仪的域名（如 example.com） |
| 配置 DNS 记录 | 添加 CNAME 记录指向 username.github.io |
| 创建 CNAME 文件 | 在仓库根目录添加含域名的 CNAME 文件（无扩展名） |
| 启用 HTTPS | 在仓库设置中开启'Enforce HTTPS'选项 |
常见问题：DNS 配置生效可能需要 24-48 小时，期间可通过 dig yourdomain.com 命令检查解析状态。
username.github.io 规范nslookup yourdomain.com 验证域名解析状态./css/style.css）python -m http.server 启动本地服务器预览<img loading="lazy" src="image.jpg">在仓库根目录添加 _config.yml 文件，配置缓存控制：
plugins:
- jekyll-cache
cache:
enabled: true
duration: 86400 # 缓存 1 天
将大型静态资源（如图片、视频）存储在 CDN：
<!-- 使用 CDN 加载字体 -->
<link href="https://cdn.example.com/fonts.css" rel="stylesheet">
检测工具：使用 Google PageSpeed Insights 分析性能瓶颈，获取个性化优化建议。
| 工具名称 | 技术栈 | 优势场景 | 学习曲线 |
|---|---|---|---|
| Jekyll | Ruby | 博客系统 | 中等 |
| Hugo | Go | 文档站点 | 平缓 |
| Hexo | Node.js | 个人作品集 | 平缓 |
| Gatsby | React | 复杂交互网站 | 陡峭 |
选择工具时需平衡功能需求与维护成本，新手建议从单一静态 HTML 起步，熟悉后再引入生成器工具。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online