GitHub Pages网站一键部署教程，傻瓜式操作，附超全避坑攻略！
“想搞个个人网站装X，但不想花钱买服务器，连域名都不想买，有没有可能？”
当然有！今天要安利的GitHub Pages，堪称程序员白嫖界的“天花板”——免费托管网站+全球访问+自动HTTPS+无缝绑定域名，还能和代码仓库联动实现“代码更新秒同步”！
这篇文章，从注册GitHub账号到绑定自定义域名，保姆级教程带你通关所有流程！全程无废话，小白看完也能立马上手！
一、GitHub Pages是什么？能吃吗？
一句话总结：GitHub官方提供的静态网站托管服务，完全免费，支持自定义域名和HTTPS，全球CDN加速，程序员最爱！
适合谁用：
想写技术博客的码农
需要作品集展示的设计师/摄影师
懒得折腾服务器的学生党
想装X的个人站长（比如我）
核心优势：
免费！免费！免费！ 服务器、流量、HTTPS证书全不要钱
极简部署：丢个HTML文件就能访问，Git提交自动更新
无缝绑定域名：你的xxx.com直接指向GitHub Pages
二、从零开始：5分钟搭建你的第一个网页
步骤1：注册GitHub账号（已有跳过）
打开GitHub官网，用邮箱注册，用户名建议简短（比如zhangsan）
步骤2：创建专属仓库（Repository）
点击右上角“+” → New repository
仓库名必须为：你的用户名.github.io（比如zhangsan.github.io）
勾选“Add a README file”（方便初始化）
步骤3：上传你的网页文件
进入刚创建的仓库 → 点击“Add file” → Upload files
拖入一个index.html（示例代码如下）：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网站！</title>
</head>
<body>
<h1>嘿嘿，我也有个人网站啦！</h1>
<p>来自GitHub Pages的问候～</p>
</body>
</html>
步骤4：开启GitHub Pages服务
进入仓库 → Settings → Pages
Branch选main，文件夹选/(root) → 点Save
等1分钟，访问 https://你的用户名.github.io（比如zhangsan.github.io）
恭喜！你的网站已经上线了！ 🎉
三、进阶玩法：绑定自定义域名（装X必备）
为什么要绑定域名：
告别xxx.github.io，用xxx.com更专业
方便SEO优化（比如被Google收录）
步骤1：购买域名
推荐平台：
国内：阿里云、腾讯云（需备案）
国外：Namecheap、GoDaddy（免备案）
步骤2：配置DNS解析
以阿里云为例：
进入域名控制台 → 解析设置 → 添加记录
填写以下两条记录：
类型 主机记录 记录值 TTL
CNAME www 你的用户名.github.io 10分钟
A @ 185.199.108.153 10分钟
A @ 185.199.109.153 10分钟
A @ 185.199.110.153 10分钟
A @ 185.199.111.153 10分钟
（记录值IP为GitHub Pages官方提供）
步骤3：在GitHub设置域名
仓库 → Settings → Pages → Custom domain
输入你的域名（比如www.zhangsan.com） → Save
勾选“Enforce HTTPS”（强制HTTPS）
等10分钟，访问你的域名，搞定！
四、高级操作：用Hexo/Hugo打造炫酷博客
适合人群：不想手写HTML，想要主题、分类、标签等功能的极客
4.1 本地安装Hexo（以Mac为例）
# 安装Node.js
brew install node
# 安装Hexo
npm install -g hexo-cli
# 初始化博客
hexo init myblog
cd myblog
npm install
# 生成静态文件
hexo generate
# 本地预览
hexo server
4.2 部署到GitHub Pages
安装Git部署插件
代码：npm install hexo-deployer-git --save
修改_config.yml：
deploy:
type: git
repo: https://github.com/你的用户名/你的用户名.github.io.git
branch: main
一键部署：hexo clean && hexo deploy
现在访问你的GitHub Pages地址，就能看到Hexo博客了！
五、避坑指南：你可能遇到的8个问题
问题1：国内访问GitHub Pages慢？
解决方案：
套用Cloudflare CDN（免费加速）
使用jsDelivr加速静态资源（替换图片/css/js链接）
问题2：提交代码后网站没更新？
检查仓库Settings → Pages的发布分支是否正确
本地执行hexo clean再重新部署
问题3：绑定域名后显示“Not Found”？
检查DNS解析是否生效（用dig www.你的域名.com命令）
GitHub仓库的Custom domain是否填写正确
六、究极体：用GitHub Actions自动化部署
适用场景：每次写完文章不想手动敲命令，自动构建+部署
配置步骤：
仓库 → Settings → Pages → 切换Source为GitHub Actions
创建.github/workflows/deploy.yml文件：
name: Deploy to GitHub Pages
on:
push:
branches:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
从此只需git push，网站自动更新！
七、加餐：让网站更专业的工具推荐
SEO优化：在HTML头部添加关键词和描述
网站统计：用Umami（开源替代Google Analytics）
评论系统：Giscus（基于GitHub Discussions）
图床加速：PicGo+GitHub仓库免费存储图片
八、为什么我推荐GitHub Pages？
零成本：服务器、域名（可选）、HTTPS全免费
极简流程：会git就能玩转，无需复杂配置
高度自由：从HTML到Vue/React，各种技术栈通吃
行动号召：别收藏吃灰了！现在就去创建你的用户名.github.io，半小时拥有个人网站！
路过，学习下 我是来刷分的，嘿嘿
页:
[1]