搭建Hexo个人博客(一) -- 基本搭建与设置
一、介绍
本段来自官方介绍:
Zh-CN:文档 | Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
二、搭建
2.1、环境 && CLI
这里请参考博文:
- Node环境安装:[[安装Node环境]]
- 更换国内镜像:[[更换Node国内镜像地址]]
- 安装GIt && 配置Git :参考 -> Git 安装配置 | 菜鸟教程 (runoob.com)
开始安装脚手架:
- Npm全局安装(建议):
npm install -g hexo-cli
- Npm局部安装:
npm install hexo
局部安装使用:安装以后,可以使用以下两种方式执行 Hexo:
npx hexo
- 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用
hexo
查看安装情况:hexo
2.2、安装 && 初始化
2.2.1、初始化站点
Hexo 将会在指定文件夹中新建所需要的文件
1 | hexo init <folder> |
目录结构如下:
1 | /mnt/e/CodePrograms/FrontEnd/hexo_blog ❯ tree -L 1 |
之后站点不进行任何配置可以直接执行以下,访问默认站点页面
hexo clean
hexo g
hexo server
访问地址:Hexo既可以看到默认页面
2.2.2、更换主题
建议采用源码安装!!
博主这里推荐两款主题:
- Butterfly(官方文档较为齐全,页面漂亮):Butterfly - A Simple and Card UI Design theme for Hexo
- Npm安装:
npm i hexo-theme-butterfly
- 源码安装:会自动安装到
themes/butterfly
修改配置文件:站点根目录下的1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
_config.yml
搜索theme
打圈地方修改为butterfly
- Npm安装:
安装插件:npm install hexo-renderer-pug hexo-renderer-stylus --save
之后按照自己喜爱参考官方修改
_config.butterfly.yml
主题配置即可。
- Next(英文文档,简约):NexT - Theme for Hexo (theme-next.js.org)
- 安装:
npm install hexo-theme-next
- 源码安装:会自动安装到
themes/next
修改配置文件:站点根目录下的1
git clone https://github.com/next-theme/hexo-theme-next themes/next
_config.yml
搜索theme
打圈地方修改为next
主题配置文件地址:thems/next/_config.yml
`
- 安装:
三、Hexo - 基本配置
3.1、永久链接配置
使用永久链接可以使每一个博文生成唯一的URL方便进行访问
例如 :
:year/:month/:day/:title/
:2013/07/14/hello-world/
:year-:month-:day-:title.html
:2013-07-14-hello-world.html
:category/:title/
:foo/bar/hello-world/
这里博主推荐使用abbrlink
,通过不同Hash函数生成唯一或者连续的文章访问地址。方便后期被搜索引擎抓取,并且在之后对于文章标题或者内容进行修改的时候也不会发生变化
安装方法:[[Hexo 使用AbbrLink生成唯一Url]]
3.2、开启代码高亮
使用Markdown语法编写的代码,支持生成博客之后使用代码高亮,通过prismjs
或者 highlight
实现。这里推荐使用highlight
由于 hexo本身已经内置,按以下配置开启即可:
修改站点根目录
_confg.yaml
1 | highlight: |
注:
当 highlight.enable 和 prismjs.enable 均为 false 时,代码块输出的 HTML 由相应的渲染器控制。举个例子:marked.js(Hexo 的默认 Markdown 渲染器 hexo-renderer-marked 由此驱动)会把语言加入 <code>
标签的 class 中。
1 | hello: hexo |
如:
1 | <code class="yaml">hello: hexo</code> |
highlight.js
不支持行号显示,但是部分主题 已经内建支持。
效果:
3.3、站点设置
3.3.1、站点信息设置
修改站点根目录下:_config.yaml
keywords: 关键字1,关键字2,关键字3…
,采用英文逗号
隔开,注意keywords
与关键词
之间的空格
1 | # Site |
效果:
3.3.2、站点首页设置
站点首页默认显示的是近期文章界面,可以通过下面修改显示的文章个数和排序方式\
1 | index_generator: #首页博客分布 |
3.3.3、博客时间设置
这里设置的是博客显示的时间日期,一般使用默认即可,需要修改的请参考:Moment.js | Home (momentjs.com)
1 | date_format: YYYY-MM-DD #博客日期格式 |
3.4、开启文章自动分类
请先设置:[[搭建Hexo个人博客(一) – 基本搭建与设置#3 1 6、初始化页面模板和分类菜单路径]]
开启自动分类,可以按照文章目录结构生成相应的分类,最终Hexo将帮助我们自动将博文分类到我们对应的目录下。
设置:xu-song/hexo-auto-category: Generate categories automatically for each post in Hexo (github.com)
修改:Hexo根目录下的_config
1 | auto_category: |
例如存放在:
1 | E:. |
使用自动目录生成器生成之后的文章页面文件为:
1 | --- |
按照上述我们设置好的菜单以及文章,我们就可以访问我们页面中的菜单,效果 如下:
以上就是基本的设置
四、Hexo - Next 主题配置
下面主题配置,以博主自己使用的Next主题为例,部分设置来自官方,为了方便设置,这里对部分进行汉化。
主题设置文件均为:themes\next\_config.yml
3.1、基本设置
3.1.1、Hexo 6+允许使用缓存内容生成
1 | # Allow to cache content generation. |
3.1.2、移出生成文件之后的不必要文件
1 | # Remove unnecessary files after hexo generate. |
3.1.3、主题风格设置
- Muse
- Mist
- Pisces
- Gemini
1 | #scheme: Muse |
开启深色模式:
1 | darkmode: true |
3.1.4、站点图标设置
设置favicon.ico默认是浏览器请求的站点文件,显示在标题栏的地方,效果如下,next支持设置不同设备上面的icon大小以适应不同屏幕显示。
生成自己的favicon站点图标:Favicon Generator for perfect icons on all browsers (realfavicongenerator.net)
生成之后放置在站点目录:themes\next\source\images
1 | favicon: |
3.1.5、站点文章版权设置
文章许可:Creative Commons,简称 CC,中国大陆正式名称为常识同享,台湾正式名称为创用 CC。是一个非营利安排,也是一种创造的授权方法。此安排的主要主旨是增加创意著作的流通可及性,作为其别人据以创造及同享的根底,并寻找适当的法令以保证上述理念。自 3.0 版开端,原始的协议改以国际法及相关惯例撰写,称为“未移植版”,各司法范畴团队再依其法令翻译、修改成该司法范畴的适用版本。
- 署名(BY)
- 非商业性运用(NC)
- 制止演绎(ND)
- 相同方法同享(SA)
这里建议使用:by-nc-sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14# 创建文章许可:Creative Commons 4.0 International License. 许可详细信息:https://www.tnblog.net/18785819686/article/details/3601
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
# 是否显示在侧边栏
sidebar: true
# 是否在POST文章中显示
post: true
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language: deed.zh
文章底部效果:
侧边栏显示效果:
3.1.6、初始化页面模板和分类菜单路径
菜单为首页显示的,左侧或者上边的导航栏,这里增加相应的k/v设置就相当于增加一个新的菜单。
1 | menu: |
每个菜单实际上都对应这一个模板索引页面 ,我们可以使用`hexo new page “你的页面名称”
此时我们还需要让其自动分类菜单可用,也就是我们点击,可以获得相应的分类下的文件。
执行:
1 | hexo new page "你的页面名称" |
此时会生成一个分类页面:source\页面名称
这个source
下的文件就是我们的源文件其次其子文件夹_post
下会被解析发表为我们的博文。
之后打开这个目录下生成的index.md
文件,可以看到如下所示:
title
:表示页面的标题(创建的页面名称)data
:表示页面创建的时间
我们如果需要使其成为一个首页菜单,那么加上type: "你的菜单路径"
即可
比如:
1 | --- |
最终的映射关系如下:
之后在我们创建的每个文章中,使用categories
标签,就会放到这个index下的分类中,自动分类参考下章。
3.1.7、开启博文字数统计
1 | # Enable / Disable menu icons / item badges. |
3.1.8、侧边栏设置
1 | sidebar: |
3.1.8.1、侧边栏头像设置
存放地址:themes\next\source\images
1 | # 边栏头像 |
效果:
3.1.8.2、侧边栏设社交图片
Next主题默认使用的是Font Awesome
更换方法:
- 打开Font Awesome
- 选择你喜欢的图片
- 点击打开 && 复制
class
样式里面的绿色部分,如图
- 替换下方图片名称
1
2
3
4
5
6
7
8
9# 边栏社交图片 Social Links
# 格式:图片名称 || 图片地址
social:
GitHub: 地址 || 名称
E-Mail: 地址 || 名称
Weibo: 地址 || 名称
Google: 地址 || 名称
Twitter: 地址 || 名称
FB Page: 地址 || 名称
配置社交图片显示:
1 | social_icons: |
效果:
3.1.8.3、侧边栏目录
设置是否开启文章侧边栏目录生成
1 | toc: |
侧边栏整体效果:
3.1.9、页脚设置
修改页面页脚,默认样式如下(主题之间有所不同)
配置文件:
1 | # 是否显示语言切换 |
3.1.10、显示文章源Meta信息
主题设置中开启:需要在文章创建的时候在头部进行增加,详情在下方基本使用上。
1 | # Post meta display settings |
3.1.11、捐赠设置
是否开启文章下方的捐赠设置,效果如下:
设置:
1 | # 捐赠设置 Donate (Sponsor) settings |
3.1.12、代码高亮
我们在基础设置中已经开启了代码高亮,这里主题的设置会覆盖部分原有设置,因此这里也可以进行开启:
代码高亮主题:Highlight (theme-next.js.org)在这个网站自行测试选择,推荐下方这个
1 | codeblock: |
3.1.13、返回顶部 && 阅读进度
1 | back2top: |
3.1.14、GitHub Banner
是否在右上角显示Github Banner:
1 | # 右上角banner |
3.1.15、字体设置
- 选择自己喜欢的字体:谷歌字体
- 复制字体名称到下面相关设置
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
33font:
enable: false
# 字体地址
host:
# 全局 body设置
global:
external: true
family: Lato
size:
# 站点标题字体
title:
external: true
family:
size:
# h1 ~ h6标题设置
headings:
external: true
family:
size:
# post body字体
posts:
external: true
family:
# 代码块字体
codes:
external: true
family:
五、发布 && 部署
Hexo只需要通过几条简单的命令就可以运行,主要是以下三条:
hexo clean
:清除hexo g
:生成文件hexo server
:运行(本地端口)当然可以在目标服务器部署hexo deploy
:一键部署命令
以上方式参考官方进行部署:建站 | Hexo
下面介绍博主使用的集成化使用方案:[[Hexo Obsdian + Git + OSS 集成化使用方案]] 阅读前推荐阅读[[搭建Hexo个人博客(二) – 进阶设置]]