技术 - 使用 hexo 搭建博客

感觉写这个还是比较有必要的。2024.9.17 配置完成的博客，现在作一下经验总结。持续更新。

前置

• 安装 Git。https://git-scm.com/。
• 安装 nodejs 新版。https://nodejs.org/en/download/。这里当时以为用 nvm 升级，结果 nvm 只有旧版本，不要用。
• 安装 Hexo。npm install hexo -g。
• 安装一键部署包。npm install --save hexo-deployer-git。

配置 SSH Key

这一段，我是直接参照 https://www.cnblogs.com/chenlove/p/15058170.html（不如说整个流程都是参照它的），直接做即可。

搭建

仍然可以查看上面这一篇，或者查看 Hexo 官方文档 https://hexo.io/zh-cn/docs/setup。整体的逻辑就是用 npm 管理所有的软件包。

编写博客

使用 Markdown。

一般有一个 header，就是在每篇文章的最上方有这样的文字：

---
layout: post
title: ...
date: ...
tags:
  - ...
  - ...
categories: ...
---

其他是正常的。

about 页的 layout 设置成 about。

渲染

为了支持 $\KaTeX$ 渲染，使用了 hexo-math 和 hexo-renderer-markdown-it-plus 插件。

我目前使用的主题是 Fluid，官方文档很全面，整体也很好看。不过有一些细节文档没有提及，在下面贴出我的 _config.fluid.yml（可能不随时更新）。

附加功能

评论使用 giscus 插件，网页统计使用 busuanzi，具体配置直接看下方的主题配置文件吧，就跟在 post 一段后面。

主题配置文件

也就是 _config.fluid.yml。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: SunsetGlow95's Blog
subtitle: SunsetGlow95's Blog 
description: SunsetGlow95's Blog
keywords:
author: SunsetGlow95
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: http://SunsetGlow95.github.io
permalink: :year/:month/:day/: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

# 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:

# 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:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
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: 10
  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:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:SunsetGlow95/SunsetGlow95.github.io.git
  branch: main

favicon: https://s2.loli.net/2024/10/29/lUILWGcexEiNZjh.png

index:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg
  slogan:
    enable: true
    text: 放下幻想，准备战斗。
  auto_excerpt:
    enable: false

navbar:
  blog_title: SunsetGlow95's Blog
  menu:
    - {
      key: 'home',
      link: '/',
      icon: 'iconfont icon-home-fill',
    }
    - {
      key: 'archive',
      link: '/archives/',
      icon: 'iconfont icon-archive-fill',
    }
    - {
      key: 'category',
      link: '/categories/',
      icon: 'iconfont icon-category-fill',
    }
    - {
      key: 'tag',
      link: '/tags/',
      icon: 'iconfont icon-tags-fill',
    }
    - {
      key: 'links',
      link: '/links/',
      icon: 'iconfont icon-link-fill',
    }
    - {
      key: 'about',
      link: '/about/',
      icon: 'iconfont icon-user-fill',
    }

archive:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg

category:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg

tag:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg

post:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg
  math:
    enable: true
    specific: true
    engine: katex
  comments:
    enable: true
    type: giscus

# giscus: convert the given js into yaml
giscus:
  repo: SunsetGlow95/SunsetGlow95.github.io
  repo-id: R_kgDOMxNR0g
  category: Announcements
  category-id: DIC_kwDOMxNR0s4Co1Jo
  mapping: pathname
  strict: 0
  reactions-enabled: 1
  emit-metadata: 0
  input-position: bottom
  theme: noborder_gray
  lang: zh-CN
  crossorigin: anonymous

# web analytics
web_analytics:
  enable: true
footer:
  statistics:
    enable: true
    source: "busuanzi"
    pv_format: "总访问量 {} 次"
    uv_format: "总访客数 {} 人"

# links page
links:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg
  items:
    - {
      title: '洛谷',
      avatar: 'https://www.luogu.com.cn/favicon.ico',
      link: 'https://www.luogu.com.cn',
    }
    - {
      title: 'Codeforces',
      link: 'https://codeforces.com',
    }
    - {
      title: 'AtCoder',
      avatar: 'https://atcoder.jp/favicon.ico',
      link: 'https://atcoder.jp',
    }
    - {
      title: 'Virtual Judge',
      avatar: 'https://vjudge.net/favicon.ico',
      link: 'https://vjudge.net',
    }
    - {
      title: 'QOJ',
      link: 'https://qoj.ac',
    }
    - {
      title: 'ZROI',
      avatar: 'https://ng.zhengruioi.com/favicon.ico',
      link: 'https://ng.zhengruioi.com',
    }
    - {
      title: 'UOJ',
      avatar: 'https://uoj.ac/pictures/UOJ.png',
      link: 'https://uoj.ac',
    }
    - {
      title: 'LibreOJ',
      avatar: 'https://static.cdn.menci.xyz/libreoj-assets/logo-website.min.svg',
      link: 'https://loj.ac',
    }
    - {
      title: 'OI Wiki',
      avatar: 'https://oi-wiki.org/favicon.ico',
      link: 'https://oi-wiki.org',
    }
    - {
      title: 'OIerDb NG',
      avatar: 'https://oier.baoshuo.dev/favicon.ico',
      link: 'https://oier.baoshuo.dev',
    }
    - {
      title: '图论编辑器',
      avatar: 'https://csacademy.com/static/favicon.png',
      link: 'https://csacademy.com/app/graph_editor',
    }
    - {
      title: 'tldraw',
      avatar: 'https://www.tldraw.com/assets/0_merged_tla-CUIMqQIQ.svg#icon-tldraw',
      link: 'https://www.tldraw.com',
    }
    - {
      title: 'caijianhong - 博客园',
      avatar: 'https://cdn.luogu.com.cn/upload/usericon/509229.png',
      link: 'https://www.cnblogs.com/caijianhong',
    }
    - {
      title: "Exber's Blog",
      avatar: 'https://cdn.luogu.com.cn/upload/usericon/251130.png',
      link: 'https://rebxe.github.io',
    }

# about page
about:
  banner_img: https://s2.loli.net/2024/10/21/iC5uDOy7pe3PzJw.jpg
  avatar: https://s2.loli.net/2024/10/29/gWdDbIaXM4Lrc53.png
  name: "SunsetGlow95"
  intro: "OI / 编程 / 数学 / 音乐 / 音游 / 魔方"
  icons:
    - {
      class: 'iconfont icon-codeforces',
      link: 'https://codeforces.com/profile/SunsetGlow95',
      tip: 'Codeforces'
    }
    - {
      class: 'iconfont icon-bilibili',
      link: 'https://space.bilibili.com/483357008',
      tip: 'Bilibili'
    }

# dark mode
dark_mode:
  enable: true
  default: auto

如果在加入 hexo-renderer-markdown-it-plus 后未将 fluid 语言调整为 zh-cn，将会变成德语，但不知道为啥。

我一开始尝试过其他主题，其中觉得比较好看的只有 particlex。但是它不支持 hexo-renderer-markdown-it-plus，代码高亮会死掉。开发者说推荐的渲染器是 hexo-renderer-pandoc，不过我没整成，懒了。

默认主题是 landscape。

维护

以下全部都是工作目录在博客目录下，终端的命令。

• 清空：hexo clear/hexo cl。
• 生成网页：hexo generate/hexo g。（它是惰性的，如果需要全部刷新需要先执行 hexo cl。）
• 本地预览：hexo server/hexo s。
• 上传到 GitHub：hexo deploy/hexo d。