基于hexo的博客搭建记录

简介

本文将使用基于node.js的一个快速、简介且高效的博客框架————hexo，完成一个博客网站的搭建，由于hexo是建立在node之上，建议先在本地完成node.js环境的配置。

相关链接：

hexo官方文档：https://hexo.bootcss.com/docs/

hexo主题配置： https://easyhexo.com/2-Theme-use-and-config/

开始搭建

一，项目初始化

1、使用npm下载hexo

npm install -g hexo-cli

2、创建一个项目文件夹(目录随意)，名称随意，我这里以hexo为例

mkdir hexo // 创建一个名为hexo的文件夹
cd hexo //进入hexo目录下
hexo init //初始化，等待下载完成

当看到这样的字样则表示项目初始化成功！！！

3、将项目运行起来，使用控制台进入当前目录，win+r，输入cmd，然后cd 到当前目录即可，不过在windows下需要注意的是，如果要切换到其他盘，如D ,E盘，则需要先输入d: 或 e: 。

npm install //首先导入相关的依赖
hexo g  
hexo s

在浏览器输入localhost:4000即可打开博客页面，如下图所示

这样，博客搭建的第一步就完成了，顺便介绍一下hexo常用的几个命令

• hexo clean 清空当前编译好的静态文件以及缓存文件，可以理解为将博客网页清空
• hexo generate 生成静态文件，也就是生成博客页面 ，可以简写为 hexo g
• hexo server 从本地服务器打开博客，可以简写为hexo s
• hexo deploy 将博客进行部署，这个暂时不进行描述
• hexo new page pagename 新建一个页面
• hexo new blogname 新建一篇博客，也就是创建一个markdown文件，存放在项目根目录下的source/_posts下

然后看一下项目的基本目录结构

node_module   --项目依赖文件夹
public        --生成的静态网页目录
themes        --主题文件夹，下载的主题放到这里面
source        --与我们接触最多的一个文件夹，里面放着各种页面，文章和图片
	-_posts   --写的博客就放在这里面
_config.yml   --项目配置文件

二，博客界面美化

hexo官网给我们提供了很多免费的主题，传送门，可以在这里寻找自己喜欢的主题，用git克隆到themes目录后，在_config.yml配置文件进行切换，如图

这里我使用的是matery主题，是把他克隆到项目根目录下的themes主题目录下

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

然后根据上图修改配置文件即可，修改完成后记得重新生成静态文件hexo g，然后重新运行hexo s

查看效果

关于博客主题的相关配置，在themes下的hexo-theme-matery下有一个_config.yml的配置文件，里面都有注释，可以进行相关功能的添加

关于标签、分类、关于等界面点击后没有页面的情况，我们查看hexo-theme-matery文档

https://easyhexo.com/2-Theme-use-and-config/2-14-hexo-theme-matery/

根据官方文档进行相关界面的配置即可，这里以categories为例

hexo new page "categories"

然后在source目录下找到categories/index.md，修改如下，即可，

---
title: categories
date: 2018-09-30 17:25:30  //时间可不做修改
type: "categories"
layout: "categories"
---

其他页面也是一样的方法，配置完成后重新打包静态文件，hexo g然后运行就可以了

加载速度优化

在使用过程中发现，有时候会出现加载缓慢的问题，我们打开控制台，点击网络，这时候发现一个名叫typed.js的文件请求失败了，怀疑是这个文件一直请求不成功，导致网页一直阻塞在加载状态。

这是一个用来实现首页打字效果的js插件，我们在主题目录下（也就是hexo-theme-matery文件夹下）的layout\_partial下找到一个bg-cover-content.ejs的文件，打开可看到这里是使用的cdn引入

我们可以直接把这个文件下载到本地，这样就不用每次都需要从网上去下载资源，，尤其在网络比较慢的情况下，会让博客的加载一直处于阻塞状态。

找不到下载地址的小伙伴可以使用我这个地址

https://zhaojiuyi.github.io/medias/js/typed.min.js

打开后是这样的一个网页

全部选中后在主题目录hexo-theme-matery下的source\js下创建一个type-min.js文件，将内容粘贴进去，然后保存，最后在hexo-theme-matery\layout\_partial下的bg-cover-content.ejs下导入js文件

<script type="text/javascript" src="/js/typed.min.js"></script>

图片中删除的部分路径可能不太一样，只用看最后都是type.js或者type.min.js就可以了

现在重新打包静态文件，可以看到博客启动速度变快了。

来个开箱即用

使用如下命令，直接克隆博主搭建好的博客到本地

git clone https://github.com/zhaojiuyi/hexo-matery.git

使用hexo g生成静态文件，然后hexo s运行后在浏览器输入localhost:4000打开，功能虽然不多，也还能满足基本需求。关于部署的问题网上教程很多，暂时先不做叙述了。

npm install
hexo clean
hexo g
hexo s

最后推荐几篇博客

hexo+github博客搭建和部署，个人认为十分详细：,https://blog.csdn.net/qq_58608526/article/details/124652412

页面加载动画：https://blog.csdn.net/weixin_43662760/article/details/122311217

网页昼夜切换的效果：https://dreamruins.gitee.io/tutorials/1121281946.html#vcomments