vercel 配合Github 搭建项目Doc门户

> 本文由 [简悦 SimpRead](http://ksria.com/simpread/) 转码， 原文地址 [www.cnblogs.com](https://www.cnblogs.com/xuyiyang/p/13647069.html)
>
> 前言
> --
>
> 在座的各位应该都试过用`Github Pages`来搭建个人博客，但效果却总是不不尽如人意，访问速度太太太太太慢了。
>
> 今天我在群里问大佬该如何做到让博客秒开，大佬给我推荐了 [Vercel](https://vercel.com/)，让我试试。我在百度上搜索，竟然找不到官网，经过一番周折后还是找到了。
>
> ```
> https://vercel.com/
> ```
>
> **因为我的 Github 账号已经注册过 Vercel 了，注册账号的时候也没注意流程，只好引用 [MTR-Static 大佬](https://www.zhihu.com/people/mtr-static-page)的图片了。**
>
> 这篇教程就当是从零开始建设个人博客吧。
>
> 正文
> --
>
> ### 注册 Github 账号
>
> 不多赘述，参考[这篇教程](https://zhuanlan.zhihu.com/p/103268406)吧。
>
> ### 注册 Vercel 账号
>
> 这里我用我的 Github 小号演示。
>
> 打开`https://vercel.com/signup`，点击`Continue with Github`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/8KLnqRom2IWXCEj.png)](https://i.loli.net/2020/08/28/8KLnqRom2IWXCEj.png)
>
> 出现授权页面，点击`Authorize Vercel`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/fIScZko2CdbY9FQ.png)](https://i.loli.net/2020/08/28/fIScZko2CdbY9FQ.png)
>
> ### 创建博客
>
> 点击`Import Project`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/K4HW23ahntm1uol.png)](https://i.loli.net/2020/08/28/K4HW23ahntm1uol.png)
>
> 接着点击`Select Template`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/uG6wE8lxVM5ivTO.png)](https://i.loli.net/2020/08/28/uG6wE8lxVM5ivTO.png)
>
> 在模板选择页面向下滚动，可以找到`Hugo`，点击它，现在我们将使用 Hugo 来生成静态网页。
>
> [![](http://kmgy.top:9090/image/2022/08/30/oPGiVfjZ2KTtHJe.png)](https://i.loli.net/2020/08/28/oPGiVfjZ2KTtHJe.png)
>
> 保持默认，点击`Continue`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/5f2vpDYsRxBOMn1.jpg)](https://i.loli.net/2020/08/28/5f2vpDYsRxBOMn1.jpg)
>
> 点击`Install Vercel for Github`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/pOoguyDIb2JACZ6.jpg)](https://i.loli.net/2020/08/28/pOoguyDIb2JACZ6.jpg)
>
> 点击绿色的`Install`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/WOTJpM7fqhnuzaY.jpg)](https://i.loli.net/2020/08/28/WOTJpM7fqhnuzaY.jpg)
>
> 保持默认，点击`Continue`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/4Cb6lXcvrZjp1oT.jpg)](https://i.loli.net/2020/08/28/4Cb6lXcvrZjp1oT.jpg)
>
> 到了`Create Git Repository`页面，因为之前关联的是 Github，所以选择`Github`。在`Repository Name`内填写你想要的仓库名称，Vercel 将在 Github 创建一个仓库用于托管文件。`Private Git Repository`无论勾选与否都差不多，区别就在于创建的仓库是是私人仓库还是公开仓库，点击`Continue`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/aiWV1HfQ7OBCqvT.png)](https://i.loli.net/2020/08/28/aiWV1HfQ7OBCqvT.png)
>
> `Import Project`页面保持默认即可，点击`Deploy`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/XkIVwTEQ8Mype1j.png)](https://i.loli.net/2020/08/28/XkIVwTEQ8Mype1j.png)
>
> 现在就创建成功了，点击`Visit`就可以直接访问。但是界面十分粗糙，接下来需要做一些个性化设置。
>
> [![](http://kmgy.top:9090/image/2022/08/30/2lihNQDB9wszZHW.png)](https://i.loli.net/2020/08/28/2lihNQDB9wszZHW.png)
>
> [![](http://kmgy.top:9090/image/2022/08/30/U5iVnl1hB6I2Cke.png)](https://i.loli.net/2020/08/28/U5iVnl1hB6I2Cke.png)
>
> ### 开始使用
>
> 你可以到 [GitHub Desktop](https://desktop.github.com/) 下载`GitHub Desktop`，相比 CLI 的 git，配置起来更便捷。
>
> 登录号账号之后点击`File`，接着点击`Clone repositories`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/1dshCNqYU6kxajG.png)](https://i.loli.net/2020/08/28/1dshCNqYU6kxajG.png)
>
> 找到自己为创建 Hugo 创建的仓库，选中后点击`Clone`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/YNqydH7Ocu9DoK5.png)](https://i.loli.net/2020/08/28/YNqydH7Ocu9DoK5.png)
>
> [![](http://kmgy.top:9090/image/2022/08/30/XraOqFcyoHGPKnj.png)](https://i.loli.net/2020/08/28/XraOqFcyoHGPKnj.png)
>
> 打开文件资源管理器，打开`C:\Users\你的用户名\Documents\GitHub`，应该可以看到刚刚 clone 的仓库，此处为`test`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/tbaJYZCyvFoG8se.png)](https://i.loli.net/2020/08/28/tbaJYZCyvFoG8se.png)
>
> 按照主题提供的方法做配置，我推荐 [even](https://github.com/olOwOlo/hugo-theme-even)。
>
> 修改完之后打开 Github Desktop，应该能看到更改，在左下角的`Summary`里填入做的修改（upload theme 或者别的什么，有内容即可），点击`Commit to master`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/VE2QIbgoud5GfAC.png)](https://i.loli.net/2020/08/28/VE2QIbgoud5GfAC.png)
>
> 点击右上角的`Push origin`，把修改推送到 Github。
>
> [![](http://kmgy.top:9090/image/2022/08/30/6cyngiMOaRTWl3m.png)](https://i.loli.net/2020/08/28/6cyngiMOaRTWl3m.png)
>
> 完成之后再等待半分钟，打开网站，改动应该已经生效了。
>
> [![](http://kmgy.top:9090/image/2022/08/30/XyVxH7AQztChT3c.png)](https://i.loli.net/2020/08/28/XyVxH7AQztChT3c.png)
>
> 这是因为 Vercel 会检测到 Github 仓库改动之后会自动重新生成网页，之后更新文章可以直接在 Github 网页版上传到`./content/posts`里，比在电脑上自己生成网页再 Push 方便不少。
>
> [![](http://kmgy.top:9090/image/2022/08/30/xN6idDFhAPm2Gbr.png)](https://i.loli.net/2020/08/28/xN6idDFhAPm2Gbr.png)
>
> ### 绑定域名
>
> 这需要你自己有一个域名，如果不想花钱的话可以在 [freenom](https://freenom.com) 免费申请一个，这里不多赘述。
>
> 在 Vercel 的控制面板里打开你的项目（如此处的 test） > `Settings` > `Domains`，在输入框里输入你想绑定的域名，此处我用`test.yxyy.top`。接着它会提示错误，这是因为我还没有设置域名解析。
>
> [![](http://kmgy.top:9090/image/2022/08/30/ygVKfw8NuPAvncF.png)](https://i.loli.net/2020/08/28/ygVKfw8NuPAvncF.png)
>
> 你需要按照提示在域名提供商那里做 CNAME 解析，我是在阿里云注册的域名，其他的域名注册商应该也大同小异。
>
> [![](http://kmgy.top:9090/image/2022/08/30/bTpUJszoGcWOgKH.png)](https://i.loli.net/2020/08/28/bTpUJszoGcWOgKH.png)
>
> 现在回到 Vercel 控制面板，应该就不会报错了，它还会自动帮你申请 Let's Encrypt 的 SSL 证书。
>
> [![](http://kmgy.top:9090/image/2022/08/30/dalv63ZILAsiOKJ.png)](https://i.loli.net/2020/08/28/dalv63ZILAsiOKJ.png)
>
> 真不错，可以带着域名访问了。
>
> [![](http://kmgy.top:9090/image/2022/08/30/jyUOH8Nk6CFluGr.png)](https://i.loli.net/2020/08/28/jyUOH8Nk6CFluGr.png)
>
> 以下为备份。
> ------
>
> 到了`Select Vercel account`的页面，在下面的`Personal Account`内点击你自己的账户，接着点击`Continue`。
>
> [![](http://kmgy.top:9090/image/2022/08/30/ABtaLc6vNInKoQx.png)](https://i.loli.net/2020/08/28/ABtaLc6vNInKoQx.png)
>
> 可能是因为我的 Github 小号用的是 189 邮箱？无法注册。
>
> [![](http://kmgy.top:9090/image/2022/08/30/NtO5FvPRMum92KG.png)](https://i.loli.net/2020/08/28/NtO5FvPRMum92KG.png)
>
> 引用[别人的教程](https://zhuanlan.zhihu.com/p/143389054)吧，请按照他的方法来注册账号，注册完帐号就可以回来了。
>
> __EOF__
>
> ![](http://kmgy.top:9090/image/2022/08/30/STxnvNphVbtkgdI.jpg)本文作者：**[徐艺扬](https://www.cnblogs.com/xuyiyang/p/13647069.html)**  
> 本文链接：[https://www.cnblogs.com/xuyiyang/p/13647069.html](https://www.cnblogs.com/xuyiyang/p/13647069.html)  
> 关于博主：评论和私信会在第一时间回复。或者[直接私信](https://msg.cnblogs.com/msg/send/xuyiyang)我。  
> 版权声明：本博客所有文章除特别声明外，均采用 [BY-NC-SA](https://creativecommons.org/licenses/by-nc-nd/4.0/ "BY-NC-SA") 许可协议。转载请注明出处！  
> 声援博主：如果您觉得文章对您有帮助，可以点击文章右下角**【[推荐](javascript:void(0);)】**一下。您的鼓励是博主的最大动力！