Git怎么创建GitHub Pages网站_Git部署静态网站到GitHub【实战】

尼克

尼克

2026-04-09

838人浏览

原创

github pages 不再强制使用 gh-pages 分支,推荐直接用 main 分支根目录或 /docs 目录部署;禁用 jekyll 可加 .nojekyll 文件;自定义域名需 cname 文件、settings 配置及 dns 解析三者配合。

git怎么创建github pages网站_git部署静态网站到github【实战】

GitHub Pages 的 gh-pages 分支早就不是必须的了

GitHub Pages 现在默认支持从 main(或 master)分支的 //docs 目录发布,gh-pages 分支只是历史遗留选项。除非你用的是 Jekyll 且需要自定义构建流程,否则别再无脑新建 gh-pages 分支——它只会增加推送、同步和权限管理的麻烦。

实操建议:

  • 新建仓库后,直接往 main 分支提交 HTML/CSS/JS 文件,然后在 Settings → Pages → Source 里选 Deploy from a branchmain/ (root)
  • 如果想把文档和代码分开,把静态文件放 docs/index.html,Source 选 /docs 目录即可
  • 确认 GitHub Pages 已启用:保存设置后,页面会显示类似 https://<username>.github.io/<repo></repo></username> 的地址,几秒到两分钟内生效

git subtree push 不适合日常更新 Pages 网站

很多人搜到用 git subtree pushbuild/ 目录推到 gh-pages 分支,这在 CI 尚未普及的年代有用,但现在反而容易出错:它会重写历史、污染 gh-pages 分支的 commit 记录,且本地误操作可能覆盖线上内容。

更稳妥的做法是:

  • 用 GitHub Actions 自动构建并部署:比如 actions/jekyll-build-pages(Jekyll),或通用型 peaceiris/actions-gh-pages(支持任何静态生成器)
  • 手动部署时,直接 git add . && git commit -m "deploy" 到主分支对应目录,而不是折腾 subtree
  • 若坚持用命令行部署,优先考虑 gh CLI:gh pages deploy --dir ./dist(需先安装 gh 并登录)

自定义域名 + HTTPS 强制开启必须改 CNAME 和设置项

CNAME 文件只是第一步,漏掉 Settings 里的配置,HTTPS 会一直灰色不可用,访问时仍走 http:// 或报证书错误。

Git
Git

程序猿必备版本控制工具

下载

关键步骤缺一不可:

  • 仓库根目录放纯文本 CNAME 文件,内容只有一行:你的域名(如 example.com),**不带 http://,不带路径,末尾无空行**
  • Settings → Pages → Custom domain 输入相同域名,并勾选 Enforce HTTPS
  • DNS 解析需指向 GitHub:A 记录到 185.199.108.153 等四个 IP,或用 ALIAS/ANAME(部分 DNS 提供商支持),CNAME 只适用于子域名(如 www.example.com

Jekyll 构建失败常见于 _config.yml 编码或插件问题

GitHub Pages 默认用 Jekyll 构建,但只允许白名单插件,且要求 _config.yml 是 UTF-8 编码(BOM 会导致解析失败,错误信息为 YAML Exception: invalid byte sequence in UTF-8)。

排查要点:

  • 用编辑器检查 _config.yml 是否含 BOM:VS Code 底部状态栏看编码,Sublime Text 用 File → Reopen with Encoding → UTF-8
  • 禁用所有第三方插件,只保留 plugins: [] 或删掉该字段,再测试能否构建成功
  • 不想被 Jekyll 干预?在仓库根目录加一个空的 .nojekyll 文件,GitHub 就会跳过构建,直接托管你提交的文件

真正卡住人的往往不是“怎么部署”,而是 DNS 生效延迟、CNAME 文件多了一个空格、或者本地预览用的是 Jekyll 4.x 而 GitHub 还在跑 3.9 —— 部署前先看 Settings → Pages 页面右上角的构建日志,比反复推代码有用得多。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

git github

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

1881

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

912

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1154

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

7910

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

639

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1235

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1079

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

2004

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

985

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
vscode手册
vscode手册

共0课时 | 0人学习

Git 教程
Git 教程

共21课时 | 7.4万人学习

Git版本控制工具
Git版本控制工具

共8课时 | 1.7万人学习