搭建Hexo个人博客（一） -- 基本搭建与设置

发表于 更新于 分类于 ， 阅读次数： 阅读次数： Artalk： 本文字数： 9.3k 阅读时长 ≈ 8 分钟

一、介绍

本段来自官方介绍：
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.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
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个人博客（二） – 进阶设置]]