使用 Hexo 搭建博客

什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

前提

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

Git

更新 Node.js

查看当前版本

npm -v
更新到最新版

npm install npm@latest -g

安装 Hexo

打开 cmd 输入指令

$ npm install -g hexo-cli
$ npm install -g hexo-cli@4.3.2
安装记得打开管理员权限，不然可能安装失败

查看版本

$ hexo v
需要安装对应版本的npm和hexo才能正常使用，对比文档

初始化

$ hexo init

安装主题

1.在主题网站选择主题并跳转到 github

2.clone 仓库地址这里选择”hexo-theme-butterfly”

配置主题

打开根目录下的 _config.yml,找到 theme 修改为主题文件名

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

butterfly 主题个性化设置

部署 hexo

$ hexo g

启动 hexo 本地化预览

$ hexo s

部署到 github

github 创建仓库,后缀.github.io
配置 SSH 详情见 https://developer.aliyun.com/article/1218122
修改_config.yml 文件如下:

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

根目录下安装 deploy-git ，也就是部署的命令,这样才能用命令部署到 GitHub

npm install hexo-deployer-git –save
依次执行

hexo c #清除缓存文件 db.json 和已生成的静态文件 public

hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)

hexo d #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

常用指令

hexo s #启动本地服务
hexo new [文件名] #新建文件
hexo c #清除缓存文件
hexo g #生成网站静态文件到默认设置的 public 文件夹
hexo d #生成部署

问题

更改主题后启动服务器在本地页面上显示各种信息如：extends includes/layout.pug block content include includes/recent-posts.pug include

解决办法：
npm install –save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

部署到 github 上后在 google 上无法访问，在 edge 上可以访问

迁移博客

安装前置环境

同上安装前置的npm和hexo支持

导入博客源文件

大致文件目录如下

my-blog/
├── _config.yml       # Hexo 主配置文件
├── package.json      # 依赖列表
├── scaffolds/        # 模板文件
├── source/           # 文章和资源（最重要！）
│   ├── _posts/       # 所有文章（.md 文件）
│   ├── _drafts/      # 草稿（可选）
│   └── images/       # 图片等资源（可选）
├── themes/           # 主题文件夹（如 next、butterfly）
└── .gitignore        # Git 忽略文件

检查package.json文件中的版本和依赖是否正确

下载依赖

进入博客根目录下安装依赖

npm install -force

再安装hexo，知道能正确输出hexo版本

导入主题

进入主题所在文件夹

blog\themes\hexo-theme-butterfly

执行：

git clone https://github.com/theme-next/hexo-theme-next themes/next

其他

如果遇到部分报错如

ERROR Plugin load failed: hexo-browsersync

是因为依赖加载错误，可以将依赖卸载后重新下载

npm uninstall hexo-browsersync –save

npm install hexo-browsersync@latest –save

搭建自己的博客