我的博客搭建过程和使用

搭建过程

基础Hexo搭建方法

  1. 安装 Node.js与git

    Node.js 是一个开源的、跨平台的 JavaScript 运行环境

  2. 安装 Hexo和butterfly

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    npm config set registry https://registry.npmmirror.com
    npm install hexo-cli -g

    cd 你要创建站点的目录
    hexo init blog
    cd blog
    npm install
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly #主题要在theme里，可以魔改
    npm install hexo-renderer-pug hexo-renderer-stylus --save # pug以及stylus的渲染器
    npm i hexo-theme-butterfly #在博客的文件夹下

  3. 创建一个github的page，需要创建“用户名.github.io”仓库，具体搜一下

    这个github page只用于保存生成好的html文件，并不保存博客的原始文件，所以还是创建了一个远程仓库用于保存博客原始文件

    1
    2
    3
    4
    5
    # 然后改一下config.yml
    deploy:
      type: git
      repository: git@github.com:outbreak-sen/outbreak-sen.github.io.git
      branch: main

使用butterfly主题

参考butterfly的github

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改配置文件 config.yml 中的 theme 项为 butterfly，之后也不要编辑config文件了，测试不好使，只编辑_configbutterfly.yml！！！！！

然后就可以编辑config文件进行美化，这边对config文件进行了注释，然后方便改动

目录说明

博客的文件目录和说明如下

  • img： 作用未知，往里面存图片没有用啊
  • node_modules：nodejs的插件安装位置
  • public：编译好的网页将保存在此处，每次hexo clean的时候只更新这里
  • scaffolds：保存博客的不同layout，比如post，draft，page的layout，还有其他的layout比如categories，tags是默认的
  • source：博客
    • _data：
    • _post：这里面是重要的博客单页，每个博客都有标题和兴趣tag，在生成的时候自动分类，不用自己分类到文件夹
    • _about：这里就是一个page的index.md，page的layout是"about"，里面是自己的介绍
    • archives：按照时间轴进行分类，这里就是一个page的index.md，page的layout是"archives"，不用管，有这个就可以看到分类页
    • categories：按照分类进行分类，这里就是一个page的index.md，page的layout是"categories"
    • tags：按照兴趣进行分类，这里就是一个page的index.md，page的layout是"tags"
    • shuoshuo：需要创建一个对应名称为shuoshuo的tag，然后就可以在此处看到
    • 这里的每个文件夹本身是不编译的，但是如果在config文件中编写同名目录则网页出现对应目录链接，然后点击进链接首先出现的是该目录下的index.md。如果要创建一个图库，则index里编写图如何摆放即可，如果创建一个tegs分类，则index里把type改为tags则自动进入一个按照tag分类的界面。关于笔者，即about页面，其实也是一个page，然后设置好layout为about
  • themes：
    • butterfly：里面的img目录为主页，人像等配置的默认目录

图片修改

图片在/themes/butterfly/source/img更改，如果想要纯透明的，可以用png格式的图片,将jpg格式的图片转换为png格式的图片，然后在图片编辑软件中将透明度调成0.0~0.9之间，然后保存为png格式的图片。

如何优雅插入博客图片

有两类图需要插入，一种是博客搭建使用的图片，比如个人头像，背景图像等，另一种是博客中需要插入的图。

对于第一种，可以创建一个img目录直接插入图像，知否不会改动。或者直接插入到/themes/butterfly/source/img这个目录下，这样编写的路径比较好看但是因为这样插入的是theme文件夹，破坏了原先的主题文件夹，所以我不喜欢。（站点根目录是站点目录的source文件夹里）

对于第二种，优雅的方法是为每一个文章创建一个资源文件夹，将图片保存其中

  • 在博客根目录打开_config.yml文件做如下修改： yaml post_asset_folder: true
  • 然后使用hexo n text命令后创建一个使用post布局名为text的文章，你将发现hexo在\source\_post文件夹下创建了一个\text文件夹以及同名的.md文件：
  • 使用Typora编辑器，可以在编辑器的文件/偏好设置/图像中进行如下设置：插入图片时：选择复制到制定路径：./${filename}/

目录和类型

每个博客有两个属性，tag指的是内容涉及的话题，categories是指post的分类

  • 博客顶部的Front-matter是保存文章信息的地方，里面写明了文章创建的时间，标签，名字，也可以加入，分类，更改日期，评论系统是否开启等

  • 在scaffolds目录下有多个layout文件，默认为draft.md， page.md，post.md三个，对应创建博客时候的layout，也对应每个创建的md博客顶部的layout。

    • 所谓page，就是点击一个单页，比如点击categories的时候出现的index.md就是一个page，点击图库出现的收藏了一堆图片的单页就是page

    • 使用 draft 布局建立的文章，其博客文章 md 源码位于 source/_drafts 路径下， hexo generate 不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署发布到博客网站上。Hexo提供了一个预览的方法，就是：

      1
      2
      hexo s --draft
      hexo publish aaa #将aaa.md的草稿发布为博客，其中aaa是文章名，不包含.md后缀，该命令的原理也不过是将文章从/source/_drafts移动到/source/_posts而已
  • # 目录图案
menu:
  主页: / || fas fa-home
  博文 || fa fa-graduation-cap:
    分类: /categories/ || fa fa-archive
    时间轴: /archives/ || fa fa-folder-open
  生活 || fas fa-list:
    学习笔记: /shuoshuo/ || fa fa-comments-o
    相册: /photos/ || fa fa-camera-retro
    影视鉴赏: /movies/ || fas fa-video
  关于笔者: /about/ || fas fa-heart
# 菜单项后面的 fas fa-home、fa fa-graduation-cap 等是 Font Awesome 图标 的类名，用于在菜单项旁边显示对应的图标。https://fontawesome.com/icons
# 在 Butterfly 主题的 _config.yml 中，确保以下配置为 true
# fas fa-home：表示一个“家”图标，通常用于“主页”菜单项。
# fa fa-graduation-cap：表示一个“毕业帽”图标，通常用于“博文”或“文章”相关的菜单项。
# fas fa-list：表示一个“列表”图标，通常用于“生活”或“分类”菜单项。
# fas fa-heart：表示一个“心形”图标，通常用于“关于笔者”或“喜欢”菜单项。

# fas：表示 Solid 风格（实心图标）。
# far：表示 Regular 风格（空心图标）。
# fab：表示 Brand 风格（品牌图标，如 GitHub、Twitter 等）。

  • Front-matter示例如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ---
    title: Hexo 博客配置指南
    date: 2023-10-01 14:00:00
    tags:
      - Hexo
      - Butterfly
    categories:
      - 技术
    cover: /img/hexo-cover.jpg
    top_img: /img/hexo-top.jpg
    description: 本文介绍了如何配置 Hexo 和 Butterfly 主题。
    ---
    ## 引言
    Hexo 是一个快速、简洁且高效的博客框架...

    ## 正文
    ...

使用方法

1
2
3
4
5
6
hexo new "My New Post" #创建一个post类型（layout默认为post）的md文档
hexo new [layout_name] "post" #创建一个layout类型的md
hexo server # 启用本地测试部署
hexo clean && hexo generate && hexo server #删除本地缓存并进行本地测试部署
hexo generate #生成静态文件
hexo deploy #部署到远端，过一会起作用

config文件的示例

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
title: This is a 部落格 of outbreak_sen
subtitle:
  enable: true
  # Typewriter Effect (开启打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務,如果没有弹出就等一会
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: 1
  # 如果有英文逗号' , ',请使用转义字元 ,
  # 如果有英文双引号' " ',请使用转义字元 "
  # 开头不允許转义字元，如需要，请把整個句子用双引号包住
  # 如果关闭打字效果，subtitle只会现示sub的第一行文字
  sub:
    - 你在抱怨什么呢
    - 为明天到来的事，说人生像是没有意义
    - 没有选择会是唯一的路
    - 这不是你自己的问题，人终归要好好去生活
description: "an interesting man"
author: outbreak_sen
language: zh-CN
timezone: ''

# 部署URL
url: http://outbreak-sen.github.io
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
# 导航栏
nav:
  # 导航栏 Logo 图片
  logo: /img/h_beautygirl.png
  # 是否显示标题
  display_title: true
  # 是否固定导航栏
  fixed: false

# 调整侧边栏出现位置
aside:
  enable: true
  hide: false
  button: true
  mobile: false # display on mobile
  position: left # left or right

# 个人信息
social:
  fab fa-github: https://github.com/outbreak-sen || Github
  fa fa-book-open: https://blog.csdn.net/outbreakrmb || CSDN
  fab fa-qq: 1023786231 || QQ
# 个人头像设置
avatar:
  # 头像图片链接
  img: ./img/head.png
  # 是否启用头像效果头像会一直转圈
  effect: true

# 目录
menu:
  主页: / || fas fa-home
  博文 || fa fa-graduation-cap:
    分类: /categories/ || fa fa-archive
    时间轴: /archives/ || fa fa-folder-open
    标签: /tags/ || fa fa-tags
  生活 || fas fa-list:
    树洞: /shuoshuo/ || fa fa-camera-retro
    作品与鉴赏: /movies/ || fas fa-video
  关于笔者: /about/ || fas fa-heart

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# 代码块
code_blocks:
  # 代码块主题: darker / pale night / light / ocean / false
  theme: pale night
  # 是否使用 Mac 风格
  macStyle: true
  # 代码块高度限制（单位: px）
  height_limit: false
  # 是否自动换行
  word_wrap: false
  # 代码块工具栏
  # 是否显示复制按钮
  copy: true
  # 是否显示语言标签
  language: true
  # true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
  shrink: false
  # 是否显示全屏显示代码块按钮
  fullpage: false

# 复制的内容后面加上版权信息
copy:
  enable: true # 是否开启网站复制权限
  copyright: # 复制的内容后面加上版权信息
    enable: false # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时

# 相关文章，在文章最下面出现推送
related_post:
  enable: true
  limit: 6 # Number of posts displayed
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

# 各种图片
# 图片格式: url(http://xxxxxx.com/xxx.jpg)
# Favicon（网站图）
favicon: /img/h_beautygirl.png
# 禁用所有横幅图片
disable_top_img: false
# 创建博客单页的时候是否创建一个同名文件夹用于存放图片
yaml post_asset_folder: true
# 当没有在front-matter设置top_img和cover的情况下会显示该图，要不然就是每个文章制定的图
# ---
# title: Hello World        # 标题
# tags: [hello]             # 标签
# categories:               # 分类
# description: hello word~  # 描述
# top_img: /img/hello-1.png # 顶部背景图
# cover: /img/hello-1.png   # 文章封面
# ---
# 文章详情页的顶部图片
default_top_img: /img/h_beautygirl.png
# 主页封面
index_img: /img/h_beautygirl.png
# 归档页顶部图片
archive_img: /img/h_beautygirl.png
# 标签页顶部图
tag_img:
  - 这也是一个测试: /img/head.png
# 为每个标签设置横幅图片
# 格式:
#  - 标签名: 图片链接
tag_per_img:
# category页顶部图
category_img:
# 分类页的横幅图片，可以为每个分类设置横幅图片
# 格式:
#  - 分类名: 图片链接
category_per_img:
# 页脚的背景图片
footer_img: false
# 网站背景
background: /img/v_beautygirl0.jpeg
# 无法显示的图
error_img:
  flink: ./img/friend_404.gif
  post_page: /img/404.jpg
# 图片没加载出来的时候，出现一个动图转转转的文章页样式
lazyload:
  enable: true
  loadingImg: /img/s_beautygirl0.jpeg
# 图片大图查看
medium_zoom: false
fancybox: true
# 简单的 404 页面
error_404:
  # 是否启用 404 页面
  enable: false
  # 404 页面的副标题
  subtitle: "Page Not Found"
  # 404 页面的卡片背景图片
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

# 给文章结尾设置打赏按钮，可以放上收款二维码
reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

# toc 目录
toc:
  post: true
  page: false
  number: false
  expand: true # 是否展开
  style_simple: false # for post
  scroll_percent: true

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: false
# Mouse click effects: fireworks (鼠标点击效果:萤火特效)
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false
# Mouse click effects: Heart symbol (鼠标点击效果: 爱心)
click_heart:
  enable: false
  mobile: false

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ""
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ""
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ""

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ""
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: "mtime"

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
theme: butterfly

deploy:
  type: git
  repository: git@github.com:outbreak-sen/outbreak-sen.github.io.git
  branch: main

使用其他域名