搭建个人博客

发表于

基础安装和使用

下载nodejs和npm

nodejs下载地址

安装hexo

1
nmp install -g hexo-cli

使用hexo

在你想要创建博客的目录下执行以下命令：

1
hexo init

这会在当前目录下创建一个新的hexo项目。

常用命令

1
2
3
4
5
hexo new "post title" # 创建一篇新的文章
hexo g # 生成静态文件
hexo s # 启动本地服务器
hexo d # 部署到远端服务器
hexo clear # 清除缓存

部署到github

github创建仓库

仓库名为username.github.io，其中username为你的github用户名。

安装部署到github的依赖

1
npm install --save hexo-deployer-git

修改hexo配置文件

修改_config.yml文件，修改以下内容：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: # 刚刚创建的仓库地址
  branch: master

此时使用 hexo d 即可将博客部署到github上。

主题美化

安装主题

在hexo目录下执行以下命令来安装next主题：

1
npm install hexo-theme-next

升级主题

1
npm install hexo-theme-next@latest

配置文件

1
2
# Installed through npm
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

修改hexo配置文件

打开_config.yml文件，修改以下内容：

1
theme: next

修改主题配置文件

打开_config.next.yml文件，修改以下内容：

1
2
3
4
5
6
7
8
# Allow to cache content generation.
cache:
  enable: true

#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

配置标签功能

在根目录下输入

1
hexo new page tags

默认在source\tags\index.md中创建

修改index.md文件，添加以下内容：

即添加type: “tags”

1
2
3
4
5
---
title: tags
date: 2025-04-18 06:00:31
type: "tags"
---

修改_config-next.yml文件，修改以下内容：

1
2
3
# themes\scallop\_config.yml
menu:
  tags: /tags/ || fa fa-tags

在文章中添加tags标签即可

1
2
3
4
5
6
7
---
title: EXTI外部中断
date: 2025-04-18 05:52:58
tags: 
 - STM32
 - EXTI
---

安装搜索功能

安装搜索插件

1
npm install hexo-generator-searchdb

修改hexo配置文件

打开_config.yml文件，添加以下内容：

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

修改主题配置文件

打开_config.next.yml文件，添加以下内容：

1
2
3
4
5
6
7
8
9
10
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # 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

安装评论功能

使用LiveRe

登录LiveRe并安装

LiveRe链接

安装完成后找到data-uid

LiveRe data-uid链接

复制data-uid = 后的内容

修改主题配置文件

打开_config.next.yml文件，添加以下内容：

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: "your_uid"

外部库功能

功能描述

fancybox和mediumzoom不要同时启用

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
# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: true

fancybox: true

# Vanilla JavaScript plugin for lazyloading images.
lazyload: true

# Pangu Support
pangu: true

...
quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true
...

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: true
  async: false
  transition:
    # All available Transition variants: https://theme-next.js.org/animate/
    menu_item: fadeInDown
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

pace:
  enable: true

canvas_ribbon:
  enable: true
  size: 300
  alpha: 0.6
  zIndex: -1

参考链接

Next主题使用说明
B站视频链接Codesheep