个人博客

以Mac系统安装为例，其它Windows、Linux系统安装都是大同小异。

1、下载安装nodejs

下载地址：https://nodejs.org/zh-cn/ ，选长期支持版本进行下载安装。

node -v命令验证是否安装成功。

1
2
zhaoxb:hexo_blog zhaoxiaobin$ node -v
v12.19.0

2、安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v命令验证是否安装成功。

1
2
3
4
5
6
7
8
zhaoxb:hexo_blog zhaoxiaobin$ cnpm -v
cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.8 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@12.19.0 (/usr/local/bin/node)
npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 19.4.0 
registry=https://r.npm.taobao.org

安装这个主要是为了后面安装插件能够加快下载速度。

3、安装hexo

cnpm install -g hexo-cli

hexo -v命令验证是否安装成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
zhaoxb:hexo_blog zhaoxiaobin$ hexo -v
hexo: 5.2.0
hexo-cli: 4.2.0
os: Darwin 19.4.0 darwin x64
node: 12.19.0
v8: 7.8.279.23-node.44
uv: 1.39.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.2
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

4、创建博客目录并初始化

选择在自己喜欢的目录下创建博客目录作为workspace

1
2
3
mkdir hexo_blog
cd hexo_blog
hexo init

博客文章所在目录为source/_posts，默认会有一篇Hexo的介绍文档。

在这个目录下可以新建markdown格式的文件来创建一篇博客文章，会被转成html页面来进行展示。

当然也可以在博客目录hexo_blog下使用hexo n xxx命令来创建一篇文章，最后效果也是在source/_posts目录下生成一个名为xxx.md的文件。

1
hexo n xxx

5、启动查看效果

hexo s命令启动服务，根据提示，浏览器打开http://localhost:4000/访问可以看到初始化的博客页面。

6、github创建repositroy

这里使用github pages功能，托管静态代码来做个人主页，仓库名称必须为 username.github.io，比如我的是senlinmu1008.github.io。仓库最好选择公开，以免影响访问。
-w722

当然这里并非一定要使用github，也可以使用国内的gitee pages或者coding也有托管个人博客的功能，只不过我个人使用下来还是github最好用最靠谱，只不过访问速度可能有点慢，可以用CDN加速来解决。

7、安装部署插件

进入到博客目录下执行安装插件。

1
2
cd hexo_blog
cnpm install --save hexo-deployer-git

这个插件可以把生成的页面通过git推送到github仓库中，当然前提是你已经安装好了git工具。

8、添加_config.yml文件的部署地址

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/senlinmu1008/senlinmu1008.github.io.git
  branch: master

这里仓库地址repo填成实际个人的，就是git clone下代码的那个地址，可以用https也可以是SSH。

当然这里也可以使用gitee或者coding的仓库，也可以同时配置多个，比如：

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github: git@github.com:senlinmu1008/senlinmu1008.github.io.git
    gitee: git@gitee.com:ppbin/ppbin.git
    coding: git@e.coding.net:zhaoxiaobin/blog/blog.git
  branch: master

上面用的是SSH方式，好处就是配置了SSH keys以后都不用再输账号密码了。

9、部署

分别执行hexo g、hexo deploy命令进行页面生成和远程部署。

1
hexo g
1
hexo deploy

如果是第一次推送到github，这里可能会提示输入仓库的账号密码，如果配置了SSH keys则不需要输入。

10、查看效果

浏览器输入域名个人的username.github.io，比如senlinmu1008.github.io，不出意外的话，就可以看到当前个人博客的初始页面效果。

到这一步其实个人博客已经搭建完成，当然个性化的配置以及自定义域名这些都是后续看个人喜好和需要了。

11、更换主题

可以在网上搜一些Hexo的主题，选择一个自己喜欢的，下载到themes目录下，然后修改_config.yml配置文件。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

修改为自己下载的主题名称。比如这里我个人用的是butterfly主题。如果对个性化配置要求比较高，可以学习下怎么配置主题，一般常用主题都会有详细而全面的教程来指导如何使用。

11.1、更新主题

如果后续主题升级了需要更新，可以使用以下步骤（需要切换到主题所在的目录中）：

1
2
3
4
5
6
7
8
# 将当前主题修改的内容增加到工作区
git add .
# 个人修改的暂存本地并还原已修改的文件
git stash
# 执行更新主题
git pull
# 恢复个人修改的文件内容，可能需要合并
git stash pop

12、常用命令

一般Hexo的命令都要在博客所在目录即之前创建的workspace目录下执行才有效。

命令功能
hexo clean清除所有生成的页面文件
hexo g生成页面
hexo deploy推送部署到远程服务器
hexo n xxx新建一篇名为xxx的文章

13、安装一些压缩库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cnpm install gulp@4.0.2 --save
cnpm install gulp-htmlmin@5.0.1 --save
cnpm install gulp-uglify@3.0.2 --save-dev
cnpm install gulp-imagemin@7.1.0 --save-dev
cnpm install gulp-htmlclean@2.7.22 --save-dev
cnpm install gulp-clean-css@4.3.0 --save-dev
cnpm install gulp-babel@8.0.0 --save-dev
cnpm install @babel/preset-env@7.24.6 --save-dev
cnpm install @babel/core@7.24.6 --save-dev

# 更新@vant/weapp这个库到最新版本
cnpm update @vant/weapp@lastest -S --production

# 卸载
cnpm uninstall gulp gulp-htmlmin gulp-uglify gulp-imagemin gulp-htmlclean gulp-clean-css gulp-babel @babel/preset-env @babel/core

14、hexo主题版本控制

1
2
3
4
5
6
7
8
9
# 指定下载某个tag版本的主题
git clone --branch 3.8.4 https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 回退到指定tag
git show 3.8.4
git reset --hard de8e35d0d0a54f024ca4f748083490ad0f8d4cce

# 回到最新tag
git pull

15、serverless常用命令

如果用serverless部署，可以参考命令：

1
2
3
4
5
6
7
8
9
#命令后增加 --debug 参数可查看执行详情
# 部署
sls deploy
# 删除
sls remove
# 查看信息
sls info
# 帮助
sls help

16、常见问题解决

16.1 non-existent property ‘xxxx’

1
2
3
4
5
6
7
(node:38339) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:38339) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:38339) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:38339) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:38339) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:38339) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

更新hexo-renderer-stylus为3.0.1版本即可解决

1
cnpm install hexo-renderer-stylus --save

参考如下链接：
https://www.haoyizebo.com/posts/710984d0/
https://zhuanlan.zhihu.com/p/431514143

16.2 安装gulp-imagemin报错

1
2
# 问题：如果安装gulp-imagemin错误请执行以下语句
sudo cnpm i gulp-imagemin --unsafe-perms