Vercel部署Hexo教程/避坑指南
本站从GitHub Page+CloudFlare迁移到了GitHub+Vercel,遇到了很多的坑(实际上就是就一个字——菜),下面是一个避坑指南
什么是 Vercel / Hexo
Vercel 类似于 GitHub Page,但远比 gitHub page 强大,速度也快得多得多,而且将 GitHub 授权给 Vercel 后,可以达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了。
这意味着,你无需配置繁琐的 GitHub Actions,只需要将代码推送至你的仓库(可以是私有的),Vercel 会自动克隆代码并按照设定的方式部署。
Hexo 是一个基于 Node.js 的博客框架,它可以轻松地创建博客,并且支持 Markdown 语法。
(摘选自0o酱的博客)
准备工作
1.一台安装了浏览器(推荐 Chrome/Edge) ,Node.js ,Git 的电脑[不要联想不要联想(x)]
2.一个GitHub账号
3.一个手机号
4.一双手
5.一个脑子
6.本篇教程
安装Hexo
如果你的Node.js为新装且没有安装过yarn,请按照输入下面的指令安装yarn(当然你硬要用npm我也拦不住)
1 | npm install -g yarn |
接下来在命令行中通过yarn安装Hexo架构
1 | yarn global add hexo-cli |
接着通过 hexo -v
查看Hexo-Cli的版本
1 | C:\PCD-01>hexo -v |
Git / Hexo 项目初始化
建立一个新的文件夹来存放你的 Hexo 博客
由于GitHub已被墙,请自行利用梯子来过墙,PowerShell需要以下命令设置代理:
1 | $Env:http_proxy="http://IP:Port" |
(IP和Port请自行更改)
在文件夹内 Ctrl+右键 打开PowerShell
1 | hexo init |
现在文件夹多出了许多文件如果有报错就尝试清空文件夹重试上一步
接下来可以使用Hexo自带的服务器试运行博客
1 | hexo g |
使用浏览器访问 你的博客(直接点击或在地址栏输入 localhost:4000 进行访问)
默认生成一篇HelloWorld文章
新建一个GitHub的仓库
打开 GitHub (已被墙,请自行寻找访问方式),新建一个仓库(博客源码存放其中),可以选择私有(Private)/公有(Public)
Git初始化暂不教学(没错我就是懒狗)
现在回到你的目录文件夹,将Hexo push到GitHub仓库中
1 | git add -A |
部署好后仓库内便能看到你的Hexo源码
同上文所述,Git需要先运行以下命令设置代理:
1 | git config --global http.sslVerify "false" |
(IP和Port请自行更改)
Vercel源码部署
打开 Vercel登录页面 选择GitHub登录
绑定手机后打开 [Vercel控制面板](Dashboard – Vercel) ,点击 New Project,找到你刚才创建的仓库,点击Import
如果你之前的操作没有问题,FRAMEWORK PRESET一栏会自动显示Hexo(没有显示就开始祈祷叭hhh)
点击Deploy,然后翻下去找到Building一栏,打开查看,如果没有warning就可以松一口气了
域名解析到Vercel
点击Go to Dashboard,然后点击View Domain
输入框内输入你已经购买的域名(一级二级都可以),点击Add,会提示没有绑定CNAME
这个时候打开你的域名管理面板(我托管在CloudFlare上所以就用CloudFlare的域名管理了,不过不要开CF的CDN)
添加一条CNAME记录 cname.vercel-dns.com
具体请看Vercel的提示
现在返回Vercel点击域名后面的Refresh就可以看到,域名已经成功绑定(可能会申请SSL,不过很快就会成功)