ThinkNotes

Simple is not easy | 化繁为简，知易行难

0%

Blog配置 -- hexo博客和next主题环境搭建

发表于 更新于 分类于

hexo博客和next主题环境搭建

本文描述搭建hexo博客环境以及配置next主题的过程

主环境安装

安装node js

https://nodejs.org/en/

用cmd检验一下是否安装成功：用 node -v 和 npm -v 命令检查版本

安装hexo

新建文件夹 如hexo-blog，在此目录安装hexo：

1
npm install -g hexo-cli

安装完的目录如下，详细见：https://hexo.io/zh-cn/docs/setup

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

测试一下创建默认页面从本地访问：

1
2
3
4
D:\hexo-blog>hexo g  #将blog资料创建为css,html静态文件
INFO  Generated: archives/index.html 
D:\hexo-blog>hexo s  #运行hexo server
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

安装next主题

在hexo-blog目录下：

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

主题位于hexo的theme子目录，结构为：

1
2
3
4
5
6
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

含义见：https://hexo.io/zh-cn/docs/themes

安装部署插件

后面部署博客到github会用到：

1
npm install hexo-deployer-git --save

hexo配置

在默认的hexo config.yaml改以下部分：

配置主页信息

1
2
3
4
5
6
7
8
# Site
title: ThinkNotes
subtitle: 'Simple is not easy'
description: ''
keywords:
author: cursorhu
language: zh-CN
timezone: ''

配置主题

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

配置部署

部署到github repo(没有的话要先创建一个公开repo)：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: https://github.com/cursorhu/cursorhu.github.io
  branch: master

注意git部署需要hexo-deployer-git已安装

next主题配置

编辑themes\next_config.yml主题配置文件，改动如下：

选择next子主题：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

主页菜单设置

配置文件去掉#注释，打开tags，categories，about页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
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
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

只是主页打开还不行，还需要手动创建page页面，否则报错

1
2
3
Cannot GET /about/
Cannot GET /tags/
Cannot GET /categories/

在hexo根目录手动创建page页面：

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

在 source 目录下会新建 about、tags、categories文件夹，每个文件夹下还会创建一个index.md文件，编辑各页面对应的index.md文件，增加 type字段 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: about # 这里可以中英文，显示为页面的标题
date: 2025-11-13 15:21:30 # 这个实际可以删掉，用不上
type: "about"
---
 
---
title: tages # 这里可以中英文，如 标签
date: 2025-11-13 15:21:30
type: "tags"
---
 
---
title: categories # 这里可以中英文，如 分类
date: 2025-11-13 15:21:30
type: "categories"
---

注意，这几个页面用本地server测试：hexo g + hexo s并不能看到内容，只有hexo d部署后才能看到。

社交链接

修改主页显示的社交链接

1
2
3
4
5
6
social:
  GitHub: https://github.com/cursorhu || fab fa-github
  E-Mail: mailto:2449055512@qq.com || fa fa-envelope
  
social_icons:
  enable: true

字体设置

推荐英文字体使用Roboto，中文字体使用 Noto Serif SC(宋体思源)

在Google字体中国网站搜索框搜索字体英文名添加以上两种字体，产生URI(Uniform Resource Identifier)，复制href字段的引号内容。

如下图只是示例，实际需要替换URI，将fonts.googlefonts.cn替换为fonts.googleapis.com，Noto Serif替换为Noto Serif SC。

image-20251117170618261

在config.yml的font字段添加host URI和字体名

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
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.googleapis.com/css?family=Noto+Serif+SC|Roboto

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family:
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Roboto

在静态页面的base style配置文件hexo\themes\next\source\css\_variables\base.styl指定中文字体font-family-chinese为’Noto Serif SC’，base.styl是所有主题使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Font families.
$font-family-chinese      = "Noto Serif SC";

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');

访问统计

config.yaml先打开卜算子统计：

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

\themes\next\layout\_partials找到footer.swig文件，添加

1
2
3
{% if theme.footer.counter %}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

src见官网说明：http://ibruce.info/2015/04/04/busuanzi/

站点图标

博客站点图标默认为next的logo, 可修改为自定义图标集合。

使用https://www.favicon-generator.org 创建图标包，放到next/images下，例如/images/my_icon/，再修改config.yaml配置不同客户端的图标路径：

1
2
3
4
5
6
7
favicon:
  small: /images/my_icon/favicon-16x16.ico #用my_icon
  medium: /images/my_icon/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon-next.png #这里用默认的
  safari_pinned_tab: /images/logo.svg
  android_manifest: /images/my_icon/manifest.json #用my_icon
  ms_browserconfig: /images/my_icon/browserconfig.xml

主页头像

将图片放在\MyBlog\themes\next\source\images下，并修改头像名.后缀配置

1
2
3
avatar:
  # Replace the default image and set the url here.
  url: /images/头像名.后缀

主页图标

打开主题配置文件，找到menu字段

以about菜单项为例，可以看到about: /about/ || fa fa-user这一行，其中||后面的fa fa-user即为本菜单项的图标

如果需要更改图标，可以进入Font Awesome获取新图标，只需将文件改为“fa + 复制的图标”即可

主页摘要

新版本next主题没有自动摘要，使用hexo插件解决：

1
npm install hexo-excerpt --save

配置hexo的config.yaml，添加：

1
2
3
4
5
6
# Hexo-excerpt
excerpt:
  depth: 10
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

next主题的config需设置 excerpt_description: true

改完看效果：

1
hexo clean && hexo g && hexo d

参考：

Next主题找不到auto_excerpt

hexo-excerpt

以下手动方式不推荐：

  1. 自己手写概述，在文件头添加到description：
1
2
3
4
5
6
---
title: Hexo
categories:  Hexo
tags: Hexo
description: XXXXXXXXX
---
  1. 文章截断，在文章中间加入 <!--more-->

全局搜索栏

在hexo的config.yaml添加如下，目的是在主页显示搜索菜单项

1
2
3
4
5
6
# Search Config
search:
  path: search.xml
  field: post
  format: html
  limit: 100

安装hexo search插件：

1
2
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

在next的config.yaml使能search

1
2
local_search:
  enable: true

其他配置

  1. 系统切换至深色模式时启动暗黑模式
1
darkmode: true
  1. 一键复制代码：
1
2
3
codeblock: 
	copy_button:
    	enable: true
  1. 关掉Powered by Hexo & NexT：
1
powered: false

hexo命令

创建文章

创建新文章

1
hexo n "blog" #new

创建指定tags和categories的new post文章

1
hexo n "blog" --tags "tags" --categories "categories"

将常规markdown转化为可以发布的博客：在markdown源码模式下，手动复制文章头到文件，也是和hexo n命令创建头一样效果

tags可以支持多个：

  1. 单标签，tags: 标签名

  2. 多标签

    1
    2
    3
    tags: 
    - 标签1
    - 标签2

本地部署测试

1
2
3
hexo clean #删除缓存，重新生成public博客静态文件
hexo g #generate新博客静态文件
hexo s #server，运行本地服务，用于测试

远程部署

1
hexo d #deploy到服务器，如github repo，网络不好需要梯子

参考

https://sspai.com/post/85116

https://maphical.cn/2020/03/build-blog-using-hexo/