二十来块，您的静态网页托管方案——OSS+Vercel+GitHub

前言

当我还是个小白的时候，第一次搭建网站是使用了ECS服务器，用的WordPress搭建的动态网页。好是好，但自由度太低了（那必须是我不会），而且也贵。没办法后面觉得丑，又有些缘机让我学到了点前端知识，开始了自己做网页的旅程。
学到点小皮毛后，发现了静态网页托管这个东西。这多好！比动态网页好多了，完全自己从0开始定制，托管静态网页也只是部署到公共存储上，非常便宜，太符合大学生苦涩的钱包了。
于是心动，开始了静态网页的探索之旅。

准备

标题中提到了GitHubPages，这表明你会需要魔法的能力。如果没有，也可以尝试使用Watt Toolkit加速GitHub服务。
二三十块钱，用于OSS+域名
耐心，蛮长的，特别是对于第一次折腾这些的小白。但也是折腾后看到成功，才开心满足。

标题购买并配置OSS

购买阿里云OSS -> 阿里云-搜索推荐页 (aliyun.com)
打开OSS控制台,创建一个bucket 按这样设置，其他的默认即可
进入Bucket
标星这两个，只需要用到这两个
在本地设计好index.html和error.html，点击“文件列表”扫描并上传到Bucket根目录。 index.html

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>主页</title></head><body><header><h1>主页</h1></header><main><h2>欢迎来到主页</h2><p>这是主页的内容。</p></main><footer><p>版权 &copy; 2024 网站名称</p></footer></body></html>

error.html

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>错误页面</title></head><body><h1>404</h1><p>抱歉，页面未找到。</p><p><ahref="index.html">返回主页</a></p></body></html>

点击静态页面，按如下设置。子页面首页看你需不需要

配置GitHubPages

创建GitHub仓库

进入GitHub，创建一个账号然后点击右上角，点击You Repository进入你的仓库。
选择新建仓库
按如下设置创建仓库点击创建后，会自动跳转到你的仓库。
上传index.html和error.html文件到你的仓库中

配置GitHubPages（可选）

点击Settings
按如下设置
稍等2-3分钟刷新页面，即可看见GitHubPages已经配置成功点击VisitSite就可以预览你的index.html文件了。这时候你已经有属于你的静态页面了，但是呢网址很长，而且国内访问也非常不稳定（大部分人无法顺利打开你的网页）。所以，以下依次解决问题：1. 国内无法访问 2. 域名不好看

下载GitHub DeskTop

（可选）在此之前，由于网站你始终是要更新设计的嘛，熟悉Git的朋友（但也许也不会需要我这篇文章哈哈哈）就简单了，不过总有人不熟悉，或者更偏向于易懂的图形化界面，所以下面教各位使用GitHub Desktop：

下载GitHubPages
安装好后打开，返回GitHub仓库页面，复制页面的仓库链接
回到GitHubPages，点击左上角的Files然后选择clone repository
按如下配置以clone你的仓库好了，你之后就可以丢掉GitHub了，在本地有任何修改，只需要打开GitHub Desktop，左下角Commit然后右上角Fetch即可