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

Maki Winster

已于 2024-08-25 12:15:17 修改

阅读量1.3k

点赞数 30

文章标签：阿里云网络 html5 html

于 2024-08-25 05:05:21 首次发布

本文链接：https://blog.csdn.net/mumoyan472/article/details/141508813

版权

前言

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

准备

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

标题购买并配置OSS

购买阿里云OSS -> 阿里云-搜索推荐页 (aliyun.com)
打开OSS控制台,创建一个bucket

按这样设置，其他的默认即可
进入Bucket
标星这两个，只需要用到这两个
在本地设计好index.html和error.html，点击“文件列表”扫描并上传到Bucket根目录。
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误页面</title>
</head>
<body>
    <h1>404</h1>
    <p>抱歉，页面未找到。</p>
    <p><a href="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即可