个人博客hexo的使用部署

发表于 更新于 分类于 ， ， 阅读次数：

个人博客HEXO的搭建过程

版本依赖

组件 版本 备注
nodejs 18.18.2
hexo 7.0.0

具体安装过程

安装18.18.2版本的nodejs

1
2
nvm install 18.18.2
nvm use 18.18.2

安装hexo

1
npm install -g hexo@7.0.0

创建hexo项目

1
npx hexo init src

安装hexo的模板

1
2
npm install hexo-theme-next@8.19.0
git clone  --branch v8.19.0 https://github.com/next-theme/hexo-theme-next themes/next

模板插件

1
npm install next-theme/hexo-next-valine#v2.1.0

next主题与背景设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
需要修改
src\themes\next\source\css\main.styl

注释掉最后
// Custom Layer
// --------------------------------------------------
//for $inject_style in hexo-config('injects.style')
//  @import $inject_style;
//

并增加自定义的styl
// Custom Layer 修改背景图片不显示的问题
// --------------------------------------------------
for $inject_style in hexo-config('injects.style')
  @import '../_data/styles.styl';

图片生成位置

1
2
3
4
设置post_asset_folder  为 true, 安装插件 asset-image
npm install https://github.com/CodeFalling/hexo-asset-image
设置图片为相对路径
hexo clean && hexo generate && hexo s 运行查看

增加搜索框

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

在站点全局配置文件(_config.yml)，新增如下内容：

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

hexo主题配置文件（_config_next.yml），修改local_search的enable为true

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true          # 这个部分原来是false
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

RSS订阅

首先添加功能插件，在 hexo 项目根目录下执行该命令

1
npm install hexo-generator-feed
1
2
3
4
5
#订阅RSS
feed:
  type: atom
  path: atom.xml
  limit: false
1
2
3
4
5
6
7
8
9
10
配置含义：
type: RSS的类型(atom/rss2)
path: 文件路径，默认是 atom.xml/rss2.xml
limit: 展示文章的数量,使用 0 或则 false 代表展示全部
hub: URL of the PubSubHubbub hubs (如果使用不到可以为空)
content: （可选）设置 true 可以在 RSS 文件中包含文章全部内容，默认：false
content_limit: （可选）摘要中使用的帖子内容的默认长度。 仅在内容设置为false且未显示自定义帖子描述时才使用。
content_limit_delim: （可选）如果content_limit用于缩短post内容，则仅在此分隔符的最后一次出现时进行剪切，然后才达到字符限制。默认不使用。
icon: （可选）自定义订阅图标，默认设置为主配置中指定的图标。
order_by: 订阅内容的顺序。 (默认: -date)

增加显示文章数分页设置

1
2
3
npm install hexo-generator-index
npm install hexo-generator-archive
npm install hexo-generator-tag

安装git部署插件

1
npm install hexo-deployer-git

配置 系统配置文件，搜索关键字 per_page，看到对应的 index_generator 了吗，这一块就是用来设置 首页 文章该怎么显示的。per_page 后面就是 首页 显示的文章数量，这里我设置为 10 （注意英文冒号 : 后面有一个空格）:

1
2
3
4
index_generator:
  path: ''
  per_page: 10
  order_by: -date

还可以增加分类中的数量配置

1
2
3
4
5
6
archive_generator:
  # 0表示不分页，全部显示
  per_page: 0  
 
tag_generator:
  per_page: 0

遇到的问题

  • 缩略文章需要有描述信息不能直接缩略
    1
    2
    3
    XXX 描述信息
    <!-- more -->
    后面的内瓤会进行隐藏

hexo配置文件详细以及样例demo

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 李同学的特殊用法  #网站标题
subtitle: ''          #网站副标题
description: '君子博学而日叁醒乎己，则知明而行无过矣'  # 网站描述
keywords:         # 网站的关键词。支持多个关键词。
author: 秋天以北    # 您的名字
language: zh-CN   # 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://www.testserv.cn/
root: '/'  # 网站根目录
permalink: :year/:month/:day/:title/  # 文章的 永久链接 格式
permalink_defaults:                   # 永久链接中各部分的默认值
pretty_urls: # 改写 permalink 的值来美化 URL
  trailing_index: true # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: true # 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)
# 如果您的网站存放在子目录中，
# 例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog
# 并把 root 设为 /blog/。

# 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  # 国际化（i18n）文件夹
skip_render: README.md  # 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。
# skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
# skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染


# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post  # 预设布局
auto_spacing: false # 在中文和英文之间加入空格
titlecase: false # 把标题转换为 title case
external_link: # 在新标签中打开链接
  enable: true # 在新标签中打开链接
  field: site # 对整个网站（site）生效或仅对文章（post）生效
  exclude: ''  # 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0  # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false  # 显示草稿
post_asset_folder: true # 启动 Asset 文件夹
marked:
  prependRoot: true
  postAsset: true
relative_link: false  # 把链接改为与根目录的相对位址
future: true  # 显示未来的文章
highlight:   # 代码块的设置, 请参考 Highlight.js 进行设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:    # 代码块的设置, 请参考 PrismJS 进行设置
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: '/'
  per_page: 6
  order_by: -date
archive_generator:
  # 0表示不分页，全部显示
  per_page: 6
  order_by: -date
tag_generator:
  per_page: 6
  order_by: -date


# Category & Tag
default_category: uncategorized  # 默认分类
category_map:  # 分类别名
tag_map:       # 标签别名

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:  # Hexo 默认会不包括 source/ 下的文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
exclude:  # Hexo 不包括 source/ 下的这些文件和目录
ignore:   # Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: next
#theme: hexo-theme-matery

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: http://gitlab.testserv.cn/demo/MyHexoDist.git  #你的仓库地址 可以是github地址也可以是自己搭建的gitlab地址 由hexo d 
  branch: master
  email: user@163.com
  user: user
  pass: password

# 搜索框
# npm install hexo-generator-search
# npm install hexo-generator-searchdb
search:
  path: search.xml
  field: post
  content: true
  format: html

# RSS feed
# npm install hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: false

hexo使用

常用的四个命令

  • 清理缓存

    1
    npx hexo clean

  • 根据源代码模板生成静态页面

    1
    npx hexo g

    会在项目目录生成public目录
    部署在前端web容器中即可.

  • 将静态文件部署到github仓库中

    1
    npx hexo d

    该命令会部署在配置github仓库中,根据自己实际情况使用即可.

  • 启动hexo项目

    1
    npx hexo s

    该命令会在本地启动hexo项目,本地查看速度较快.