这是我搭建的首个个人博客,使用的是 Hexo + Butterfly。初次见面,请多多指教💕

快速开始

创建新文章

1
$ hexo new "My New Post"

详情查看: Writing

运行服务

1
$ hexo server

详情查看: Server

上传 algolia 搜索内容

1
$ hexo algolia

生成静态文件

1
$ hexo generate

详情查看: Generating

部署

1
$ hexo deploy

详情查看: Deployment

上传到 github

1
$ hexo g -d

升级 hexo-theme-butterfly

1
$ npm update hexo-theme-butterfly

本地预览

使用 vscode 预览博客时显示本地图片

本地博客中的本地图片地址一般为 /img/xxx,省略了本地目录的 soucre 文件夹,博客部署时会把所有文件夹都部署在根目录(本地图片 /source/img/xxx,服务端 /img/xxx),显示正常,但是本地预览则找不到此路径,所以预览时会显示不出来。
如果你使用vscode的话,可以推荐此方案:
安装 Markdown Preview Enhanced 插件,运行 Markdown Preview Enhanced: Extend Parser 命令,会打开 parser.js 文件(详情查看此 文档),做以下修改,保存后则本地图片预览正常(需要使用 Markdown Preview Enhanced 插件预览博客,而非 vscode 自带)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
({
// Please visit the URL below for more information:
// https://shd101wyy.github.io/markdown-preview-enhanced/#/extend-parser

onWillParseMarkdown: async function(markdown) {
// 替换hexo本地图片地址
markdown = markdown.replace(/\/img\/blog\//g, '/source/img/blog/');
return markdown;
},

onDidParseMarkdown: async function(html) {
return html;
},

onWillTransformMarkdown: async function(markdown) {
return markdown;
},

onDidTransformMarkdown: async function(markdown) {
return markdown;
},
})

images