Skip to content
#前端 #hexo

hexo搭建流程

约 1035 个字 50 行代码 预计阅读时间 4 分钟

严格来说，这个不是自己第一次接触建站，以前自己折腾过wordpress，但这是自己第一次接触hexo这个轻量框架，主要是自己喜欢一个hexo的tree主题，认为它和自己的博客预期很符合，虽然后续没用hexo作为自己的建站框架，万一后续自己还继续回来玩hexo，毕竟自己安装部署测试过程中遇到了很多坑，因此这里做一下记录。

hexo框架简介

hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页；hexo与wordpress，typecho等博客框架不一样的，后两者是动态站点，需要服务器来部署，而Hexo属于静态站点，可以部署在静态托管网站，可以给节省一大笔服务器的费用。

hexo是一款基于Node.js的快速、简洁且高效的博客框架。它支持Markdown语法，轻松创建个人博客，并可部署到各种平台，如GitHub Pages、Heroku等。Hexo提供丰富的主题和插件，适用于个人博客、技术博客、团队博客、文档站点等多种场景。其活跃的社区和简便的部署方式使其成为许多用户首选的博客框架。

nodejs安装

环境说明：以下测试环境是：腾讯云-Ubuntu 22.04 LTS，其他环境未测试过

  1. nodejs下载

下载网站：Index of /dist/ (nodejs.org)，选择自己的版本

Bash
sudo wget https://nodejs.org/dist/latest-v22.x/node-v22.2.0-linux-x64.tar.gz /usr/local
cd /usr/local && sudo tar xf node-v22.2.0-linux-x64.tar.gz
cd node-v22.2.0-linux-x64/ && pwd
2. nodejs配置
Bash
#修改全局环境变量
sudo vim /etc/profile

添加如下内容：
export NODEJS_HOME=/usr/local/node-v22.2.0-linux-x64
export PATH=$NODEJS_HOME/bin:$PATH

#刷新全局变量，以下命令可能会报错：sudo: source: command not found，原因是当前账户可能不是root
sudo source /etc/profile
###以下命令进行root账户切换进行刷新
sudo -s
source /etc/profile
###记得关闭当前的teminal，然后重新进入新的teminal进行验证

node -v
npm -v

hexo安装

Bash
###因为不熟悉hexo，所以进行全局安装
npm install hexo-cli -g
#验证版本
hexo -v

创建博客站点

这里的站点就是自己的博客项目，存放路径自己选择服务器上的路径即可，这里以自己的站点目录：/data/blog为例进行后续的说明

Bash
mkdir <你的博客根文件夹> # cd /data & mkdir p blog
# eg: mkdir myBlog
cd <你的博客文件夹> ##cd blog
# 切换到 hexo-blog 项目目录中，后续命令都需要在这个文件夹中进行
hexo init
# 博客初始化
npm install
# 安装必备组件

##############################成功初始化后，自己的站点目录下将会有如下的
├── _config.yml # 网站的配置文件 
├── package.json
├── scaffolds # 生成文章的模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到 public 文件夹
    |   ├── _drafts # 草稿文件
    |   └── _posts # 文章 Markdowm 文件 
└── themes  # 主题文件夹

创建完成后，站点默认使用的是landscape主题，不符合个人的需求，因此这里直接进行主题的更换，在更换配置过程中进行站点的个性化配置。

主题修改

个人博客是打算构建系统化的笔记，因此个人喜欢hexo-theme-tree主题，系统化管理个人的知识体系，读者也可以系统化的查询&学习

这里参考hexo-theme-tree的安装说明进行安装配置该主题

Bash
cd /data/blog 
git clone https://github.com/wujun234/hexo-theme-tree.git  themes/tree

#配置tree主题的参数，这里注意不能直接在_config.yml里面修改，因为是hexo的版本问题导致的，
#老版本的hexo直接修改_config.yml是可行的，新版本的需要构建theme单独的配置文件，格式：_config.ThemeName.yml
#cite：https://hexo.io/zh-cn/docs/configuration，该特性自 Hexo 5.0.0 起提供
cp _config.yml _config.tree.yml

但是hexo主题的左侧导航栏需要根据文章的tag自动解析生成，但个人希望是可以自定义，此外他的TOC是在左侧自动展开的，当左侧导航栏内容过多时，当前页面的TOC展示出来就不是很美观，尤其是当前页面的TOC很多时，因此后续没有继续用hexo+tree进行博客的建站。

tree主题目前有大佬测试发现可能有一些"不丝滑"之处，大佬给出来建议：详见：

https://seekstar.github.io/2021/11/16/hexo-tree主题让文章的url中不含目录/

https://seekstar.github.io/2021/02/28/hexo-tree主题-使用笔记/

有哪些坑

其实将以下不熟悉知识点归为坑，可能是自己的开脱之词，这里还是总结一下：

  • hexo的安装部署谨记不要用腾讯云的hexo+nodejs面板来一键安装部署，个人实测发现一键安装后的的hexo启动不了，如果对hexo更新，也会造成hexo启动不了，自己在这个一键部署上反反复复重装系统10+，建议仅安装一个系统即可，对于nodejs和hexo的安装最好是手动安装；

  • 其次也不推荐用其他傻瓜式的一键式安装部署软件，eg:宝塔/1panel等安装，自己也折腾过这两个软件，但是一直问题不断；但是当手动部署好hexo后，如果自己的服务器没有前端控制面板，推荐使用这两个软件来对自己的服务器的各方面进行监控，由于个人的需求不是很多，因此直接用腾讯云的控制面板进行监控就可，后期如果有需要，再来折腾它们。