前言
1.为什么是Vercel?
答:网上大多数教程使用的都是Github Pages, 然而Github在国内访问速度不佳。Vercel可以实现静态网页托管,也可以直接结合Serverless服务进行部署,同时在中国国内访问速度也尚可。当然,Vercel与Github Pages一样都是可以免费使用的,也提供免费域名与SSL。如果你想要使用自己的域名,也可以绑定。
2.为什么是Hexo?
答:相较于Vuepress与Hugo,Hexo的用户中国人较多,同时中文开发者也更多。
准备工作
1.注册一个Vercel账号、一个Github账号(具体步骤不做赘述)
2.环境安装
Hexo所需环境:
Node.js:https://nodejs.org/
Github Desktop:https://desktop.github.com/
Hexo CLI:(安装Nodejs后在终端执行如下命令)
npm install hexo-cli -g
正式开始
1.进入Vercel部署一个Hexo项目
进入Vercel的Dashboard之后,我们会看见这样的画面:
选择+ New Project进入创建项目的页面,点击Browse All Templates → ,搜索Hexo并选择,此时来到了这个界面:
我们需要将我们的Vercel账户与Github账户链接,选择Github按钮。
链接成功以后便可以创建仓库,之后便是一路Next。
直到我们看见这个页面,第一步就算完成了。
此时我们可以进入Dashboard找到项目的网址。此时已经可以正常访问。
2.本地环境部署
打开Github Desktop并按照步骤登录后进入主界面
将我们之前创建的Hexo仓库克隆到本地
打开刚刚克隆到本地的项目的目录,可以看到文件夹内的目录结构, 这些目录的具体作用可以参见Hexo官方文档
在该目录中打开终端,输入如下命令安装依赖
npm install
然后输入
hexo s
若http://localhost:4000/可以正常访问,则本地环境已经搭建完毕
3.对Hexo博客进行基本配置
这一步骤可以参考官方文档
作者在这里选用了butterfly主题进行演示,具体到各主题如何进行配置,可以参考各主题的文档。
4.同步仓库
当我们完成了博客的基本配置之后,通过Github Desktop进行仓库的同步。
5.后续维护
在我们完成了基本的部署之后,想要向我们的博客添加文章,只需在本地完成编辑,并在Github上传到对应目录即可。
当然还是需要按照Hexo的要求来。
作者在这里尝试上传一个测试文件到仓库中
可以看到Vercel几乎立刻做出了反应并完成了部署
访问博客之后也确实发现刚刚上传的测试文件生成的文章了。