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

静态网站部署：如何通过GitHub免费部署一个静态网站

article 2025/8/29 17:09:07

GitHub提供的免费静态网站托管服务可以无需担心昂贵的服务器费用和复杂的设置步骤，本篇文章中将一步步解如何通过GitHub免费部署一个静态网站，帮助大家将创意和作品快速展现给世界。

了解基础情况

创建基础站点

在线调试站点

前端项目部署

部署存储仓库

取消删除站点

设置404站点

了解基础情况

GitHub Pages是GitHub提供的一项服务，允许用户将静态网页托管在GitHub上，用户可以免费托管HTML、CSS、JavaScript文件快速部署网站，它是GitHub针对开源项目、个人博客、作品集等静态网站提供的托管平台，完全免费且支持自定义域名，使用GitHub免费搭建静态网站，需要提前了解一下使用它的前提及其一些限制，具体详情可以参考官方文档：地址，这里不再过多赘述：

从上面官方文档给出的限制来看，GitHub Pages提供免费托管适合个人开发者、小项目或非盈利性项目，静态网站直接托管在GitHub上无需自己配置和维护服务器，但是其也有一些缺点：

1）仅支持静态网站：只能托管静态网页无法直接支持后端应用或动态内容，如果需要数据库、服务器端处理或动态功能，GitHub Pages不是合适的选择

2）存储限制：每个仓库的文件大小限制为100MB且每个用户有一定的带宽限制，因此对于大文件或高流量的网站可能不太适用

3）缺少数据库支持：如果项目需要动态数据存储(例如用户提交表单、评论功能等)，GitHub Pages并不提供数据库支持

4）需要手动更新：每次修改和更新网站内容都需要通过Git提交并推送更新，可能不如一些拖拽式网站构建平台(如 Wix、WordPress)方便

5）功能限制：尽管支持Jekyll和一些静态生成器，但相对于其他托管平台GitHub Pages的自定义和扩展功能仍然较为有限，尤其是当需要复杂功能时

这些缺点决定了GitHub Pages更适用于简单的个人网站、项目展示和博客而不适合需要复杂后台处理的应用，总的来说GitHub Pages提供了一个简单、免费的平台帮助开发者和创作者快速部署和管理静态网站，如果你的需求是展示项目、博客或者个人作品集，GitHub Pages是一个理想的选择，接下来我们开始讲解如何部署GitHub Pages。

创建基础站点

在创建基础站点之前，我默认你已经创建好GitHub账户了，如果没有自行访问站点进行注册即可，注册完成之后，点击左上角的新建存储库按钮：

接下来输入仓库的名称以及描述(可选)，如果要创建用户或组织站点则存储库必须命名为 <user>.github.io或<organization>.github.io，如果你的用户或组织名称包含大写字母，则添加的必须小写字母，这里我就输入名称进行演示，如下输入完名称之后点击创建存储库即可：

创建完成之后我们点击上传已经存在的文件：

然后将下面的index.html文件拖到上传，上传完成点击提交即可：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.github {color: red;}</style>
</head>
<body><div class="github">hello github pages</div>
</body>
</html>