Hexo安装与配置

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

简介

Hexo 是一个快速、简洁且高效的博客框架，使用 Markdown（或其他标记语言）解析文章，然后可以利用各种主题生成静态网页。

以下是我在安装和配置Hexo的步骤，我使用的主题是 NexT

安装

1. 安装前提

  • 安装Git
  • 安装Node.js注意：在Linux和MacOS上最好先安装节点版本管理器如nvm，然后使用节点版本管理器来安装Node.js，否则在使用npm install -g hexo-cli 在全局下安装hexo时会出现 EACCES 权限问题，出现问题后最好不要加root权限执行，强烈建议卸载Node.js后安装nvm再使用nvm install node重装Node.js

2. 安装Hexo

使用npm命令安装Hexo：

1
npm install -g hexo-cli

进入要安装博客的位置目录，初始化我们的博客，参数blog即博客目录名

1
hexo init blog

生成静态网页：

1
hexo g

然后blog下面会生成一个public目录，里面的内容就是生成的静态网页

3.部署网站

使用Nginx部署网站：

我是使用Nginx来部署blog网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
    listen       443 ssl;
    server_name  blog.example.com;

    ssl_certificate      /path/to/cert.pem;
    ssl_certificate_key  /path/to/cert.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    location / {
        root   /your_path/blog/public;
        index  index.html index.htm;
    }
}
部署到GitHub

此外还可以将博客部署到GitHub，首先修改站点配置文件blog/_config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourGithub-username/YourGithub-username.github.io.git
  branch: main

首先需要安装 deployer-git，才能用 hexo d 命令部署到GitHub

1
2
npm install hexo-deployer-git --save
hexo deploy  # 部署文章，缩写hexo d

然后可以访问你的 Github 页面：https://username.github.io

4.更换博客主题

Hexo主题

我使用的是 NexT 主题

在blog中将主题下载到themes文件夹下：

1
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

打开站点配置文件blog/_config.yml，修改主题为 NexT：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

再次生成网站：

1
2
hexo clean  # 清理清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g

Hexo配置

可以在 blog/_config.yml 文件修改Hexo的配置

1.网站信息

1
2
3
4
5
6
7
8
# Site
title: 浮生若梦    # 网站标题
subtitle: '让谁失望，都别让自己失望'    # 网站子标题
description: ''    # 作者描述
keywords: 
author: 子幽    # 网站作者
language: zh-CN  # 英文en  中文zh-CN
timezone: 'Asia/Shanghai'  # 时区

2.网站地址

1
2
3
4
5
6
7
# URL
url: https://blog.liukuan.cc    # 博客网站
permalink: :category-:title/    # 文章链接格式
permalink_defaults:
pretty_urls:
  trailing_index: true # 链接中是否去掉'index.html'，false去除
  trailing_html: true # 链接中是否去掉'.html'，false去除

3.文件目录

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source    # 资源文件夹
public_dir: public    # 静态网页目录
tag_dir: tags    # 标签文件夹
archive_dir: archives    # 归档文件夹
category_dir: categories    # 分类文件夹
code_dir: downloads/code    # Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang
skip_render:

NexT主题配置

可以在 blog/theme/next/_config.yml 文件修改 NexT 主题的配置

1.主题外观

1
2
#目前有四种，选择一种去掉注释即可
scheme: Pisces

2.菜单设置

1
2
3
4
5
6
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user

3.修改中文文本显示

第一步中设置的菜单的名称并不直接用于界面上的展示，Hexo 在生成静态网页的时候将使用这个名称字段来查找对应的语言翻译，并提取显示文本，这些翻译文本放置在 NexT 主题目录下的languages/{language}.yml 文件中。例如：

1
2
3
4
5
6
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于

4.侧栏设置

* 侧栏显示位置
1
2
sidebar:
  position: left
* 头像设置
1
2
3
4
5
# Sidebar Avatar
avatar:
  url: /images/avatar.jpg   # 替换默认图像并在此处设置网址。
  rounded: true   # 如果为 true，头像将显示为圆形。
  rotated: false   # 如果为 true，头像将随光标旋转。
* 社交链接
1
2
3
social:
  GitHub: https://liukuan97.github.io || fab fa-github
  E-Mail: mailto:lk@liukuan.cc || fa fa-envelope
* 友情链接
1
2
links:
  Title: http://yoursite.com

5.中英文及数字间空格

1
2
# 方便显示，在中英文以及数字符号等合适位置加入一下空格间隔以美化 UI。
pangu: true

6.代码块样式：高亮主题｜复制按钮

可选的值有 normal，night， night blue， night bright， night eighties，默认使用的是白色的 normal 主题

1
2
3
4
5
codeblock:
  highlight_theme: normal
  copy_button:
    enable: true
    show_result: false   # 显示文本复制结果

设置Mac风格代码块：

1
2
3
4
5
6
codeblock: 
 # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

7.站点底部信息

  • since: 设定站点建立时间，例如 © 2013 - 2015 ，如果未定义，将使用当前年份。
  • copyright: 如果未设置，默认显示blog/_config.yml 中的author
  • powered: 是否显示Powered by Hexo & NexT信息（中文： Hexo & NexT.Pisces 强力驱动）
  • beian: 备案信息
1
2
3
4
5
6
7
8
9
10
footer:
  since: 2023
  copyright: 
  powered: true
  beian:
    enable: false
    icp: 鄂ICP备XXXXX号-X
    gongan_id:
    gongan_num:
    gongan_icon_url:

如果还需更改站点底部信息或排版，可至 NexT 主题目录下layout/_partials/footer.njk 文件中修改。

8.NexT主题阅读全文设置

Hexo 的 NexT 主题首页默认是显示你每篇文章的全文内容。想要在网站首页只显示每篇文章的部分内容以及一个阅读全文的button。可以通过以下两个方法实现：

  • 直接在你的 md 博文中预览的部分后加一句<!--more-->
  • 修改主题的 _config.yml 文件设置：
1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:  
  enable: true  
  length: 150 # 默认截取全文开篇前150字，可自行修改

9.Canvas nest 背景动画

避免背景比较单调，加入一个几乎不怎么不影响性能的背景动画，配置细节参考官方说明。 增加一个站点文件，在 blog/source/_data 目录 (若不存在则新建一个) 下新建文件 footer.swig，内容：

1
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

然后在 NexT 的配置文件theme/next/_config.yml中找到 custom_file_path 一项将 footer 一行取消注释：

1
2
custom_file_path:
  footer: source/_data/footer.njk

10.字数统计和阅读时长

首先安装插件

1
npm install hexo-symbols-count-time --save

修改站点配置文件blog/_config.yml

1
2
3
4
5
6
7
symbols_count_time:
    #文章内是否显示
    symbols: true
    time: true
    # 网页底部是否显示
    total_symbols: true
    total_time: true

修改主题配置文件blog/theme/next/_config.yml

1
2
3
4
5
6
7
symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: false
    awl: 4
    wpm: 275
    suffix: mins.

11.夜间模式切换

NexT自带的夜间模式不支持手动切换夜间模式，这里使用hexo-next-darkmode插件自动添加可切换的暗黑模式，教程

1
npm install hexo-next-darkmode --save

首先，确保NexT主题的配置文件选项darkmode设置为false：

1
2
# Close NexT's darkmode
darkmode: false

向NexT主题配置文件_config.yml添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

isActivated: true：默认激活暗模式，始终与saveInCookies: false和 一起使用autoMatchOsTheme: false。同时，需要pjax: true在NexT主题的配置文件中进行设置，即启用Pjax。

12.修改动画加载速度

NexT 主题目录下source/js/motion.js文件中修改duration: 字段持续时间

13.文章中插入图片

在Hexo博客中插入图片通常是通过使用Markdown语法来实现的，你可以按照以下步骤插入图片：

  1. 准备图片： 首先，确保你的图片文件已经存放在Hexo博客的合适目录下，比如source/images/post-images/。
  2. 使用Markdown语法： 在你的文章中，使用Markdown语法插入图片。Markdown中插入图片的语法如下：
1
![替代文本](图片路径)
  • 替代文本：这是在图片无法显示时显示的替代文本，描述图片内容的简短文字。
  • 图片路径：这是图片文件相对于博客根目录的路径。

例如，如果你的图片存放在source/images/post-images/my-image.jpg，那么Markdown语法将是：

Text
1
![我的图片](/images/post-images/my-image.jpg)
  1. （可选）图片懒加载，就是当你翻到图片的时候再加载那张图片，而不是以下将本页面的所有图片都加载完。首先安装懒加载模块npm install hexo-lazyload --save，然后将NexT主题的配置文件选项lazyload设置为true。

14.设置RSS订阅

  1. 安装插件 npm install hexo-generator-feed --save
  2. 修改站点配置文件blog/_config.yml，插件添加hexo-generator-feed，设置 feed 属性：
1
2
3
4
5
6
7
8
9
10
11
12
Plugins: hexo-generator-feed
# Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: " "
    order_by: -date
    icon: /images/favicon_200x200.png
  1. 修改主题配置文件_config.yml，添加 RSS 订阅入口
    • 修改social配置，添加一行启用 RSS 图标
1
2
3
social:
    # 其他社交按钮
    RSS: /atom.xml || fa fa-rss
  • 修改follow_me配置，开启 RSS 订阅入口
1
2
3
follow_me:
    # 其他社交按钮
    RSS: /atom.xml || fa fa-rss

NexT侧栏优化

NexT主题侧栏的源代码文件：theme/next/layout/_macro/sidebar.njk

侧边栏CSS样式：themes/next-new/source/css/_common/outline/sidebar/

1.标签云

GitHub地址：https://github.com/MikeCoder/hexo-tag-cloud

1
npm install hexo-tag-cloud --save

next/layout/_macro/sidebar.swig 中添加：

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
  <div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        {{ list_tags() }}
      </canvas>
    </div>
  </div>
{% endif %}

添加搜索功能

安装插件，用于生成博客索引数据

1
npm install hexo-generator-searchdb --save

修改站点配置文件blog/_config.yml，添加以下代码

Text
1
2
3
4
5
search:
  path: search.json
  field: post
  format: html
  limit: 1000

再到主题配置文件_config.yml中，查询local search，将enable修改为true

显示滚动百分比

在主题配置文件_config.yml中，找到scrollpercent: false修改成scrollpercent: true即可呈现滚动百分比

Text
1
scrollpercent:  true

生成站点地图

首先安装sitmap插件：

Text
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在站点配置文件_config.yml中设置好网站外部链接：

Text
1
url: https://example.com

在站点配置文件_config.yml中设置自动生成 sitemap

Text
1
2
3
4
5
6
# 自动生成sitemap
sitemap:
  path: sitemap.txt
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml