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>
上传完成之后，我们点击设置按钮找到Pages选项，然后设置我们当前GitHub Pages的分支，在这里我们调整设置了main分支，然后点击Save保存，
然后等待一会刷新一下页面就可以看到我们的站点部署已经成功，然后访问我们的站点就可以看到我们上传的index.html的内容已经被成功的展示在浏览器界面上了：
在线调试站点
我们可以点击代码的Code按钮，然后选择Codespaces打开代码空间，如下所示：
打开之后就给我们展示了一个vscode编辑器的内容，这个编辑器就相当于一台服务器， 当我们修改代码之后可以点击编辑器的左侧分支提交按钮，修改代码然后输入描述点击提交分支即可：
提交完成回到Code选项可以看到我们的代码修改已经成功被提交上来了：
等待一会刷页面之后就可以看到我们的修改的内容也已经同步到站点上了：
前端项目部署
如果想设置Webpack或Vite构建的项目打包部署到GitHub站点上的话，需要考虑一下对资源文件的调用设置，确保文件能够准确的被调用，其处理方法如下所示：
webpack：如果是webpack项目进行打包的话，需要在package.json中添加如下属性，属性值就是我们创建好的GitHub项目名称：
vite：如果是vite项目进行打包的话，需要在package.json中添加如下的打包命令设置，我们在vite build命令后面添加 --base=/项目名称 即可，如下所示：
可以看到打包后的文件内容，都已经在静态资源目录下面添加了我们的项目名称：
接下来我们将打包好的静态资源目录上传到刚刚创建的GitHub仓库当中，如下所示：
然后我们稍微等待一会，等待站点的代码进行更新，过了一会刷新站点之后可以看到我们的站点内容已经变成我们打包好的站点内容了：
部署存储仓库
如果想部署的站点是已经在GitHub上存储的仓库，新建一个仓库然后再打包然后在部署未免有些太过繁琐，这里我们可以通过GitHub的部署工具进行设置，终端执行如下命令安装插件：
npm i gh-pages -D安装完插件之后我们也是需要调整一下package.json中的命令操作，如下所示：
设置完命令之后，终端执行如下命令进行打包文件夹：
文件打包完成之后执行我们设置的发布命令，如下所示：
回到我们的项目仓库，可以看到我们正准备要发布站点的项目已经成功被写入分支当中：
接下来还是老样子，我们来到仓库的设置界面点击Pages，可以看到当前分支我们发布的项目已经帮助我们配置好了站点内容，这里我们无需在选择分支进行发布了，直接访问站点即可：
可以看到我们的项目也已经成功部署到GitHub站点上了，效果还不错：
取消删除站点
如果想对已经部署的站点进行取消或删除操作的话，可以参考以下内容：
取消站点：取消站点部署仅仅是对当前部署的站点进行删除且该站点将不再可用，但是所有现有存储库设置或内容都不受影响，取消发布站点不会永久删除该站点，我们只需要在已经部署的站点配置页中，点击取消发布站点的按钮即可，如下所示：
取消站点之后再次访问我们的站点链接的话就会看到404界面，如下所示：
如果又想重启已经取消的站点，可以创建新部署，切换一下文本保存方式然后再切换回来然后点击保存即可，后面再访问链接可以看到我们的项目又可以继续访问了：
删除站点：如果想删除站点可以通过两种方式删除站点：
1） 删除存储库：直接将该仓库进行删除即可
2）源更改为None分支：切换项目分支，选择None分支即可
设置404站点
如果想自定义设置部署站点中的404界面的话，非常简单，只需要在部署站点发布来源配置一个404.html或404.md文件即可，在YAML 前页（如果存在）下方添加要在404页面上显示的内容：
---
permalink: /404.html
---这里我嵌入一个404.html文件试一试，首先我们先随便输入一段内容到站点的url上可以看到默认的404界面的内容：
接下来我们点击项目右上角的添加文件的按钮，然后点击创建新文件：
然后将我们配置的404界面的内容输入其中，然后提交：
接下来输入我们提交的描述信息是添加404界面内容即可：
等待一段时间之后，我们再次访问站点，可以看到我们自定义的404界面生效了：
当然配置GitHub站点还有一些其他操作，博主这里就不再一一再赘述了，感兴趣的朋友可以自行尝试一下吧！
投稿咨询)
