本地部署

首先需要安装一下Git和Node.js

安装Git

  • Windows/Mac用户：从Git官网下载安装包，按提示安装。
  • 安装完成后，终端输入 git --version 验证是否成功。

安装Node.js

  • 从Node.js官网下载LTS版本安装包。安装完成后，终端输入 node -v 和 npm -v 检查版本。

确认无误后就可以安装Hexo了

安装并初始化Hexo

终端执行以下命令进行安装

1
2
npm install -g hexo-cli
1

  • 若因网络问题安装失败，可切换为国内镜像：

    1
    2
    npm config set registry https://registry.npm.taobao.org
    1

  • 安装成功后，输入 hexo -v 验证。

初始化博客项目，创建的文件夹里就是博客的全部文件

1
2
3
hexo init myblog  # 创建名为myblog的文件夹
cd myblog
npm install

配置Hexo

打开 myblog/_config.yml 文件，修改以下字段：

1
2
3
4
5
title: 我的博客         # 博客标题
subtitle: 记录技术点滴    # 副标题
author: 你的名字         # 作者名
language: zh-CN        # 语言
timezone: Asia/Shanghai # 时区

更换主题

终端执行

1
git clone 主题仓库地址 themes/主题名

然后在 _config.yml 中修改 theme: 主题名。

具体操作可以参考主题的教程：

例如Butterfly的教程：Butterfly 文檔(一) 快速開始 | Butterfly

创建文章

在博客根目录（我这里是myblog）输入以下命令来创建文章

1
2
# hexo new "文章名称"配置Hexo部署插件
hexo new "Hexo部署记录"
  • 文章Markdown文件位于 source/_posts 目录下，可编辑内容并添加Front-matter（如分类、标签）。

本地预览

1
2
3
hexo clean
hexo generate  # 生成静态文件
hexo server                  # 启动本地服务
  • 访问 http://localhost:4000 查看效果。

部署到GitHub Pages

首先需要注册一个GitHub的账号

然后创建GitHub仓库

  • 仓库名必须为 用户名.github.io（如 CBBA2002.github.io），选择Public可见性。

然后需要将本机的公钥添加到GitHub里，添加后就可以连接到仓库了

配置Hexo部署插件

  • 安装部署插件

    1
    npm install hexo-deployer-git --save

  • 修改 _config.yml 文件末尾的部署配置：

    1
    2
    3
    4
    deploy:
      type: git
      repo: [email protected]:用户名/用户名.github.io.git  # 替换为你的仓库地址
      branch: master  # 分支名可能是main或master

最后在终端输入以下指令即可部署到GitHub

1
2
3
hexo clean
hexo generate
hexo deploy
  • 完成后访问 https://用户名.github.io 即可看到在线博客。

部署到腾讯云的Coding

首先注册账号，这里推荐在腾讯云进入，使用腾讯云账号登录。如果是自己额外注册的账号，那数据和腾讯云账号是不通的

传送门

image-20250319171824169

创建项目仓库

代码仓库→立即使用→创建代码仓库

image-20250319171949101

image-20250319172026102

image-20250319172552047

创建仓库后，需要将本机的公钥绑定到这个仓库

image-20250319172737725

绑定公钥后，可以用以下代码测试是否绑定成功

1
ssh -T [email protected]

具体绑定公钥教程：配置 SSH 公钥 - 什么是 DevOps? DevOps 介绍 ｜ CODING DevOps

部署到Coding

获取项目仓库的ssh访问地址，复制其内容：

修改博客根目录下的_config.yml文件，修改deploy部分：

1
2
3
4
5
6
7
deploy:  
- type: git    
  repository: [email protected]:CBBA2002/CBBA2002.github.io.git # github的链接   
  branch: main  
- type: git    
  repository: [email protected]:g-fxjq6596/hexoblog/hexoblog.git   # coding的链接
  branch: master

这里部署同时写了两个仓库的链接，推送时可以同时推送到GitHub和Coding中

部署到Vercel

Vervel

首先需要注册个账号，注册后，点击Add New→Project

image-20250320091250247

然后导入Hexo在GitHub中的仓库

image-20250320091346066

输入项目的信息

image-20250320095128442

部署后可以添加域名了

添加自己的域名

点击Add New→Domain

image-20250320121834312

我已经在其他地方买过域名了，所以选择Add Existing Domain

image-20250320121924372

选择hexo这个项目，然后点击Continue，然后输入自己的域名就可以了

image-20250320121949025

然后他会提示你去 DNS 提供商上设置 A 记录或者 CNAME 记录

image-20250320134414909

按照他提示的去DNS提供商上设置一下就好了

解决DNS污染问题

参考这篇博客：一招解决Vercel站点在国内无法访问的问题-CSDN博客

压缩静态资源

博客网站数据量大后，加载速度会变慢，所以考虑优化一下加载的速度，参考教程：Hexo折腾系列（一）博客访问速度优化 - 江风引雨の小po站

主要压缩较大的css，js文件，这里使用hexo-all-minifier

安装：

1
npm install hexo-all-minifier --save

如果安装失败试试用cnpm，教程里用的cnpm

1
cnpm install hexo-all-minifier --save

配置

在_config.yml里添加:

1
all_minifier: true

详细设置：（详见 README）

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
# html压缩
html_minifier:
  enable: true
  ignore_error: false
  exclude:

# css压缩
css_minifier:
  enable: true
  exclude:
    - '*.min.css'
    
# js压缩
js_minifier:
  enable: true
  mangle: true
  compress:
  exclude:
    - '*.min.js'
js_concator:
  enable: false
  bundle_path: '/js/bundle.js'
  front: false
  silent: false

# 图片优化
image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false