VPS+Hexo博客搭建教程

发表于2025-01-21|更新于2025-01-21|软件教程

|浏览量:

本文仅在 macOS 上试验

一、Hexo 框架概述

Hexo 是一款基于 Node.js 的静态博客框架，具有生成速度快、主题生态丰富、Markdown 支持完善等特点，适合技术博客搭建。

Hexo 安装

在本地安装必要的环境与软件

brew update
brew install node hexo

创建博客目录与初始化安装

mkdir blog && cd blog
hexo init
npm install

博客基础配置

创建分类页与标签页

hexo n page "Category"
hexo n page "Tag"

source/category/index.md和source/tag/index.md的 front-matter

title: <title>
date: <date>
type: <type>
top_img: /img/<type>.jpg

其中 type 为 tags 或 categories，img 文件夹是 butterfly 文件夹下的source/img

修改scaffolds/post.md为以下不带封面，不含数学公式的的 post 模板，如果某个 post 含数学公式，将katex设为true，并配合后续关于数学公式的配置即可。

title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories:
tags:
keywords:
top_img: false
katex: false

Hexo 个性化主题

安装 butterfly 主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save

在_config.yml中启用 butterfly 主题

title: <title>
description: <description>
keywords: <keywords>
author: <author>
language: zh-CN
timezone: Asia/Shanghai
email: <email>
theme: butterfly

生成优先配置文件，并根据自己的喜好调整主题配置

cp theme/butterfly/_config.yml _config.butterfly.yml
vim _config.butterfly.yml

数学公式相关

下载数学公式渲染模块

npm un hexo-renderer-marked --save
npm un hexo-renderer-kramed --save
npm i hexo-renderer-markdown-it --save
npm install katex @renbaoshuo/markdown-it-katex

在_config.butterfly.yml中启用katex模块

math:
  use: katex
  per_page: false
  hide_scrollbar: true
  katex:
    copy_tex: false

在_config.yml中启用katex模块

markdown:
  anchors:
    level: 1
  plugins:
    - '@renbaoshuo/markdown-it-katex'

Hexo 部署

在本机和服务器上都安装rsync，在服务器上安装npm(nginx proxy manager)
将域名指向服务器 IP
对于 docker 安装的 npm，可以直接在npm/data文件夹下创建一个hexo文件夹
进入 npm，配置域名为自己的域名，IP 为 127.0.0.1，port 为 80，配置证书，在 advanced config 中加入以下配置

location / {
    root /data/hexo;
}

安装 rsync 部署插件

npm install hexo-deployer-rsync --save

修改_config.yml文件，修改以下配置

deploy:
  type: rsync
  host: <ip>
  user: root
  root: <npm-dir>/data/hexo
  port: 22
  delete: true
  progress: true
  verbose: true
  ignore_errors: false
  create_before_update: false

运行如下命令部署 hexo

hexo g
hexo d