前言
当我还是个小白的时候，第一次搭建网站是使用了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>
- <!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>
创建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即可
设置Vercel
在Vercel上托管静态网页
- 登录Vercel
- 右上角点击log in, 然后点击Continue with GitHub，链接你的GitHub账户即可
- 新建一个Project
- 选择你刚才创建的仓库
- 按如下设置
- 稍等半分钟左右，即可看见Congratulations，代表已经部署成功，点击Continue to DashBoard去控制台。
- 恭喜！至此，你已经在Vercel上成功部署静态网页，但网址国内无法访问并且不是本身的域名，接下来继续部署你的域名。
在Vercel上设置本身的域名
- 进入上图的2(Deployment)后，点击这个Cutsom举行设置域名
- 点击Edit，然后输入本身想要的网址名字，Save
- 必定会表现无效设置，因为你没买也没设置
购买并解析域名
你可以选择一个喜好的域名商，阿里云、腾讯云、华为云、京东云、Namesilo等，各个平台价格会有略微收支，自行比价。这里以阿里云为例子。
- 打开阿里云万网，搜索本身喜好的域名举行购买。最短为一年，假如需要恒久使用，请留意后续续费价格。
- 购买完成后，进入阿里云域名列表，点击解析
- 确保已经存在的记录内里没有“@”的记录，然后按如下设置。我这里因为已经自行设置过，以是已经有好几个解析记录。
- 生存好后，轻微几分钟，返回Vercel点击Refresh，假如如下表现，恭喜~你的网站已经设置成功啦！
之后就自行在当地编辑你的网站，然后用GitHub Desktop来Push你的进程，半分钟一分钟你的网站就会更新你添加的内容了。
假如有帮到你，不妨点个赞。 假如有用，也可以点个收藏。 END
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
