个人博客Hexo搭建

前言

一直想搭建个人博客，但自行编码网页搭建工作量过大，从而使用hexo博客框架进行博客搭建，本文将详细介绍如何通过hexo框架搭建个人网站并对网站进行布局配置、文章发布及网站部署上线

框架简介

Hexo是一个快速、简洁且高效的博客框架。基于Node.js，它可以帮助您使用Markdown (或其他渲染引擎) 轻松创建网站，具有强大的插件系统和主题支持，可以让您构建定制的网站。Hexo的文件结构清晰，可以轻松管理您的内容。它提供了一个强大的命令行界面，可以让您快速开始创建内容，并且它拥有一个强大的API，可以让您在您的工作流程中自定义您的网站构建过程

官网链接：https://hexo.io/zh-cn/

基础环境

Node.js (运行环境，Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git (主要用于拉取代码)

基础环境搭建不过多介绍，百度很多教程🫡

Hexo初始化

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

默认访问地址：http://localhost:4000

更换主题

主题官网：https://hexo.io/themes/

下载主题
以Butterfly主题为例: https://github.com/jerryc127/hexo-theme-butterfly.git
1
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
将主题拉入至themes目录下
更改默认主题
修改_config.yml文件中theme配置
1
$ theme: butterfly
安装相关依赖
1
$ npm install hexo-renderer-pug hexo-renderer-stylus --save
butterfly主题需要依赖与 pug 以及 stylus 渲染器，否则页面加载失败
重新编译启动
1
2
3
$ hexo clean
$ hexo g
$ hexo s

PS：后续配置修改都基于butterfly主题

发布部署

如自己无服务器，可部署在其他平台（github、gitee等）本文不细说，自行百度👉🏻

主要介绍自有服务器前提下如何进行发布部署

云服务器
XX云采购服务器，如需进行自动化部署(Jenkins、Hudson等)最低要求2核4G，手动部署1核2G即可
环境要求
- Node.js (运行环境，Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
- Git (主要用于拉取主题，不进行代码拉取也可不要)
- PM2 (以守护进程形式运行hexo，也可用其他形式运行hexo，不过强烈推荐使用此工具 - 方便)
- Nginx (用于域名代理至博客服务)
  
  基础环境搭建不过多介绍，百度很多教程🫡

编写运行脚本

将hexo文件上传至服务器后，在根目录下编写运行脚本run.js

脚本参考于Node.js 官方文档 child_process.exec(command[, options][, callback])

//run.js
const { exec } = require('child_process')
exec('hexo server -p 4000',(error, stdout, stderr) => {     
  if(error){
     console.log(`exec error: ${error}`)
     return
  }
  console.log(`stdout: ${stdout}`);
  console.log(`stderr: ${stderr}`);
})

启动服务

1
2
3

$ hexo clean
$ hexo g
$ pm2 start run.js

查询是否启动成功

1	$ pm2 list

关闭服务

1	$ pm2 delete run

域名代理

域名可自行去XX云中采购

nginx关键配置

location /  {
   proxy_pass http://localhost:4000;
   index index.html index.htm;
   proxy_set_header X-Real-IP        $remote_addr;
   proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
   proxy_set_header Host             $http_host;
}

常见问题

使用Typora编辑复制图片无法在Hexo正常显示
- 修改Typora图像配置 (修改配置后复制图像进入会在文件相对目录创建同名图片存储文件夹)
- 修改hexo配置（_config.yml文件）
  1
  $ post_asset_folder: true
- 安装hexo-asset-image的依赖 (根目录下安装)
  1
  $ npm install https://github.com/CodeFalling/hexo-asset-image --save
- 重新编译启动
  1
  2
  3
  $ hexo clean
  $ hexo g
  $ hexo s

增加全站文章搜索

安装 hexo-generator-searchdb 搜索插件

1	$ npm install hexo-generator-searchdb --save

修改主题配置文件

1
2
3

local_search:
 enable: true
 unescape: true

重新编译启动

1
2
3

$ hexo clean
$ hexo g
$ hexo s

git start

基础环境

Hexo初始化

更换主题

下载主题

更改默认主题

安装相关依赖