ToB企服应用市场:ToB评测及商务社交产业平台

标题: 二十来块，您的静态网页托管方案——OSS+Vercel+GitHub [打印本页]

作者: 三尺非寒 时间: 2024-10-2 08:58
标题: 二十来块，您的静态网页托管方案——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

<!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>版权 © 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即可