技术文章

有句话是这么说的：搭建完博客的第一篇文章就是讲如何搭建博客。万幸这并非我博客中的唯一一篇文章。万一我哪天又得重新配一遍博客，那就得看这篇文章了。

本博客使用 Hexo + GitHub Pages + hexo-theme-reimu 实现，工作流使用 VS Code + Typora。

下载模板、安装依赖

从 reimu-template 下载本模板，或使用 git clone 命令：

1
2
3
git clone https://github.com/D-Sketon/reimu-template
cd reimu-template
npm install

请注意不要安装 hexo-renderer-marked 插件，这个插件会导致数学公式和 emoji 无法正常显示。

修改 _config.yml 配置

注意，本文只放上所有我修改过的配置，其余按默认配置来。

参考 Hexo 官方文档。

网站信息

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: Recogeta's Blog
subtitle: 少女祈祷中……
description: Ciallo～(∠・ω< )⌒★
keywords:
author: Recogeta
language: 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: https://r3c0ger.github.io/ # 注意要想自动生成 GitHub Pages，这里的用户名中的字母要全部小写
permalink: :year/:month/:title/ # 静态文件的 URL，例如 https://r3c0ger.github.io/2024/12/markdown-snippets/

效果如下：

image-20241229183719201

文件结构调整

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

这一部分主要是为了调整文件结构，使得文章的图片可以放在与文章同名的文件夹中，而不是统一放在 source/images 文件夹中。当然对我而言这种结构还是不太爽。

image-20241229185455511

部署

1
2
3
4
deploy:
  type: git
  repo: https://github.com/R3c0ger/r3c0ger.github.io.git
  branch: gh-pages

部署方法在这里就可以说清楚了：

  1. 先创建一个名为 <username.lowercase>.github.io 的仓库，
    其中 <username.lowercase> 表示你的 GitHub 用户名（而非"Name"）的小写形式。
  2. 然后在 Hexo 的配置文件中进行如上配置，repo 字段填写你的仓库地址加上 .git 后缀。
  3. 最后运行 hexo deploy 即可。

添加搜索功能

1
2
3
4
search:
  path: search.json # 文件名必须为search.json
  field: post
  content: true

这里的搜索功能是基于 hexo-generator-search 插件实现的：

1
npm install hexo-generator-search --save

修改 _config.reimu.yml 配置

这个配置文件是主题 reimu 的配置文件，主要是调整主题的样式。

侧栏效果

1
2
3
4
5
sidebar: left # 将侧栏放在左侧

social:
  github: https://github.com/R3c0ger
  zhihu: https://www.zhihu.com/people/Phortitudual

image-20241229190049825

1
2
3
4
5
6
7
8
9
10
# 侧栏组件
widgets:
  - category
  # - tag # 文章一多，标签就多了，会在侧栏占掉一长列的空间，所以我关了
  - tagcloud
  - archive
  - recent_posts

# Widget behavior
show_count: true # 显示文章数量

image-20241229190850875

底栏效果

1
2
footer:
  since: 2024 # 2024-current year

image-20241229190111052

开启与关闭功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 数学公式
math:
  enable: true
  katex:
    enable: false
  mathjax:
    enable: true

mermaid:
  enable: true

# 站内搜索
generator_search:
  enable: true

# 鼠标指针特效，我觉得没啥用就关了
firework:
  enable: true

数学公式与 mermaid 的效果参见 Markdown Snippets。

站内搜索功能效果如下：

image-20241229191901695

image-20241229191925108

首页分类卡片

1
2
3
4
5
6
# show categories card on home page
home_categories:
  enable: true
  content:
    - categories: snippets
      cover: covers/reimu/108212938.jpg # 路径相对于 source/_data 文件夹

image-20241229192217694

文章末尾版权信息

哈哈，全开！

1
2
3
4
5
6
7
8
9
article_copyright:
  enable: true
  content:
    author: true
    link: true
    title: true
    date: true
    updated: true
    license: true

image-20241229192459575

修改模板

scaffolds/post.md：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: {{ title }}
urlname: {{ title }}
date: {{ date }}
mermaid: true # 开启 mermaid 支持
# sticky: true # 置顶
cover: yyyy/mm/{{ title }}/cover.jpg # 封面图片路径，相对于生成后的静态文件目录
excerpt: "" # 摘要，用于首页显示
categories: # 分类，可以有多个或多层级，如 - ["笔记", "前端"] 表示前端笔记
  - []
tags: [] # 标签
---

scaffolds/page.md：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: {{ title }}
urlname: {{ title }}
date: {{ date }}
mermaid: true
# sticky: true
cover: yyyy/mm/{{ title }}/cover.jpg
excerpt: ""
categories: 
  - []
tags: []
---

scaffolds/draft.md：

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
urlname: {{ title }}
mermaid: true
# sticky: true
cover: yyyy/mm/{{ title }}/cover.jpg
excerpt: ""
categories: 
  - []
tags: []
---

头像与封面

头像所在路径为：source\_data\avatar\avatar.webp。将该图片用另外的 webp 图片替换即可。

文章封面使用每篇文章中开头的 Front-matter 中的 cover 字段指定，路径相对于生成出的静态页面根目录。可以设置为 cover: covers/<cover.png>（放在博客源码的 source\_data\covers 中），也可以设置为 cover: /2024/10/<article>/<cover.png>（放在博客源码的 source\_posts\<article> 中）。

在本站当中，每篇文章的封面均存储在对应文件夹下，而非统一放在 source\_data\covers 文件夹中。

不过，首页分类标签的封面会放在 source\_data\covers 文件夹中。

基本的博客发布流程

  1. 写文章：hexo new post "<title>"
  2. 本地预览：hexo server
  3. 生成静态文件：hexo clean && hexo generate （或 hexo g）
  4. 将博客源代码提交到单独的 blog-hexo 仓库
  5. 创建 GitHub Pages 仓库：<username.lowercase>.github.io
  6. 部署到 GitHub Pages：hexo deploy （或 hexo d）

我个人的工作流

  1. 使用 Hexo 新建文章，移动到博客源码目录下的 _draft 文件夹中；
  2. 使用 Typora 编辑文章，预览效果；此时图片存放在 _draft/<title>/img 文件夹中，文章源码文件为 _draft/<title>/<title>.md；
  3. 将文章移动到 source/_posts 文件夹中（source/_posts/<title>.md），同时将所有图片移动到 source/_posts/<title> 文件夹中，删去文章中文件引入语句里的 img/；
  4. 其余生成与部署步骤同上。

这一过程我已经使用 Python 脚本自动化了，现已开源至 hexo-post-guide。

彩蛋

cover

  • 封面图片：
    • 作者：sorani (X: @srn_111)
    • 来源：srn_111/status/1772554048165585244

本文作者：Recogeta @ Recogeta's Blog

本文链接：https://r3c0ger.github.io/2024/12/reproduce-hexo-blog/

本文标题：「如何复现本博客？」

本文发布时间：2024-12-29 20:14:00

本文修改时间：2025-01-11 00:42:55

本文版权：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！