部署Hexo到Vercel

饼干2021-01-252021-11-26

前言

部署项目到Vercel有两种方式，使用Vercel CLI进行部署和拉取第三方库。

之前我一直用的是第二种方法，先部署到GitHub，然后再拉取仓库
这样做有三个缺点，一是其他人可以看到博客的文件，二是还可以看到历史提交记录，三是不够优雅。
既然我们用的不是GitHub Pages而是Vercel，为何不省去中间一步直接部署到Vercel呢？

如无必要，勿增实体

接下来实践开始

一、安装Vercel-CLI

打开命令提示符，输入

1	npm install -g vercel

二、生成博客静态文件

hexo g

三、进入public文件夹

cd public

四、连接Vercel

执行：

vercel

选择通过邮箱登录，点击发过来的邮件中的验证链接，登录成功
输入y，确认在这个文件夹创建部署
选择部署到的用户，也就是你的用户名
输入y，确认连接到现有项目
输入之前博客项目的名称
完成，可以看到public文件夹下出现了一个.vercel文件夹和一个.gitignore文件
进入Vercel网站，点击用户设置，Tokens，应该已经出现了Vercel CLI XXXXXX via Email

五、部署到Vercel

1	vercel --prod

打开Vercel网站，就可以发现已经部署完成了

六、取消对之前Github仓库的连接

既然已经不用拉取GitHub仓库部署了，项目也不必与仓库连接了
打开Vercel网站，选择博客的项目，点击上面的Settings，点击左边Git，取消链接即可
（https://vercel.com/用户名/项目名/settings/git）
然后进入GitHub可以把博客仓库删掉了

七、卸载hexo-deployer-git插件

以后hexo d都用不着了，这插件留着干啥？

1	npm uninstall hexo-deployer-git --save

八、删除以前的Vercel部署

打开Vercel网站，选择博客的项目，点击上面的Deployments
（https://vercel.com/用户名/项目名/deployments）
可以看到以前的所有部署Vercel都给你各分配了一个域留着呢

我们只是用Vercel搭建博客，历史部署用不着的，所以就都给它删掉
点击进入一个历史部署，点击Visit旁边的三个点的按钮，就可以看到红色的Delete，点击就可以删除了

以此类推，可以把以前的历史部署全部删掉，第一个记得留着啊

删除历史部署后可能会出现访问博客显示404，这是浏览器缓存的原因，刷新即可

九、hexo clean造成的问题以及解决方法

理论上说做完了上面的步骤，以后部署直接

1	hexo g && cd public && vercel --prod

就完成了

但是hexo clean会删除public文件夹，里面的.vercel文件夹和.gitignore文件就被删掉了
所以说假如你执行了hexo clean，就必须重复第四步，重新连接Vercel，非常麻烦
不执行hexo clean显然是不可能的，这不是解决问题的方法。

我想，直接把.vercel文件夹和.gitignore文件放到source文件夹里不就好了吗？hexo g的时候会自动把他放到public根目录下。
但实际不通啊，hexo g自动屏蔽了以“.”开头的文件和文件夹。
我寻思着能不能通过修改.gitignore来解决这个问题，但最后试了好长时间也没搞好

只要思想不滑坡，办法总比困难多

想了好长时间，最终我终于想到了一个我自认为非常绝妙的方法

把.vercel文件夹和.gitignore文件依然放到source目录里
把它俩名字前面的“.”去掉，变成vercel和gitignore
执行hexo g，可以看到文件正常地被塞到了public根目录下
然后再把名字改回来，加上“.”
最后部署到Vercel，简直完美

理论存在，接下来就开始实践了

blog根目录下新建一个deploy.sh文件，输入以下内容：

#hexo cl&hexo d
hexo cl && echo "清理旧文件完成" && hexo g && echo "生成博客静态文件完成" &&
#进入public目录
cd public &&
#重命名文件准备部署
mv gitignore .gitignore && echo "重命名.gitignore完成" && mv vercel .vercel && echo "重命名.vercel完成" &&
#部署
vercel --prod && echo "部署完成"
#End
cd ..
echo "按任意键结束"
read -n 1

清理旧文件+生成博客静态文件+进入public目录+文件/文件夹重命名+部署+返回

一切顺利！问题已经解决！散！

最后

总结一下，其实简单来说就两部分

1.连接Vercel

先做1-4步

然后找到public目录下的.vercel文件夹和.gitignore文件，重命名把前面的“.”去掉
然后把它们剪切到source目录

如果以上步骤已做完，以后部署的时候就直接做部署这一步即可

2.部署

blog根目录下新建一个deploy.sh文件：
输入以下内容：

#hexo cl&hexo d
hexo cl && echo "清理旧文件完成" && hexo g && echo "生成博客静态文件完成" &&
#进入public目录
cd public &&
#重命名文件准备部署
mv gitignore .gitignore && echo "重命名.gitignore完成" && mv vercel .vercel && echo "重命名.vercel完成" &&
#部署
vercel --prod && echo "部署完成"
#End
cd ..
echo "按任意键结束"
read -n 1

部署的时候只需要双击deploy.sh即可，怎么样简单吧

3.关于六、七、八步

六、七、八步与直接部署Hexo到Vercel无关，可做可不做。