Hexo + Vercel 搭建个人博客

创建项目

本文记录了自己使用 Hexo + Vercel 搭建个人博客的过程。

首先是安装 hexo 并初始化项目：

1
2
3
4
5
6
npm install -g hexo-cli
hexo --version  # 验证是否安装成功

hexo init myBlog
cd myBlog
npm i

安装主题可以去 hexo-theme 查看，我选择了 maple:

1
2
cd your-blog/themes
git clone https://github.com/xbmlz/hexo-theme-maple.git themes/maple

修改相关的配置 _config.yml:

1
2
- theme: some-theme
+ theme: maple

添加其他页面如 tag:

1
hexo new page tags

source/tag/index.md 中的 front-matter 需要添加 layout：

1
2
3
4
---
title: tag
layout: tag
---

注意 themes/maple/_config.yml 中也需要修改相关配置，一些自定义的样式也可以修改 themes/maple 里面的内容。

部署到 Vercel

在 _config.yml 中添加部署配置：

1
2
3
4
deploy:
  type: git
  repo: ssh...  # 你的仓库地址
  branch: main

然后安装 hexo-deployer-git 插件：

1
npm install hexo-deployer-git --save

将生成的静态文件上传到 github：

1
2
3
hexo clean
hexo generate
hexo deploy

然后在 vercel 中导入项目，选择 github 仓库，Framework Preset 选择 Others，部署命令空着即可，因为 hexo 生成的静态文件已经上传到 github 了，然后点击 Deploy 即可。

添加额外功能

RSS

安装 hexo-generator-feed 插件：

1
npm install hexo-generator-feed --save

_config.yml 中添加：

1
2
3
4
5
6
7
8
9
10
feed:
  type: 
    - atom
    - rss2
  path: 
    - atom.xml
    - rss2.xml
  limit: 20
  order_by: -date
  autodiscovery: true

域名

TODO

vscode 添加 md 代码片段

每次写 blog 的时候都要在开头添加一些配置信息，这个时候就可以使用 vscode 的代码片段功能，快速添加配置信息。

首先 cmd + shift + p 输入 settings，选择 Preferences: Open Settings (json)，然后添加如下代码：

1
2
3
"[markdown]":{
    "editor.quickSuggestions": true
},

然后 cmd + shift + p 输入 snippets，选择 Preferences: Configure User Snippets，然后选择 markdown.json，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
	"create a new blog post": {
		"prefix": "blog",
		"body": [
			"---",
			"title: ",
			"date: ${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE}",
			"tags:",
			"  - ",
			"---",
			"",
		],
		"description": "Create a new blog post"
	},
}

这样以后在 markdown 文件中输入 blog 就可以快速添加配置信息了。