使用 Vercel 和 Github 部署 Hexo 安装以及使用教程
引言
本教程会教你如何使用 Github + Vercel 部署 Hexo 博客
为什么选择 Hexo?
很多玩博客的大佬都在使用 Hexo 静态博客作为自己的系统而不是 WordPress 或者 Typecho,这是因为 Hexo 这一类的静态博客,可以部署在很多稳定且免费的环境中,同时也可以保持访问速度,对于大佬来说,这是个最好不过的选择了。
优点:
- 环境稳定且免费,可以省出维护服务器的精力和开支
- 大佬们一般对服务器有很高的要求,一个服务器通常会专门做一件事情,如果挂博客太低的配置没法有很好的访问性能,太高的配置又是资源浪费,中规中矩的配置却又比上不足比下有余,这时候
静态博客
就是个很好的解决方案。
在所有静态博客系统中,最受欢迎的,莫过于 Hexo 系统。
当然,如果你比较喜欢 Hugo
,也可以仿照本教程进行安装。
方案细则
把 Hexo 文件放在 Github 上,每次更新文件都推送到 Github 上,由 Vercel 自动拉取构建
安装教程
账号准备
请注册好:Github 账号
再前往Vercel 网站使用Github账号注册一个账号。这样注册好以后 Vercel里面就可以看到你 Github 里面的项目了。
创建 Hexo 项目
创建 Hexo 项目直达链接:
Deploy这时候就到了创建 Hexo 项目的页面了。
左边的 Git Scope
是你的 Github 账号,右边 REPOSITORY NAME
是你账号下 Hexo 博客仓库的名字,你的博客源文件就存放在这里,名称可以自选
项目可见性就保持 Private
,这样别人就看不到你 Hexo 仓库的各种机密信息了,有效保持版权和隐私
最后点击 Create
创建项目,等一会就好了。
最后成功以后,会给你一个二级域名,这个二级域名是属于你的,不会回收,建议可以调试的时候临时使用。
部署完成后,它就和你刚刚所填写的仓库绑定了,一旦你的仓库有什么变化,它就会自动同步部署,全过程大概 5 分钟可以完成部署。
你现在可以点击那个二级域名,就可以看到你的 Hexo 博客了。
但是不建议长期使用。
原因有下:
- 这个
vercel.app
域名已经被各大搜索引擎屏蔽,无法被收录 - 这个
vercel.app
根域名已经被中国大陆防火长城屏蔽,中国国内无法访问,如果你的读者面向国内,不建议使用
所以建议绑定自己的域名。
本地调试
本步骤会在本地安装hexo环境,更改主题/文章后能及时看到,改好以后可以直接 push
代码到你的 Github 仓库,让 Vercel 自动拉取并且部署。
本地环境配置
安装 NodeJS
Macos,Windows均可安装环境。如果你是资深geek,Node.js
已经安装好的,可以直接跳过本步骤
安装 Node.js
,可以前往 Node.js官网下载安装
安装好以后,接下来是验证配置
macOS用户请打开终端 (Terminal)
Windows用户请打开
CMD
通过下面的代码查看 Node.js 版本
1 | node -v |
如果有显示,那么就说明配置成功了
安装本地 Hexo
macOS用户请打开终端 (Terminal)
Windows用户请打开
CMD
输入以下命令安装 Hexo
1 | npm install -g hexo |
等一会,大概一分钟
提示 hexo@[版本号] 即为安装成功。接下来是配置 Push 方式
上传方式配置
提供两种 Push 方式,二选一,分别是 git
和 Github Desktop
。
Github Desktop
使用和配置更加方便,推荐使用。
Github Desktop
前往 Github 官网下载 并安装。
安装好并且登录你的 Github 账号,会出现如下界面
点击左上角,点击 Add
新增项目,选择 Clone 仓库
,选中你之前创建的 Hexo 仓库,然后点击 Clone
把仓库克隆下来。
接下来你就能在 Local Path
中显示的文件地址找到你项目的文件夹了。
Git 方式
首先安装 Git
,可以前往Git官网下载安装
安装好以后,接下来是验证配置
macOS用户请打开终端 (Terminal)
Windows用户请打开
Git bash
通过下面的代码查看 Git 版本
1 | git -v |
如果有显示,那么就说明配置成功了
接下来配置 GitHub & SSH key
macOS用户请打开终端 (Terminal)
Windows用户请打开
Git bash
打开 Git Bash ,运行下面的命令:
1 | ssh-keygen -t rsa -C "你的电子邮箱地址" |
连续3次回车,最终命令行会显示公钥私钥等数据的目录地址(这边从网上盗个图)
找到 id_rsa.pub
文件的目录,用文本编辑器(VScode或者记事本)打开这个文件,复制里面的全部内容。
前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key
,直达链接:这里捏
将刚复制的内容粘贴到 Key
中,Title
填你喜欢的,点击保存 Add SSH Key
。
接下来设置 Git
在终端中运行以下指令:
1 | git config --global user.name "你的 GitHub username" |
验证是否配置成功
1 | ssh -T git@github.com #这里不用更改邮箱地址 |
如果提示如果提示 Are you sure you want to continue connecting (yes/no)?
输入 yes
并回车。
看到
1 | Hi [你的Github用户名]! You've successfully authenticated, but GitHub does not provide shell access. |
就说明成功了,到此,本地环境配置成功
克隆Github仓库
前往你在 Github上的仓库,然后点击 Code
,复制 HTTPS
下方的链接
先cd
到你打算放博客的文件夹,再使用以下命令克隆你的 hexo 仓库到本地
1 | git clone 粘贴你的链接 |
比如这样:
私有仓库 clone 可能需要输入 Github 账号和密码。
此时,当你输入 Github 密码的时候,会提示错误。因为 Github 已经关闭了 Password Login Support
所以请前往 Github -> Settings -> Developer Settings -> Personal Access Token
创建一个Token。直达链接:这里捏
命名随便,过期时间选择 No expiration
,**然后勾选 repo
**
如图
创建完成以后复制这个 Token,保存好,因为这个 Token 只显示一次。
此时就可以继续命令行登录账号了。
账号是你 Github 邮箱
密码是你刚刚复制的 Token
本地使用教程
现在既然clone好了,那么该如何使用呢?
每次当你改完hexo文件,可以使用以下命令让 hexo 在本地运行起来
1 | hexo clean&&hexo s |
hexo clean
是清除之前的缓存
hexo s
是指运行 hexo server
当你看见这条信息的时候,就可以打开 http://127.0.0.1:4000 查看你所做的更改的效果了
如果要结束运行,可以执行:Ctrl+C
如果本地测试好没问题,就可以 push 到 Github 了
上传文件
Github Desktop 方式上传
首先点击 Fetch Origin
查找文件改动
然后在左下角的输入框中写本次文件改动 (Commit) 总结,然后点击 Commit to main
最后,点击右上角的 Push origin
,这样文件就上传到 Github 了
Git 方式上传
查看文件状态:
1 | git status |
添加所有更改后的文件:
1 | git add --all |
对这些文件进行 commit:
1 | git commit -m "你要commit的内容" |
最后,同步到 Github 云端仓库:
1 | git push |
此时,Vercel 会自动拉取更改信息,重新构建网站,过程一般40s左右
配置教程
安装主题
这个很简单,在网上找到你喜欢的主题,找到主题的 Github 链接,上面就会有安装教程。
欢迎使用我写的 Redefine 主题
跟着安装即可,编辑 hexo 根目录下的 _config.yml
文件,把 theme
选项从默认的 landscape
更改为你所用主题的名字,比如这里就改成 redefine
最后测试没问题就可以参考 步骤2.3.5 push 到云端了
具体的主题的自定义指南可以看主题自己的文档,比如我的 Redefine 主题文档
安装插件
Hexo 插件还是比较多的,可以自行去网上找。
找到插件的 Github 页面,也会提供安装指南
比如这个 sitemap 插件
执行命令,安装好以后根据插件文档,在 hexo 根目录下的 _config.yml
中添加指定参数就行。
比如这个插件的参数
最后测试没问题就可以参考上文 push 到云端了
总结
如果安装有问题,欢迎联系我,我会及时回复
如果写的还不错,欢迎留下评论,让我知道。谢谢阅读!
让我知道。谢谢阅读!
- Title: 使用 Vercel 和 Github 部署 Hexo 安装以及使用教程
- Author: Evan Luo
- Created at : Aug 27 2022 11:19:26
- Updated at : Dec 2 2024 12:59:24
- Link: https://ohevan.com/vercel-hexo-configuration.html
- License: This work is licensed under CC BY-NC-SA 4.0.