搭建 blog

作用

写博客，无非是存一些零散知识什么的，方便回顾。

搭建流程

本文以 Github 博客 + Hexo 为例讲解。

首先准备：
Node.js（下载）
Git（下载）
创建 GitHub 仓库，名字必须为 [user_name].github.io，设为 Public 且不要初始化 README。
搭建 Hexo 博客：

# 安装 Hexo
npm install -g hexo-cli

# 创建博客
cd D:\MyBlog
hexo init blog
cd blog
npm install

# 安装 Fluid 主题
npm install --save hexo-theme-fluid

# 安装部署插件
npm install --save hexo-deployer-git

# 复制主题配置文件
Copy-Item node_modules/hexo-theme-fluid/_config.yml _config.fluid.yml

然后编辑根目录（记为 blog，下列操作默认在根目录下执行）下的 _config.yml：

# 站点信息
title: 你的博客标题
subtitle: '副标题'
description: '博客描述'
keywords: '关键词1,关键词2'
author: 你的名字
language: zh-CN
# timezone: 'Asia/Shanghai'

# URL
url: https://你的用户名.github.io
permalink: :year/:month/:day/:title/

# 主题
theme: fluid

# 部署配置
deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

创建必要页面（我忘记是否一定要执行这一步了，如果发现自己博客已经有下列页面（或者 blog/source/ 下已经有 about, tags, categories）可以不做）：

hexo new page about
hexo new page tags
hexo new page categories

源码管理

# 初始化 Git
git init

# 添加所有文件
git add .
git commit -m "Initial blog source"

# 添加远程仓库
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git

# 创建并切换到 source 分支
git checkout -b source

# 推送源码
git push -u origin source

创建部署脚本 deploy.ps1，执行时使用指令 .\deploy.ps1 即可。

$ErrorActionPreference = 'Stop'

# 始终在脚本所在目录（blog/）内执行，避免误操作外层仓库
Push-Location $PSScriptRoot
try {
# 确保在 source 分支并与远端同步
git fetch --all --prune

$current = (git rev-parse --abbrev-ref HEAD).Trim()
if ($current -ne 'source') {
   git show-ref --verify --quiet refs/heads/source
   if ($LASTEXITCODE -eq 0) {
      git checkout source
   } else {
      git checkout -b source origin/source
   }
}

git pull --rebase origin source

# 提交源码改动（若有）
git add -A
git diff --staged --quiet
if ($LASTEXITCODE -ne 0) {
   git commit -m "Update blog source"
} else {
   Write-Host "No source changes to commit" -ForegroundColor Yellow
}

git push -u origin source

# 生成并部署站点
hexo clean
hexo generate
hexo deploy

Write-Host "Blog deployed successfully!" -ForegroundColor Green
}
finally {
Pop-Location
}

后续维护

本地预览

# 通过 http://localhost:4000 预览
hexo server

# 刷新缓存并开启本地预览
hexo clean; hexo g; hexo s

新建文章

我认为直接在 source/_post/ 下存放所有的文章不便维护（因为多起来就不知道分类了），后试了一下发现可以在 _post 下随便开文件夹也会被检测到，所以可以放心在 source/_post/ 下建文件夹并维护文章。

在其他电脑上继续写博客

# 克隆源码
git clone https://github.com/你的用户名/你的用户名.github.io.git blog
cd blog

npm install -g hexo-cli

# 安装目录下的依赖
npm install
npm install hexo --save

hexo -v  # 验证

# 下面即可正常使用

编写博客

注意

md 文件顶部建议加上类似于下列格式（比如 categories 可以帮助分类）：

---
title: CF934 题解
date: 2025-08-24 20:00:00
categories:
  - CP
  - CF 题解
tags:
  - DP
  - 计算几何
mathjax: true
---

支持数学公式

修改 _config.fluid.yml：

math:
    enable: true    # 改这里
    specific: false
    engine: mathjax

更换 Markdown 渲染器

# 卸载默认渲染器
npm uninstall hexo-renderer-marked --save

# 安装支持数学公式的渲染器
npm install hexo-renderer-kramed --save

安装 MathJax 插件：

npm install hexo-filter-mathjax --save

修改代码高亮

# 代码高亮
# Code highlight
highlight:
  # ...
  highlightjs:
    style: "monokai"
    style_dark: "monokai"

支持图片

改博客的头图比较简单，到 _config.fluid.yml 找到对应的 banner_img 修改就行，图片路径我用的是在 source 下手动建立的 assets（因为头图不多，丢一个博客文件夹下管理就行，当然放图床也行）。

至于博文内的图片的加载：

npm install hexo-asset-img --save（下完之后可能会提示有 vulnerabilities，即使我按照提示运行了 npm audit fix --force 仍然显示还有 vulnerabilities，但不影响正常使用）
将 _config.yml 设置 post_asset_folder: true（我这边默认是 true）
然后文件结构有要求，比如博文是 abc.md，那么就要在同目录下有一个同名文件夹 abc，把图片（记为 1.png）放在 abc 下。那么博文内就可以直接用 <img src="1.png" width="50%"> 加载图片了。