Blog
0%

使用Gitee + Hexo搭建一个顺手的技术Blog

Posted on Edited on In

使用码云开始搭建一个博客

基本步骤

1
2
3
4
5
6
7
## 安装hexo，需要配置nodejs环境
npm install hexo -g
## 创建博客，目录名任意，此处为blog
hexo create blog
## 进入blog
cd blog

修改配置文件

配置文件 _config.yml

1
2
3
4
# URL节调整如下
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://q0519.gitee.io/blog
root: /blog/

创建博客

使用如下命令创建一个新的markdown文件

1
hexo new "Hello World！"

之后可以在 _source 文件夹中找到相应的文件。如果使用自动建立Category插件，可能需要手工设置folder及建立文件。

常用命令

1
2
3
hexo clean #清理发布文件及缓存
hexo g	   #生成发布文件
hexo d	   #发布到远程（依赖自动发布插件）

一些有用的插件

目前我使用了如下一些插件

自动发布Blog插件

1
2
## 安装hexo 部署插件
npm install hexo-deployer-git --save
1
2
3
4
5
6
# deploy节调整如下
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@gitee.com:q0519/blog.git
  branch: master

如果需要将工程源码也保存在gitee/github上面，可以单独对整个项目建立git远端存储，和deploy设置不同的Repository，以满足在任意环境都可以通过同步源码独立维护发布blog的需求。

自动建立Category的插件

可以根据Folder分配情况自动建立Category。

1
npm install hexo-auto-category --save
1
2
3
auto_category:
  enable: true
  depth: 2

源码地址

建立RSS订阅的插件

1
npm install hexo-generator-feed --save
1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
	- hexo-generator-feed
#Feed Atom
feed:
	type: atom
	path: atom.xml
	limit: 20

源码地址

渲染Plantuml

总共实验了两款plantuml插件，hexo-tag-plantuml以及hexo-filter-plantuml，我最后选择的是后者，理由如下：

  1. tag插件需要访问plantuml网站进行图形渲染，filter则可以配置为访问本地plantuml.jar，并且可以输出svg及base64图片到网页中，相对比较安全方便。
  2. filter对注释形式的uml tag支持比较好，可以兼容vscode + markdown + plantuml插件，整体体验较好。
1
npm install hexo-filter-plantuml --save

配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
plugin:
  - hexo-filter-plantuml
plantuml:
  #  Local or PlantUMLServer.
  render: "Local"
  # "inline": <svg>xxx<svg/>
  # "inlineUrlEncode": <img src='data:image/svg+xml;> 
  # "inlineBase64": <img src='data:image/svg+xml;base64> 
  # "localLink": <img src="/assert/puml/xxxx.svg">
  link: "inline"
  # where your dot binary
  GraphvizDotFile: "C:\\Program Files (x86)\\Graphviz2.38\\bin\\dot"
  # where your jar
  PlantJar: "C:\\Dev\\plantUml\\plantuml.jar"
  asset_path: "asset" #这个路径不是必须的，只是纠正一个拼写错误
  # common options: svg/png
  outputFormat: "svg"

注意，如果使用hexo clean清理public目录，需要在之后创建public目录。由于filter-plantuml插件对于文件夹有硬性要求，需要在生成阶段保证public目录存在，才能进行后续路径创建。相信这个bug会在之后的发布修正。

另外，如上两个插件不可以在项目中并存。如果都安装了，可以通过如下命令卸载其中之一。

1
npm uninstall ???

源码地址

文章中嵌入本地图片

如下只考虑与文章同文件路径的asset引用方法。

需要安装如下插件

1
$ npm i --save hexo-asset-link

该插件将自动转换markdown中的相对路径到发布的路径。比如，本地有一个markdown文件，名为 test.md，路径如下：

1
2
3
_post/
	test/
	test.md

则可以将test/文件夹作为asset文件夹，放置图片之类，之后通过markdown的图片引用语法

1
![image alt](test/test.jpg)

进行图片引用，asset-link将会自动调整路径。

使用Next theme

本站使用NexT Theme来风格化hexo，具体安装可以参考 NexT

国内多数站点介绍，需要修改theme/next/_config.yml文件，但不建议这么做。相关override的方法是增加如下文件：

1
source/_data/next.yml

则在默认情况下，next.yml中的配置项会覆盖掉NexT默认的，比较方便。

Welcome to my other publishing channels