二十来块，您的静态网页托管方案——OSS+Vercel+GitHub
前言当我还是个小白的时候，第一次搭建网站是使用了ECS服务器，用的WordPress搭建的动态网页。好是好，但自由度太低了（那必须是我不会），而且也贵。没办法后面以为丑，又有些缘机让我学到了点前端知识，开始了本身做网页的路程。
学到点小皮毛后，发现了静态网页托管这个东西。这多好！比动态网页好多了，完全本身从0开始定制，托管静态网页也只是部署到公共存储上，非常自制，太符合大门生苦涩的钱包了。
于是心动，开始了静态网页的探索之旅。
预备
[*]标题中提到了GitHubPages，这表明你会需要邪术的能力。假如没有，也可以尝试使用Watt Toolkit加速GitHub服务。
[*]二三十块钱，用于OSS+域名
[*]耐心，蛮长的，特殊是对于第一次折腾这些的小白。但也是折腾后看到成功，才开心满足。
标题购买并设置OSS
[*] 购买阿里云OSS -> 阿里云-搜索推荐页 (aliyun.com)
https://i-blog.csdnimg.cn/direct/61185c65dc2e4e5d9bf379f853f2439b.png
[*] 打开OSS控制台,创建一个bucket
https://i-blog.csdnimg.cn/direct/d6c9b44041fb48b4bd297f7a9feffc95.png
按这样设置，其他的默认即可
https://i-blog.csdnimg.cn/direct/3f45670edeb04d66b7d4c6e4a8e8306a.png
[*] 进入Bucket
https://i-blog.csdnimg.cn/direct/7c3f41dbb935431c98cdc0e138e4d40b.png
[*] 标星这两个，只需要用到这两个
https://i-blog.csdnimg.cn/direct/f61f992c75da431dabf3d68189dbc055.png
[*] 在当地设计好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>
[*]点击静态页面，按如下设置。子页面首页看你需不需要
https://i-blog.csdnimg.cn/direct/2b7aae0dbe6846378547ad5c6c263c19.png
设置GitHubPages
创建GitHub仓库
[*]进入GitHub，创建一个账号然后点击右上角，点击You Repository进入你的仓库。
https://i-blog.csdnimg.cn/direct/0e6aa685be9241ac941639fdbdc0584f.png
[*]选择新建仓库
https://i-blog.csdnimg.cn/direct/f7cf01c0524040af8c8de3ef58cceb78.png
[*]按如下设置创建仓库
https://i-blog.csdnimg.cn/direct/662d48c5c5cb4a6ea158170b5d1d2c3f.png
点击创建后，会主动跳转到你的仓库。
[*]上传index.html和error.html文件到你的仓库中
https://i-blog.csdnimg.cn/direct/f1b67aace5bf4c47b3eef52110444827.png
设置GitHubPages（可选）
[*]点击Settings
https://i-blog.csdnimg.cn/direct/e1453bfcc36d48358b6994dfa0e67794.png
[*]按如下设置
https://i-blog.csdnimg.cn/direct/e6a33e2688864261a89890cd510aaca9.png
[*]稍等2-3分钟刷新页面，即可看见GitHubPages已经设置成功
https://i-blog.csdnimg.cn/direct/e912ab7277ea4dd99936faa47a96e45f.png
点击VisitSite就可以预览你的index.html文件了。
这时候你已经有属于你的静态页面了，但是呢网址很长，而且国内访问也非常不稳固（大部分人无法顺利打开你的网页）。
以是，以下依次办理问题：1. 国内无法访问 2. 域名不好看
下载GitHub DeskTop
（可选）在此之前，由于网站你始终是要更新设计的嘛，认识Git的朋友（但大概也不会需要我这篇文章哈哈哈）就简单了，不外总有人不认识，大概更偏向于易懂的图形化界面，以是下面教各位使用GitHub Desktop：
[*]下载GitHubPages
[*]安装好后打开，返回GitHub仓库页面，复制页面的仓库链接
https://i-blog.csdnimg.cn/direct/d4a5162e15a34dfa80d1b7d03abefed7.png
[*]回到GitHubPages，点击左上角的Files然后选择clone repository
[*]按如下设置以clone你的仓库
https://i-blog.csdnimg.cn/direct/211ec6c26d814b788d9b003fe19332c1.png
好了，你之后就可以丢掉GitHub了，在当地有任何修改，只需要打开GitHub Desktop，左下角Commit然后右上角Fetch即可
设置Vercel
在Vercel上托管静态网页
[*]登录Vercel
[*]右上角点击log in, 然后点击Continue with GitHub，链接你的GitHub账户即可
[*]新建一个Project
https://i-blog.csdnimg.cn/direct/e92f9774d08847959c2029a41c4ffc73.png
[*]选择你刚才创建的仓库
https://i-blog.csdnimg.cn/direct/9555f60ed571494ca3ced51fefa55ad4.png
[*]按如下设置
https://i-blog.csdnimg.cn/direct/e5af4dba06d9419caeeb2ef287bb6d08.png
[*]稍等半分钟左右，即可看见Congratulations，代表已经部署成功，点击Continue to DashBoard去控制台。
https://i-blog.csdnimg.cn/direct/7d3acf26e21d462d908a93388cabe8d7.png
[*]恭喜！至此，你已经在Vercel上成功部署静态网页，但网址国内无法访问并且不是本身的域名，接下来继续部署你的域名。
https://i-blog.csdnimg.cn/direct/1302c56f97d24e268723d432221ab88f.png
在Vercel上设置本身的域名
[*]进入上图的2(Deployment)后，点击这个Cutsom举行设置域名
https://i-blog.csdnimg.cn/direct/9812b61b6bad479d89124404a093c886.png
[*]点击Edit，然后输入本身想要的网址名字，Save
https://i-blog.csdnimg.cn/direct/989ad610ccf34c018c85abf0ab1688ba.png
https://i-blog.csdnimg.cn/direct/359e65564a044f83a9cce9a585619457.png
[*]必定会表现无效设置，因为你没买也没设置
https://i-blog.csdnimg.cn/direct/72779103e46949ad8ddd479b1769e923.png
购买并解析域名
你可以选择一个喜好的域名商，阿里云、腾讯云、华为云、京东云、Namesilo等，各个平台价格会有略微收支，自行比价。这里以阿里云为例子。
[*]打开阿里云万网，搜索本身喜好的域名举行购买。最短为一年，假如需要恒久使用，请留意后续续费价格。
https://i-blog.csdnimg.cn/direct/20c3884ffb354017bbcbb8872979e1d7.png
[*]购买完成后，进入阿里云域名列表，点击解析
https://i-blog.csdnimg.cn/direct/3afa017901b746b5bbc5e83bfc0f2ba4.png
[*]确保已经存在的记录内里没有“@”的记录，然后按如下设置。我这里因为已经自行设置过，以是已经有好几个解析记录。
https://i-blog.csdnimg.cn/direct/d8bf02f2f6d54f0da94f44b19378cf1a.png
[*]生存好后，轻微几分钟，返回Vercel点击Refresh，假如如下表现，恭喜~你的网站已经设置成功啦！
https://i-blog.csdnimg.cn/direct/100f008037294b0da41bd5120c369059.png
之后就自行在当地编辑你的网站，然后用GitHub Desktop来Push你的进程，半分钟一分钟你的网站就会更新你添加的内容了。
假如有帮到你，不妨点个赞。 假如有用，也可以点个收藏。 END
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]