GitHub Pages网站一键部署教程，傻瓜式操作，附超全避坑攻略！

论坛技术员 · 发表于 2025-4-8 14:50:48

“想搞个个人网站装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: [main]

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，半小时拥有个人网站！

auhloezgar · 发表于 2025-4-8 14:50:56

路过，学习下

05k68r31g5 · 发表于 2025-4-8 14:56:44

我是来刷分的，嘿嘿

用户名		自动登录	找回密码
密码			立即注册

GitHub Pages网站一键部署教程，傻瓜式操作，附超全避坑攻略！

逛了这许久，何不进去瞧瞧？