Hexo博客本地配置

0. 环境

  • nodejs
  • git

1. 本地安装

  1. 选择一个本地文件夹路劲(不带中文)
  2. 右键 open git bash here
  3. 输入:
bash 复制代码
npm install -g hexo-cli

安装hexo

  1. 输入 hexo -v,查看是否安装成功:

2. 初始化

  1. 继续输入:
bash 复制代码
hexo init

然后我报错了

换个方法:

  1. 在 https://github.com/hexojs/hexo-starter 下载代码
  2. 直接解压,所有文件丢到我的那个文件夹内
  3. 启动git bash,执行:
bash 复制代码
npm install
  1. 验证是否成功:
bash 复制代码
hexo s
  1. 打开 localhost:4000,查看效果

3. 设置主题

我采用的是butterfly

https://github.com/jerryc127/hexo-theme-butterfly

  1. 下载:
bash 复制代码
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  1. 安装主题依赖
bash 复制代码
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 启用
    在 _config.yml 文件中:
yml 复制代码
theme: butterfly
  1. 启动
powershell 复制代码
hexo clean
hexo s
hexo clean ; hexo s(两行可以合并)

也可以直接配置powershell:

bash 复制代码
notepad $PROFILE 

然后在打开的记事本里添加:

bash 复制代码
# Hexo快捷键 Hexos :清理 + 启动本地预览
function hexos {
    hexo clean ; hexo s
}

# Hexo快捷键 Hexod :清理 + 生成 + 部署上线
function hexod {
    hexo clean ; hexo g ; hexo d
}

回到终端:

bash 复制代码
. $PROFILE

4. 主题优化

这个部分我还没搞定

首先要去安装plug和stylus:

bash 复制代码
npm install hexo-renderer-pug hexo-renderer-stylus --save

在根目录里新建 _config.butterfly.yml,然后把这个东西丢进去:

yml 复制代码
# ==================== 1. 站点基础信息 ====================
avatar: /img/avatar.jpg  # 头像:把图片放到 source/img/ 下
favicon: /img/favicon.ico # 浏览器标签图标

# ==================== 2. 顶部导航菜单(专栏/标签/归档/关于) ====================
menu:
  首页: / || fa fa-home
  专栏: /categories/ || fa fa-th-large
  标签: /tags/ || fa fa-tags 
  归档: /archives/ || fa fa-archive
  关于: /about/ || fa fa-user

# 菜单图标库,保持默认即可
menu_icons:
  enable: true

# ==================== 3. 页面布局 & 侧边栏 ====================
sidebar:
  position: left         # 侧边栏位置 left/right
  display: always        # always 一直显示 | hide 移动端隐藏
  offset: true

# 侧边栏组件(按需开启)
sidebar_widget:
  author: true           # 作者信息卡片
  category: true         # 专栏分类
  tag: true              # 标签云
  archive: true          # 文章归档
  webinfo: true          # 网站统计

# ==================== 4. 文章样式(重点:适配你的技术文章) ====================
# 文章摘要
post_excerpt:
  enable: true
  length: 150            # 首页摘要字数

# 文章内目录(右侧悬浮目录,长文章必备)
toc:
  enable: true
  number: false          # 目录是否带序号
  expand: true           # 默认展开全部目录

# 代码块(技术博客核心)
highlight:
  theme:
    light: github        # 浅色模式代码主题
    dark: github-dark    # 暗黑模式代码主题
  copy: true             # 代码块显示「复制按钮」
  fold: false            # 代码块默认不折叠

# 文章顶部元信息(日期、标签、阅读量等)
post_meta:
  page:
    date_type: created
    date_format: YYYY-MM-DD
    word_count: true     # 显示文章字数
    min2read: true       # 显示阅读时长
    categories: true
    tags: true

# 图片懒加载(提升加载速度,图片多必开)
lazyload:
  enable: true

# ==================== 5. 全站搜索功能(站内检索文章) ====================
local_search:
  enable: true
  preload: false
  CDN:

# ==================== 6. 页脚 ====================
footer:
  owner: 你的昵称
  start_year: 2026       # 建站年份
  runtime: true          # 显示网站运行时长
  icp: ''                # 国内备案号,没有就留空

# ==================== 7. 基础动画 & 特效 ====================
enter_transition: true   # 页面进场动画
back2top:
  enable: true           # 回到顶部按钮
  side: right

# ==================== 8. 评论(后续可选配置,先关闭不影响使用) ====================
comments:
  use: false             # 暂时关闭评论,后面需要再开启

个人about界面:

  1. 输入:
bash 复制代码
hexo new page about
  1. 打开 source/about/index.md,写入内容
相关推荐
Joy T8 分钟前
聊天系统中五大ID的演进与实战解析
java·前端·人工智能·spring·agent入门
Seraphina362 小时前
DVWA(SQL注入-low,medium,XSS反射-low)
前端·数据库·笔记·sql·网络安全·web·xss
Access开发易登软件2 小时前
Access 导入 Markdown 表格:把文档里的数据写进表
前端·html·vba·markdown·access开发
扶风ff2 小时前
求职笔试资料太散?用练题簿在线刷题,按岗位整理练习清单
前端·学习·小程序
浪浪山_大橙子2 小时前
公司里的 AI,终于不只会聊天:我用 GPT‑6 把企业工作伙伴开源了
前端·后端·面试
琹箐2 小时前
命令行调用接口
前端
可乐鸡翅yeah_3 小时前
AES‑128 加密 M3U8,IV 初始化向量新手容易踩坑
前端·网络·数据库·ffmpeg·音视频·m3u8在线
MetWeave3 小时前
机场天气的"广播系统":三种报文一次讲明白
前端
xieter3 小时前
【技术精选】深入浅出现代前端渲染与性能优化实践指南 (2026-10-04)
前端·javascript
计算机魔术师3 小时前
Anthropic 密会宗教领袖谈 Claude 意识,OpenAI 为什么急眼
前端