搭建Hexo个人博客(一) -- 基本搭建与设置

一、介绍

本段来自官方介绍:
Zh-CN:文档 | Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

二、搭建

2.1、环境 && CLI

这里请参考博文:

  1. Node环境安装:[[安装Node环境]]
  2. 更换国内镜像:[[更换Node国内镜像地址]]
  3. 安装GIt && 配置Git :参考 -> Git 安装配置 | 菜鸟教程 (runoob.com)

开始安装脚手架

  1. Npm全局安装(建议):npm install -g hexo-cli
  2. Npm局部安装:npm install hexo

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

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

查看安装情况:hexo

2.2、安装 && 初始化

2.2.1、初始化站点

Hexo 将会在指定文件夹中新建所需要的文件

1
2
3
hexo init <folder>  
cd <folder>
npm install

目录结构如下:

1
2
3
4
5
6
7
8
9
10
/mnt/e/CodePrograms/FrontEnd/hexo_blog ❯ tree -L 1                                                                                             
.
├── _config.landscape.yml 主题配置landscape可以替换为其他的
├── _config.yml Hexo站点配置
├── node_modules Node依赖
├── package.json 应用程序的信息
├── package-lock.json
├── scaffolds 模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件
├── source 资源文件夹是存放用户资源的地方。除 `_posts` 文件夹之外,开头命名为 `_` (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 `public` 文件夹,而其他文件会被拷贝过去。
└── themes 主题

之后站点不进行任何配置可以直接执行以下,访问默认站点页面

  • 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 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.html2013-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
2
3
4
5
6
7
8
9
10
11
12
highlight:
enable: true #是否开启代码高亮
line_number: true #是否增加代码行号
auto_detect: true #自动判断代码语言
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

注:
当 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
2
3
4
5
6
7
8
# Site
title: 浏览器上方站点标题
subtitle: 站点副标题
description: 学习 && Share && 只是快乐的生活~
keywords: 站点关键字
author: 作者
language: zh-CN
timezone: 'Asia/Shanghai'

效果:

3.3.2、站点首页设置

站点首页默认显示的是近期文章界面,可以通过下面修改显示的文章个数和排序方式\

1
2
3
4
index_generator: #首页博客分布
path: '' #博客的默认路径从Url根开始,可以不修改
per_page: 4 #每页博客数量上限
order_by: -date #博客排序,可以不修改,需要修改参考官方

3.3.3、博客时间设置

这里设置的是博客显示的时间日期,一般使用默认即可,需要修改的请参考:Moment.js | Home (momentjs.com)

1
2
date_format: YYYY-MM-DD #博客日期格式
time_format: HH:mm:ss #博客时间格式

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
2
3
auto_category:
enable: true
depth: 3 # 生成的分类目录深度,应该大于0

例如存放在:

1
2
3
4
E:.
└─一级分类
└─二级分类
- post.md

使用自动目录生成器生成之后的文章页面文件为:

1
2
3
4
5
---
categories:
- 一级目录
- 二级目录
---

按照上述我们设置好的菜单以及文章,我们就可以访问我们页面中的菜单,效果 如下:

以上就是基本的设置

四、Hexo - Next 主题配置

下面主题配置,以博主自己使用的Next主题为例,部分设置来自官方,为了方便设置,这里对部分进行汉化。

主题设置文件均为:themes\next\_config.yml

3.1、基本设置

3.1.1、Hexo 6+允许使用缓存内容生成

1
2
3
4
# Allow to cache content generation.
cache:
enable: true

3.1.2、移出生成文件之后的不必要文件

1
2
# Remove unnecessary files after hexo generate.
minify: true

3.1.3、主题风格设置

  • Muse
  • Mist
  • Pisces
  • Gemini
1
2
3
4
#scheme: Muse  
#scheme: Mist
#scheme: Pisces
scheme: Gemini

开启深色模式:

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
2
3
4
5
6
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /manifest.json

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
2
3
4
5
6
7
8
9
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat

每个菜单实际上都对应这一个模板索引页面 ,我们可以使用`hexo new page “你的页面名称”

此时我们还需要让其自动分类菜单可用,也就是我们点击,可以获得相应的分类下的文件。

执行:

1
hexo new page "你的页面名称"

此时会生成一个分类页面:source\页面名称这个source下的文件就是我们的源文件其次其子文件夹_post下会被解析发表为我们的博文。
之后打开这个目录下生成的index.md文件,可以看到如下所示:

title:表示页面的标题(创建的页面名称)
data:表示页面创建的时间

我们如果需要使其成为一个首页菜单,那么加上type: "你的菜单路径"即可

比如:

1
2
3
4
5
---
title: categories
date: 2022-10-08 17:26:41
type: "categories"
---

最终的映射关系如下:

之后在我们创建的每个文章中,使用categories标签,就会放到这个index下的分类中,自动分类参考下章。

3.1.7、开启博文字数统计

1
2
3
4
5
# Enable / Disable menu icons / item badges.
# 开启icon显示和博文在目录下的数量统计
menu_settings:
icons: true
badges: true

3.1.8、侧边栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sidebar:
# 边栏位置
position: left
#position: right

# 以下为主题默认宽度,手动修改请修改width
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300
# - post 在博文界面显示
# - always 所有页面均显示
# - hide 全部隐藏为一个图标
# - remove 全部移出,不显示
display: always
# 边栏的显示位移 Sidebar padding in pixels.
padding: 18
# 边栏顶部位移 Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12

3.1.8.1、侧边栏头像设置

存放地址:themes\next\source\images

1
2
3
4
5
6
7
8
# 边栏头像
avatar:
# 头像存放地址
url: /images/avatar.jpg
# true是圆的 false是方的
rounded: true
# 是否鼠标放上去旋转
rotated: true

效果:

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
2
3
4
social_icons:
enable: true # 是否开启
icons_only: false # 是否只显示图标
transition: false # 是否开启过度

效果:

3.1.8.3、侧边栏目录

设置是否开启文章侧边栏目录生成

1
2
3
4
5
6
7
8
9
10
toc:
enable: true
# 是否自动添加序号
number: true
# 是否换行显示标题
wrap: false
# 是否显示所有的toc
expand_all: false
# 最大显示标题层级
max_depth: 6

侧边栏整体效果:

3.1.9、页脚设置

修改页面页脚,默认样式如下(主题之间有所不同)

配置文件:

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
# 是否显示语言切换 
language_switcher: false

footer:
# 站点创建时间从xxx年
since: 2021

# Icon between year and copyright info.
icon:
# 默认还是在font aswone上面 [Font Awesome](https://fontawesome.com/)
name: fa fa-heart
# 是否开启动画
animated: false
# 修改图标颜色
color: "#ff0000"

# 没有定义默认使用Hexo站点配置文件下的作者名称
copyright:

# 是否显示 Powered by Hexo & NexT
powered: true

# 公安备案显示
beian:
enable: false
icp: # icp备案编码
# 公安备案编码 iid
gongan_id:
# 备案完整num
gongan_num:
# 公安图标 ,下载放到这里 /images/gongan.png 即可 See: http://www.beian.gov.cn/portal/download
gongan_icon_url: /images/gongan.png

3.1.10、显示文章源Meta信息

主题设置中开启:需要在文章创建的时候在头部进行增加,详情在下方基本使用上。

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

3.1.11、捐赠设置

是否开启文章下方的捐赠设置,效果如下:

设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 捐赠设置   Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
# 是否每篇文章显示捐赠
enable: true
# 是否开启动画
animation: true
comment: 你的捐赠宣言^-^

# 捐赠图片存放在 themes\next\source\images
reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

3.1.12、代码高亮

我们在基础设置中已经开启了代码高亮,这里主题的设置会覆盖部分原有设置,因此这里也可以进行开启:
代码高亮主题:Highlight (theme-next.js.org)在这个网站自行测试选择,推荐下方这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
enable: true
light: base16/material
dark: base16/material
prism:
enable: false
light: prism
dark: prism-dark
# 是否显示右上角复制按钮
copy_button:
enable: true
# 按钮样式: default | flat | mac
style: mac

3.1.13、返回顶部 && 阅读进度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
back2top:
enable: true
# 在边栏显示返回回顶部还是在右下角显示
sidebar: true
# 是否显示滑动百分比
scrollpercent: true

# 阅读进度
reading_progress:
enable: true
# 进度条起始位置: left | right
start_at: left
# 显示在顶部还是底部 : top | bottom
position: top
# 是否反转
reversed: false
# 颜色
color: "#37c6c0"
# 高度
height: 3px

3.1.14、GitHub Banner

是否在右上角显示Github Banner:

1
2
3
4
5
# 右上角banner
github_banner:
enable: false
permalink: # 主页访问地址
title: # 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
    33
    font:
    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个人博客(二) – 进阶设置]]