Hexo博客搭建

环境搭建

安装Git

官网下载最新版安装包直接安装即可。

1
2
3
4
5
6
7
8
# 更新软件源
sudo apt update -y
# 升级软件源
sudo apt full-upgrade -y
# 安装Git
sudo apt install git-core
# 查看版本
git --version

安装Node.js

官网下载最新版安装包直接安装即可。
(Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 下载 NodeJS
wget https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-x64.tar.xz
# 解压 node-v20.10.0-linux-x64.tar.xz
tar -xvf node-v20.10.0-linux-x64.tar.xz
# 删除压缩包 node-v20.10.0-linux-x64.tar.xz
rm -f node-v20.10.0-linux-x64.tar.xz
# 查看隐藏文件
ls -a
# 配置环境
# 编辑文件
vim .bashrc
# 刷新.bashrc
source .bashrc
# 内容
export PATH=$PATH:/home/yl/nodejs/node-v20.10.0-linux-x64/bin
# 查看版本
node -v
npm -v

安装Hexo

在终端输入以下命令(Windows使用命令提示符):

1
2
3
4
npm install hexo-cli -g
hexo init blog
cd blog
npm install

配置Hexo配置文件config.yml

  • 网站基础信息
1
2
3
4
5
6
7
8
# Site
title: '' #主标题,不要有空格等特殊符号
subtitle: '' #副标题
description: '' #自我描述,使用“<br>”可换行
keywords: '' #关键词,使用英文逗号分隔,使用“`”代替单引号,如:Mitchell`s Box
author: '' #作者名
language: '' #语言
timezone: '' #时间区域

例如本站的设置:

1
2
3
4
5
6
7
8
# Site
title: Mitchell的小站
subtitle: '生活明朗 万物可爱'
description: ''
keywords: '生活,blog,博客,学习,分享,Hexo,AIGC,技术,Mitchell`s Blog'
author: Mitchell
language: zh-CN
timezone: 'Asia/Shanghai'
  • 网址
1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://MiQieR.github.io/ #这里改成你的域名
permalink: :title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
  • 目录
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
i18n_dir: :lang
skip_render: # 跳过文件夹
  • 文章

文章新建增加年月日方便管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
preprocess: true
line_number: true
tab_replace: ''
  • 主页设置
1
2
3
4
5
6
7
8
# 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: 10
order_by: -date
  • 分类 & 标签
1
2
3
4
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
  • 元数据元素
1
2
3
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
  • 日期 / 时间格式
1
2
3
4
5
6
7
8
# 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'
  • 分页设置
1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
  • 主题选择
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu
  • 博客部署

首先需要安装插件:

1
npm install hexo-deployer-git --save
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repo: https://github.com/MiQieR/MiQieR.github.io.git #如果你托管到GitHub,这里填写该项目的地址
branch: master #该项目的分支

Front-matter 的基本认识

Page Front-matter 用于页面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: # 【必需】页面标题
date: # 【必需】页面创建日期
type: # 【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: # 【可选】页面更新日期
description: # 【可选】页面描述
keywords: # 【可选】页面关键字
comments: # 【可选】显示页面评论模块(默认 true)
top_img: # 【可选】页面顶部图片
mathjax: # 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时,才需要配置,默认 false)
katex: # 【可选】显示 katex(当设置 katex 的 per_page: false 时,才需要配置,默认 false)
aside: # 【可选】显示侧边栏 (默认 true)
aplayer: # 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: # 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: # 【可选】部分页面的顶部模块背景图片
---

Post Front-matter 用于文章页配置

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
---
title: # 【必需】文章标题
date: # 【必需】文章创建日期
updated: # 【可选】文章更新日期
tags: # 【可选】文章标签
categories: # 【可选】文章分类
keywords: # 【可选】文章关键字
description: # 【可选】文章描述
top_img: # 【可选】文章顶部图片
cover: # 【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图,可设为 false/图片地址/留空)
comments: # 【可选】显示文章评论模块(默认 true)
toc: # 【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number: # 【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
toc_style_simple: # 【可选】显示 toc 简洁模式
copyright: # 【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author: # 【可选】文章版权模块的文章作者
copyright_author_href: # 【可选】文章版权模块的文章作者链接
copyright_url: # 【可选】文章版权模块的文章链接链接
copyright_info: # 【可选】文章版权模块的版权声明文字
mathjax: # 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时,才需要配置,默认 false)
katex: # 【可选】显示 katex(当设置 katex 的 per_page: false 时,才需要配置,默认 false)
aplayer: # 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: # 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: # 【可选】显示侧边栏 (默认 true)
swiper_index: # 【可选】首页轮播图配置 index 索引,数字越小越靠前
top_group_index: # 【可选】首页右侧卡片组配置, 数字越小越靠前
ai: # 【可选】文章ai摘要
main_color: # 【可选】文章主色,必须是16进制颜色且有6位,不可缩减,例如#ffffff 不可写成#fff
---

Hexo基本命令

  • 新建文章
1
hexo new "文章名称" 
  • 新建页面
1
hexo new page "页面名称"
  • 删除生成的静态文件
1
2
hexo clean
# 可简写为hexo cl
  • 生成静态文件
1
2
hexo generate
# 可简写为hexo g
  • 启动本地服务器查看网页效果
1
2
3
hexo server
# 可简写为hexo s
# 访问 http://localhost:4000/ 查看
  • 部署网站
1
2
hexo deploy
# 可简写为hexo d
  • 使用&&连接多个命令,比如常见的“hexo三连”:
1
hexo cl && hexo g && hexo d

使用第三方主题

这里以本站使用的Anzhiyu主题为例

  • 安装安知鱼主题
1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
  • 修改Hexo配置文件_config.yml以改用安知鱼主题
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu
  • 安装pugstylus渲染插件
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  • 覆盖主题配置文件
1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml