树洞剪藏#剪藏#树洞剪藏

静态网站部署：如何通过GitHub免费部署一个静态网站_github静态网页托管-CSDN博客

2025 年 6 月 23 日约 1 分钟

分享Twitter / X Telegram 微博

同步来源：树洞剪藏源站剪藏 ID：571 原文地址：https://blog.csdn.net/qq_53123067/article/details/148036537

打开原文 · 打开源站剪藏快照

博客

下载

学习

社区

GitCode

InsCodeAI

会议

搜索

AI 搜索

会员中心

消息

历史

创作中心

创作

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

亦世凡华、

于 2025-05-18 17:59:38 发布

阅读量2k

点赞数 22

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： github github pages 站点部署经验分享

松山湖开发者村综合服务平台文章已被社区收录加入社区

前端开发专栏收录该内容

29 篇文章

订阅专栏

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账户了，如果没有自行访问站点进行注册即可，注册完成之后，点击左上角的新建存储库按钮：

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

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

然后将下面的index.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 > AI写代码 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 AI写代码 html

安装完插件之后我们也是需要调整一下package.json中的命令操作，如下所示：

设置完命令之后，终端执行如下命令进行打包文件夹：

文件打包完成之后执行我们设置的发布命令，如下所示：

回到我们的项目仓库，可以看到我们正准备要发布站点的项目已经成功被写入分支当中：

接下来还是老样子，我们来到仓库的设置界面点击Pages，可以看到当前分支我们发布的项目已经帮助我们配置好了站点内容，这里我们无需在选择分支进行发布了，直接访问站点即可：

可以看到我们的项目也已经成功部署到GitHub站点上了，效果还不错：

取消删除站点

如果想对已经部署的站点进行取消或删除操作的话，可以参考以下内容：

取消站点：取消站点部署仅仅是对当前部署的站点进行删除且该站点将不再可用，但是所有现有存储库设置或内容都不受影响，取消发布站点不会永久删除该站点，我们只需要在已经部署的站点配置页中，点击取消发布站点的按钮即可，如下所示：

取消站点之后再次访问我们的站点链接的话就会看到404界面，如下所示：

如果又想重启已经取消的站点，可以创建新部署，切换一下文本保存方式然后再切换回来然后点击保存即可，后面再访问链接可以看到我们的项目又可以继续访问了：

删除站点：如果想删除站点可以通过两种方式删除站点：

1）删除存储库：直接将该仓库进行删除即可

2）源更改为None分支：切换项目分支，选择None分支即可

设置404站点

如果想自定义设置部署站点中的404界面的话，非常简单，只需要在部署站点发布来源配置一个404.html或404.md文件即可，在YAML 前页（如果存在）下方添加要在404页面上显示的内容：

permalink: /404.html

AI写代码 html

这里我嵌入一个404.html文件试一试，首先我们先随便输入一段内容到站点的url上可以看到默认的404界面的内容：

接下来我们点击项目右上角的添加文件的按钮，然后点击创建新文件：

然后将我们配置的404界面的内容输入其中，然后提交：

接下来输入我们提交的描述信息是添加404界面内容即可：

等待一段时间之后，我们再次访问站点，可以看到我们自定义的404界面生效了：

当然配置GitHub站点还有一些其他操作，博主这里就不再一一再赘述了，感兴趣的朋友可以自行尝试一下吧！

学习分享/商务合作/技术交流

微信名片

亦世凡华、

关注关注

打赏

专栏目录

【好物推荐】 GitHub .io 是 GitHub 提供的静态网站托管服务 ** GitHub Pages ** 的默认域名，用户可通过该服务免费搭建个人博客、项目展示页等静态网站。

热门推荐

阿甘兄

10-20

3万+

超详细讲解从零构建 Github Pages 静态网站

使用 Github Pages 放置静态网站 _ github 放置静态资源文件

6-5

很多人注册了 Github 却不知道 Github 有一个巨大的福利,那就是你有了一块永久免费的放置静态网页的空间—— Github Pages ,借用这个空间就可以实现零成本建站。 Github Pages 的使用步骤如下建立仓库(使用你的 github 用户名替换下面的“username”) : username. github .io ...

用 github 部署静态网页 _ github 部署静态网页

6-23

用 github 部署静态网页用 GitHub 来部署静态网页 ꒰･◡･๑꒱这个教程主要适用于直接创建仓库。想从 github 上直接上手的同学可以参照以上教程部署静态网页。我想分享给大家的是,如何将已经创建了仓库并且有master分支的项目部署为静态网页。自动生成页面...

创建个人网站（ github pages ）并将站点一键托管到 Github

weixin_45205599的博客

04-08

2032

个人网站搭建：使用静态网站生成工具mkdocs，迅速便捷将markdown编写的文本文件生成个人wiki网站并托管到 github 供大家访问的全流程总结，保姆级教程，多处踩坑的血泪经验史。

使用Git在 GitHub 上部署静态页面

XunLin233的博客

08-02

1870

在 GitHub 中，我们可以将自己的静态页面部署到 GitHub 中，它会给我们提供一个地址使得我们的页面变成一个真正的网站，可以供用户访问。

独立于 Github ，更方便地管理自己的静态网站？来试试这套自托管 Git 仓库方案！

kfashfasf的博客

12-28

1091

这套方案可以实现一个非常方便的编写博客的方法。你可以在自己电脑上写好文章，生成网站，并且直接git push即可部署到自己的服务器上，一气呵成，一般情况下完全不需要登陆远程服务器。在讲述方案之前，我先说明一下这套方案采用的服务器结构。本地客户端：在本地，也就是我们用来写文章的 Windows 系统，在下文，我称之为客户端。客户端上，我们需要安装Git，并且我们要会用git提交文件。git的安装方法和使用方法在此不做赘述，相信各位试图搭建静态网站的读者，git的用法肯定是有所涉猎的。

gh pages ：通过 GitHub Actions 部署任意静态资产

01-30

gh pages ：通过 GitHub Actions 部署任意静态资产

nextjs- github pages : 使用 GitHub Actions将静态 Next.js Web应用程序部署到 GitHub Pages 的模板

05-17

使用部署到的静态 Web应用程序的模板。该回购的结果可以在上看到开始吧安装和（可选）单击此页面顶部的绿色“使用此模板”按钮，然后按照说明进行操作。这将创建此仓库的副本。您可以阅读有关使用模板的更...

a1046700338. github .io : 使用 GitHub - pages 通过hexo驱动部署的个人博客网站

03-10

之后，使用hexo init初始化一个新的博客项目，接着可以编写Markdown格式的文章，使用hexo generate（或简写hexo g）生成静态文件，最后通过hexo deploy（或hexo d）将这些文件部署到 GitHub Pages 。...

actions-gh- pages : GitHub 页面的 GitHub 操作 : rocket : 部署静态文件并轻松发布您的网站。静态站点生成器友好

04-28

这是一个 GitHub Action，用于将静态文件部署到 GitHub Pages 。该部署操作可以与简单，自由地组合在一起。（Hugo，MkDocs，Gatsby，mdBook，Next，Nuxt等。）下一示例步骤将./public目录部署到远程gh- pages 分支...

hugo-on-fire : Gi Github 行动，以建立一个 Hugo网站并将其部署在Firebase Hosting上

03-09

Hugo on Fire是一个 Github Action，可从您的Hugo网站 Github 存储库构建一个静态 HTML / CSS网站，并将其部署在Firebase Hosting上。 : laptop : 用法在您的 Github Hugo网站存储库（ . github /workflows/main.yml添加一...

小白新手一文完成Git+ Github /GITEE傻瓜式入门详解部署教程（内含TortoiseGit配置）

yanqiu12138的博客

09-17

6091

本文创作时版本为 Git-2.41.0，使用目标为笔记存储和代码库，部分公司向使用的设置可能不一样。

在 GitHub 上部署一个自己的网站详细教程

听说你很会玩的博客

06-06

3559

New repositoryd–输入你的仓库名–选择一个默认模板—Create repository—仓库创建成功。在 GitHub 官网注册一个账号，这里注册账号的步骤省略。5.git commit -m “仓库名”，将暂存区的代码添加到仓库区。3.“git add .”,将工作区的代码添加到暂存区。1.用“cd 你的仓库名”命令进去下载的文件夹，之后会弹出一个对话框，输入用户名和密码就可以了。6.git pull，更新代码，同步远程仓库。

【教程】 Github 环境配置新手指南（超详细）

EliasChang的博客

03-08

2万+

Github 环境搭建新手教程

【 Github 搭建网站】零基础零成本搭建个人Web网站~

m0_65592409的博客

01-19

2845

这是我个人搭建的网站：https : //xf2001. github .io/xf/大家可以搭建完后发评论区看看！！！

在 Github 上部署静态网页

Day by day的博客

07-19

9098

我想分享给大家的是，如何将已经创建了仓库并且有master分支的项目部署为静态网页。自动生成页面 1、点击settings 自动生成页面仓库名和访问二级域名一致。

跳转到这个页面，直接忽视，点击最后面的按钮。

随意选择，提交。现在我们已经生成了gh- pages 分支。 gh- pages 分支内容。自定义你

关于我们

招贤纳士

商务合作

寻求报道

400-660-0108

[email protected]

在线客服

工作时间 8:30-22:00

公安备案号11010502030143

京ICP备19004658号

京网文〔2020〕1039-165号

经营性网站备案信息

北京互联网违法和不良信息举报中心

家长监护

网络110报警服务

中国互联网举报中心

Chrome商店下载

账号管理规范

版权与免责声明

版权申诉

出版物许可证

营业执照

亦世凡华、

博客等级

码龄5年

前端领域新星创作者

547 原创

1万+ 点赞

2万+ 收藏

3万+ 粉丝

关注

私信

相关文章