十年有多远

by Donald Lai

使用Gitee+Hexo搭建个人博客

作为典型的理工男毕业生,毕业十年有余,重新又要开博了。虽然不能保证持之以恒,主要是接触了新的技术,总想尝试着做点什么。带着这份天然的好奇心,一点一点的摸索,就又开始了使用博客这个古老的伎俩。不这过次不是使用wordpress之类成型的博客程序,而是因为看上了GitHub这样方便的免费工具。又因为国内访问GitHub速度奇慢,又发现了Gitee,尝试了几次,天然喜爱折腾的我又开始了。

环境要求

  • Git
  • NodeJs

我是使用Mac OS半年有余了,越来越喜爱这个操作系统。Git之前已经安装了,这次发现没有NodeJs,所以到NodeJs官网安装一个。国内网线下载经常断,我试了10来次才成功下载了10多M的安装包。只需在终端按主页的显示输入代码安装即可。

开始搭建

1、安装Hexo

打开shell终端,进入sudo -i进入root

2、添加环境变量

安装以后,可以使用以下两种方式执行 Hexo:

  1. npm install hexo-cli -g

  2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo

    1
    echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

3、初始化Hexo

在你的电脑上创建Hexo文件夹,在shell终端中切换到Hexo目录,输入命令 hexo init

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
ldd@MacBook-Pro blog % hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into '/Users/laidongdong/OneDrive/gitee/blog'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 161 (delta 12), reused 12 (delta 4), pack-reused 131
Receiving objects: 100% (161/161), 31.79 KiB | 93.00 KiB/s, done.
Resolving deltas: 100% (74/74), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into '/Users/laidongdong/OneDrive/gitee/blog/themes/landscape'...
remote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 1063 (delta 1), reused 1 (delta 0), pack-reused 1054
Receiving objects: 100% (1063/1063), 3.22 MiB | 375.00 KiB/s, done.
Resolving deltas: 100% (582/582), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO Install dependencies

> fsevents@1.2.11 install /Users/laidongdong/OneDrive/gitee/blog/node_modules/nunjucks/node_modules/fsevents
> node-gyp rebuild

SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node

> ejs@2.7.4 postinstall /Users/laidongdong/OneDrive/gitee/blog/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
added 445 packages from 499 contributors and audited 2632 packages in 39.333s

5 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

INFO Start blogging with Hexo!
ldd@MacBook-Pro blog %
ldd@MacBook-Pro blog %
ldd@MacBook-Pro blog % ls
_config.yml package.json themes
node_modules scaffolds
package-lock.json source

4、获取博客主题

我使用的是Hacker主题,到它的GitHub直接下载。

可以使用下面命令轻松获得。

1
git clone https://github.com/CodeDaraW/Hacker.git

5、本地预览博客

编译项目,输入命令:hexo g
运行项目,输入命令:hexo s

如果成功,跳过第6步。

本人在使用hexo g命令时,出现下面错误:

1
2
3
4
INFO  Checking dependencies
ERROR Package cheerio is not installed.
ERROR Package hexo-renderer-sass is not installed.
ERROR Please install the missing dependencies in the root directory of your Hexo site.

按提示信息发现是缺少了2个组件,需要先安装。

6、安装cheerio和hexo-renderer-sass组件

npm命令先安装cheerio,这个可以正常安装,如下提示:

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install cheerio
npm WARN saveError ENOENT: no such file or directory, open '/private/var/root/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/private/var/root/package.json'
npm WARN root No description
npm WARN root No repository field.
npm WARN root No README data
npm WARN root No license field.

+ cheerio@1.0.0-rc.3
added 19 packages from 51 contributors and audited 34 packages in 6.621s
found 0 vulnerabilities

接下来,继续用npm命令安装hexo-renderer-sass,这次发现失败了。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
npm install hexo-renderer-sass
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

> node-sass@4.13.1 install /private/var/root/node_modules/node-sass
> node scripts/install.js

shell-init: error retrieving current directory: getcwd: cannot access parent directories: Permission denied
internal/bootstrap/switches/does_own_process_state.js:128
cachedCwd = rawMethods.cwd();
^

Error: EACCES: permission denied, uv_cwd
at process.wrappedCwd [as cwd] (internal/bootstrap/switches/does_own_process_state.js:128:26)
at Object.resolve (path.js:978:47)
at patchProcessObject (internal/bootstrap/pre_execution.js:89:28)
at prepareMainThreadExecution (internal/bootstrap/pre_execution.js:16:3)
at internal/main/run_main_module.js:7:1 {
errno: -13,
code: 'EACCES',
syscall: 'uv_cwd'
}
npm WARN enoent ENOENT: no such file or directory, open '/private/var/root/package.json'
npm WARN hexo-renderer-sass@0.4.0 requires a peer of hexo@>= 3 but none is installed. You must install peer dependencies yourself.
npm WARN root No description
npm WARN root No repository field.
npm WARN root No README data
npm WARN root No license field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.13.1 install: `node scripts/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.13.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /var/root/.npm/_logs/2020-03-16T11_02_43_283Z-debug.log

改用淘宝镜像:

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

再次安装,成功了

1
2
cnpm install cheerio
cnpm install hexo-renderer-sass --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
✔ Installed 1 packages
✔ Linked 169 latest versions
[1/1] scripts.install hexo-renderer-sass@0.4.0 › node-sass@^4.5.3 run "node scripts/install.js", root: "/private/var/root/node_modules/_node-sass@4.13.1@node-sass"
Downloading binary from https://cdn.npm.taobao.org/dist/node-sass/v4.13.1/darwin-x64-72_binding.node
Download complete
Binary saved to /private/var/root/node_modules/_node-sass@4.13.1@node-sass/vendor/darwin-x64-72/binding.node
Caching binary to /var/root/.npminstall_tarball/node-sass/4.13.1/darwin-x64-72_binding.node
[1/1] scripts.install hexo-renderer-sass@0.4.0 › node-sass@^4.5.3 finished in 2s
[1/1] scripts.postinstall hexo-renderer-sass@0.4.0 › node-sass@^4.5.3 run "node scripts/build.js", root: "/private/var/root/node_modules/_node-sass@4.13.1@node-sass"
Binary found at /private/var/root/node_modules/_node-sass@4.13.1@node-sass/vendor/darwin-x64-72/binding.node
Testing binary
Binary is fine
[1/1] scripts.postinstall hexo-renderer-sass@0.4.0 › node-sass@^4.5.3 finished in 130ms
✔ Run 1 scripts
peerDependencies WARNING hexo-renderer-sass@* requires a peer of hexo@>= 3 but none was installed
Recently updated (since 2020-03-09): 1 packages (detail see file /private/var/root/node_modules/.recently_updates.txt)
✔ All packages installed (179 packages installed from npm registry, used 7s(network 5s), speed 659.5kB/s, json 170(321.96kB), tarball 2.97MB)

部署博客到Gitee上

1、在_config.yml中配置Git

1
2
3
4
deploy:
type: git
repo: https://gitee.com/xiuxiuing/blog.git
branch: master

注意:冒号后面一定要有空格,否则不能正确识别。

2、发布到Gitee

输入命令npm install hexo-deployer-git --save 安装自动部署发布工具

如下显示安装成功。

1
2
3
4
✔ Installed 1 packages
✔ Linked 6 latest versions
✔ Run 0 scripts
✔ All packages installed (1 packages installed from npm registry, used 923ms(network 922ms), speed 41.95kB/s, json 7(33.27kB), tarball 5.41kB)

输入命令hexo clean && hexo g && hexo d 发布博客,首次发布需要在shell中输入账号和密码。

平时本地化调试可以使用命令hexo clean && hexo g && hexo s

其它常用插件

1、添加RSS

1
cnpm install hexo-generator-feed

显示成功:

1
2
3
4
✔ Installed 1 packages
✔ Linked 2 latest versions
✔ Run 0 scripts
✔ All packages installed (1 packages installed from npm registry, used 978ms(network 976ms), speed 16.1kB/s, json 3(10.44kB), tarball 5.27kB)

Hexo的常用基本操作

1、文件头格式和分类的方法^2

Front-matter

文件头格式Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词(不推荐使用)

分类和标签

只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

1
2
3
4
5
categories:
- Diary
tags:
- PS3
- Games

如果您有过使用 WordPress 的经验,就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法:

1
2
3
categories:
- Diary
- Life

会使分类Life成为Diary的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类,可以尝试以下 list 中的方法。

1
2
3
4
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类: PlayStationGames 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。