参考:使用Vercel+GitHub快速构建Hexo博客 - 知乎 (zhihu.com)
如何使用 vercel + hexo 搭建博客_慕课手记 (imooc.com)
1. 介绍
vercel: Vercel 提供了一个云平台,可以优化整个项目开发和部署体验,它有很强大的功能值得去探索,个人使用是免费的,提供了域名访问,使用方便快捷。
hexo: Hexo 是一个基于 nodejs 的静态博客网站生成器,通过使用脚手架安装后,命令操作简单,直接开箱使用,支持丰富的主题,支持高度的自定义化,主要使用 markdown 语法。你可以自行开发插件,优化你的博客。
2.Vercel 一键部署原生 Hexo
去 https://vercel.com/ 网站用 GitHub 注册一个账号后并登陆。
然后重新输入网址 https://vercel.com/ 并访问

这大概就是大家看到的页面,点击 New Project 按钮,然后点击 Browse All Templates → 按钮,在第 4 行的第 1 个就是 Hexo

点击进去,可以看到图片所示的内容。

选择灰框勾选的内容,也就是你的 GitHub,然后点击 Select 按钮,然后点击 GitHub 在 GIT SCOPE 处选择你想要储存 Hexo 的用户,在 REPOSITORY NAME 处填上你想要储存 Hexo 的仓库,并勾选 Create private Git Repository 选项,这个选项是将该仓库设为私有仓库,对他人不可见。然后点击 Continue 按钮,然后什么都不需要修改,直接点击 Deploy,等待它自动完成构建,3 分钟之内完成,并分发一个免费的二级域名,可以暂时用于使用(不会回收,但不建议使用)


部署完成后,它就和你刚刚所填写的仓库绑定了,一旦你的仓库有什么变化,它就会自动同步部署,全过程大概 5 分钟可以完成部署。
3. 在本地构建hexo环境
上一步我们完成了对hexo的云端部署,vercel默认是从GitHub拉取数据,故若要对网站进行更改,则必须要对Github进行更改。而对Github更改最简单的方式就是链接云端与本地,在本地hexo环境下进行更改后推送至Github。
所以,我们首先要在本地构建一个hexo环境。
安装依赖:
安装git
在Git for Windows下载,一路默认安装即可,详细参见配置git文章
安装node.js
在Node.js (nodejs.org)下载,安装好 nodejs 后,也会相应的安装上 npm。
安装hexo:
在资源管理器右键菜单或开始菜单里,可以找到 Git Bash ,打开后是个命令行界面,输入:
1 | npm install -g hexo |
等待安装完毕
4. 链接Github
打开 Git Bash ,运行下面的命令 :
1 | ssh-keygen -t rsa -C "{{你的电子邮箱地址}}" |
连续 3 次回车,最终会在用户目录下生成个包含公钥私钥等数据的目录 ( 一般是 C:/Users/{{你的用户名}}/.ssh/ ) 。

打开这个目录,找到 id_rsa.pub 文件,用你喜欢的二进制文本编辑器 ( 记事本 ) 打开并复制里面的内容。前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key ( 即 [该链接](Add new SSH keys (github.com)) ):
将刚复制的内容粘贴到 Key 中,Title 填你喜欢的,点击保存 ( Add SSH Key ) 。

在Git Bash运行下方命令 :
1 | git config --global user.name "{{你的 GitHub username}}" |
打开 Git Bash ,运行下面的命令 :
1 | ssh -T git@github.com # 此处邮箱地址不用改 |
如果提示 Are you sure you want to continue connecting (yes/no)? 请输入 yes 并回车。
1 | Hi {{你的 GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access. |
看到这个信息则说明配置成功。
5. 拉取云端数据,进行修改
这里使用Github Desktop进行连接(git的命令行界面实在是太痛苦了)
从[官网](GitHub Desktop | Simple collaboration from your desktop)安装Github Desktop
打开,按下图clone repository选择hexo即可

在项目文件夹下,打开Git Bash,首先需要安装项目依赖,通过npm install 或 cnpm install 或yarn install皆可安装依赖。
依赖安装成功后,执行hexo server -p $PORT即可启动项目,其中$PORT 默认 4000,你也可以修改端口。hexo 也提供了简易方式启动命名:hexo s,启动后在浏览器访问:localhost:4000即可打开。

6. 在本地写文章,并推送到云端
进入 Hexo 所在的目录,Git Bash输入以下命令
1 | hexo new'{{文章名称}}' |
运行后 source\_posts\ 目录下就多了 {{文章名称}}.md 文件,单击文件,hexo 默认生成了头部信息。
文件内容结构如下 :
1 | --- |
文章内容支持 Markdown 语法,直接用编辑器修改即可,参考另外一篇文章进行写作。
写好后,仍然使用Github Desktop推送到云端,按下图所示操作:

过几分钟会收到vercel给你发来的邮件,访问网页,你的博客已经自动更新完成了。




