hexo+yelee搭建一个快速、简洁且高效的博客框架

准备

本人是 windows 系统开发。

全局安装脚手架

npm install -g hexo-cli

初始化一个项目

hexo init hexoBolg

进入目录

cd hexoBolg

安装插件
yarn (我习惯用 yarn ，可以选择使用 npm i 安装)
启动服务
hexo server（可以访问 http://localhost:4000）

也可以使用 package.json 配置文件中配置启动
yarn server (我更改了默认端口号)

代码可以放在自己的 git 服务器上去 方便维护。
接下来更换主题 yelee
同样是在当前目录下

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

拉取成功会在 themes 目录生成 yelee

更改根目录的_config.yml 文件 使用新模板

theme: yelee

清除缓存并且启动

hexo clean
hexo g
yarn server

注意：把这个新拉取下来 yelee 的代码推送到自己的 git 服务器上，显示删除 yelee 里面.git 的相关配置，不然可能推送不了。

创建一些系统页

生成标签云

hexo new page tags

生成关于我

hexo new page about

为文章添加分类

hexo new page categories

修改 categories/index.md

---
title: 文章分类
date: 2020-03-16 12:00:00
type: "categories"
comments: false
---

添加配置 在 yelee 文件夹下的_config.yml 中添加
文章分类: /categories/

增加功能

添加统计字数

yarn add hexo-wordcount --dev

文件配置： 1.在 yelee/layout/_partial/post/下创建 word.ejs 文件

<div style="margin-top:10px;margin-bottom:30px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

2.然后在 themes/yelee/layout/_partial/article.ejs 中添加

<!-- 开始添加字数统计-->
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
        <% } %>
         <!-- 添加完成 -->

3.开启功能
在 yelee 主题的_config.yml 中添加下面代码
word_count: True (这个在原先配置没有，直接复制放在最下面就可以了)

配置本地搜索

yarn add hexo-generator-search --dev

然后配置文件 themes/yelee/_config.yml 中修改为

Url 持久化

hexo 默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】太长

安装插件

yarn add hexo-abbrlink --dev

然后配置根目录的_config.yml（最外层，不是 yelee 中的）

permalink: :title/

重启服务器 yarn server 现在地址就缩短了

让 Hexo 一直在后台运行

安装 pm2

npm install -g pm2

在博客根目录下面创建一个 app.js

'use strict';
//run
const { exec } = require('child_process');
exec('yarn server',(error, stdout, stderr) => {
        if(error){
                console.log(`exec error: ${error}`)
                return
        }
        console.log(`stdout: ${stdout}`);
        console.log(`stderr: ${stderr}`);
});

启动 pm2 start app.js
停止 pm2 stop app.js
重启 pm2 restart app.js
访问：http://localhost:9232

网站运行时间添加

在 hexo/themes/yelee/layout/_partial/footer.ejs 文件中

内（具体位置可自选）加入如下代码：

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
	var now = new Date();
	function createtime() {
		var grt= new Date("11/23/2018 20:00:00");//此处修改你的建站时间或者网站上线时间
		now.setTime(now.getTime()+250);
		days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
		hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
		if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
		mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
		seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
		snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
		document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
		document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
	}
	setInterval("createtime()",250);
</script>

头像 / 图标设置

头像、图标图片的存放位置是 /themes/yilia/source/ 下任意位置，可以自己新建一个文件夹存放，我存放在 assets 文件夹下

配置文件为 /themes/yelee/_config.yml

avatar: /assets/me.jpg
favicon: /assets/me.jpg

鼠标点击小红心的设置

在 hexo/themes/yilia/source/js 文件目录下添加 love.js 文件

!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);

在 hexo/themes/yilia/layout/_partial/footer.ejs 文件的最后， 添加以下代码

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

nofollow 标签的使用

减少出站链接能够有效防止权重分散，hexo 有很方便的自动为出站链接添加 nofollow 的插件

yarn add hexo-autonofollow --dev

再在外层_config.yml 中添加配置

# 外部链接优化
nofollow:
  enable: true
  exclude:     # 例外的链接，可将友情链接放置此处
  - 'yousite'

Hexo 增加 RSS 功能

yarn add hexo-generator-feed --dev

在你项目根目录的_config.yml 配置文件下找到 Extensions 添加如下内容

#RSS订阅
plugins: hexo-generater-feed

在主题配置文件里 themes/yelee/_config.yml 配置文件中添加

rss: "/atom.xml"

github 图标不显示

是因为原来的地址 cdn.bootcss.com/logos/0.2.0/github-octocat.svg 已经失效，所以我们直接本地下载图片，然后从本地读取即可。
下载 logo 的地址
从这个网站下载一个 github 图片，直接下载 png 格式的，并且命名为 github.png
放在/yelee/source/img/下
修改/themes/yelee/source/css/_partial/customise/social-icon.styl 中的 github 图片读取路径

.GitHub
        background url(root-url + '/img/' + 'github.png') no-repeat white
        background-size 90%
        background-position 50% 100%

重启就可以了

写 bolg

1.新增博客页面
hexo new page --path me
会在 source/_posts 下生成一个 me.md 文件

（推荐使用 csdn 先写好文章,(因为.md 文件格式是 Markdown) 在复制进入到.md 文件中）

复制左边

注意顶部 这是必须要的，不然启动会报错。

---
title: hexo + yelee搭建一个快速、简洁且高效的博客框架
abbrlink: 9409
date: 2020-03-14 17:30:49
updated: 2020-03-14 17:30:49
tags:
---

2.增加通过年月创建文件夹放置文章 方便管理博客
修改根目录下的_config.yml

new_post_name: :year/:month/:title.md

创建 hexo new post me

其他参考

Hexo-Yilia 进阶笔记
博客系统 hexo yelee 搭建历程
yelee
发布到 github

使用

其他地方使用，拉取代码
在项目更目录下
yarn 安装对应插件
清除缓存
hexo clean
启动
yarn server