一、安装Nodejs

  • 下载对应的nodejs版本的安装包
  • 解压到/usr/local目录下
  • 创建node软连接sudo ln -s /usr/local/node-v16.13.1-linux-arm64/bin/node /usr/bin/node
  • 创建npm软连接sudo ln -s /usr/local/node-v16.13.1-linux-arm64/bin/npm /usr/bin/npm
  • 创建npm软连接sudo ln -s /usr/local/node-v16.13.1-linux-arm64/bin/npx /usr/bin/npx
  • 检查是否安装成功node -v、npm -v

二、安装Hexo

  • 使用npm install -g hexo-cli安装Hexo
  • 创建npm软连接sudo ln -s /usr/local/node-v16.13.1-linux-arm64/bin/hexo /usr/bin/hexo
  • 安装组件npm install

hexo常用命令：

1
2
3
4
5
6
7
8
#初始化博客文件夹
hexo init
#启动服务器
hexo s
#生成静态文件
hexo g
#清除已生成文件
hexo clean

三、部署nginx容器

在docker-compose.yml中配置nginx容器配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#容器名称
nginx:
	#镜像名:版本
    image: nginx:1.18.0
    #配置重启规则
    restart: always
    #端口配置
    ports:
      - 80:80
    #参数配置
    volumes:
      - /etc/localtime:/etc/localtime:ro	#配置时区时间
      - ./conf/nginx/app/nginx.conf:/etc/nginx/nginx.conf:ro	#配置nginx多配置文件映射
      - ./conf/nginx/app/conf.d:/etc/nginx/conf.d	#配置nginx配置文件映射
      - ./conf/nginx/log:/var/log/nginx			   #配置日志文件映射
      - ./conf/nginx/public:/usr/share/nginx/html	#配置静态资源映射

四、Butterfly主题安装

在你的 Hexo 根目录里下载主题文件:
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改 Hexo 根目录下的config.yml：

1
2
#把主题改为butterfly
theme: butterfly

安装插件：npm install hexo-renderer-pug hexo-renderer-stylus --save

  • 在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ,而不是 hexo 的 _config.yml)

  • 注意： 不要把主题目录的 _config.yml 删掉

  • 注意： 以后只需要在 _config.butterfly.yml进行配置就行。

  • 如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。
    Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

五、Butterfly主题修改

Hexo 博客生成永久链接

前言

  • Hexo 文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。
  • 这样的话，生成的链接非常长长长长长，而且如果我们的 Markdown 使用中文标题，那就更惨了，URL 一转码，将是一场灾难。
  • 更难受的是如果我们修改了文章的日期或者标题，那么将导致链接改变，别人或者你分享出去的文章就会 404，这非常的蛋疼啊，所以就有了这种插件，不论你如何修改文章的日期、名称，只要不改变 footer-matter 中的 id 值，那么文章链接永远不会变。

安装插件

1
npm install hexo-abbrlink --save

修改_config.yml配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
## permalink: :year/:month/:day/:title/
permalink: :abbrlink/  ## 此处可以自己设置:posts/:abbrlink.html

#增加以下配置：
## abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32 进制
  rep: hex        #support dec(default) and hex  算法
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  ## Generate categories from directory-tree
  ## depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.
  • 最后清理下 hexo clean 再重新生成 hexo g。

样式引入

在\themes\butterfly\source\css\目录下新建custom.css文件，然后在_config.butterfly.yml配置文件的inject配置项中引入自定义样式文件。

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'">

编辑custom.css文件

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* 首页内容字体颜色 
#site-subtitle{
  color: #4C4948!important;
}
*/

/* 导航字体颜色 
#page-header #site-title{
  color: #1F2D3D!important;
}
*/

/* 导航字体颜色 
#nav a{
  color: #1F2D3D!important;
}
*/

/* 页脚字体颜色 */
#footer-wrap{
  color: #4C4948!important;
}

/* 页脚a标签字体颜色 */
#footer-wrap a {
  color: #4C4948!important;
}

/* 页脚透明 */
#footer{
  background: transparent!important;
}

/* 页脚黑色透明玻璃效果移除 */
#footer::before{
    background: transparent!important;
}
  
/* 头图透明 
#page-header{
  background: #49b1f5!important;
}
*/
  
/* 头图遮罩层透明 */
#page-header::before{
  background: transparent!important;
}
  
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 
#page-header.post-bg:before {
  background-color: transparent!important;
}
*/

/*夜间模式伪类遮罩层透明
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
  }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
  }
*/

相关资料查阅：
Butterfly主题美化教程