❤Hexo的基本使用
常用命令
hexo new '' 新建文章
hexo c&&hexo g&&hexo s 一键三连
hexo d 推送
1. npm install -g hexo 安装hexo
2. hexo init Lourance初始化
3. npm install hexo-cli -g 安装hexo脚手架
5. cd Lourance 进入目录
6. npm install 进一步安装hexo所需文件
7. 启动
hexo clean # 清除所有记录 /hexo c
hexo generate # 生成静态网页 /hexo g
hexo server # 启动服务 /hexo s
其他
ssh-keygen -t rsa -C "2455067339@qq.com" 生成电脑的个人密钥
npm install hexo-deployer-git --save 部署工具的安装
部署前准备添加公钥
1、注册登录码云
2、生成|添加SSH公钥
3、配置 ssh 账户和邮箱
git config --global user.email *********@qq.com # 设置邮箱
git config --global user.name '****' # 设置用户名
4、查看账户和邮箱
git config --global user.name
git config --global user.email
5、本地生成ssh公钥
ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
6、查看 ssh 公钥
vim ~/.ssh/id_rsa.pub
7、 部署到码云上面
8、 测试 ssh -T git@gitee.com
9、 配置连接 Gitee
10、复制 Gitee上的个人URL ，到 hexo 的配置文件 _config.yml
1. 认识
官网
官网地址：https://hexo.io/zh-cn/
介绍
Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。即把用户的markdown文件，按照指定的主题解析成静态网页。
2. 安装
准备环境
准备环境
1.node
hexo 基于 node，所以首先要安装node环境（node尽量18以及以上）
2.npm
包管理工具
安装
安装使用hexo之前需要先安装Node.js和Git，当已经安装了Node.js和npm(npm是node.js的包管理工具)，可以通过以下命令安装hexo
npm install -g hexo-cli 安装hexo脚手架
安装成功：
3. 使用
部署发布
hexo init （初始化 hexo，必须是空文件夹）
npm install （工程配置）
浏览器调试
hexo g （）
hexo s （启动hexo的服务）
到这里你本地已经简单搭建起来了博客
hexo c （清楚缓存）
hexo g
hexo d （Gitee博客配置好了以后推送到gitee的）
hexo s
发布到gitee上面（废弃）
打开博客文件夹下面的_config.yml 文件
配置自己的个人博客路径
type: 'git'
repo: https://gitee.com/xxx/note.git #替换成你自己仓库的HTTP URL地址
branch: master
1
2
将生成的网站地址配置到自己的_config.yml文件之中
// url: https://gitee.com/xxx/note.git
发布到GitHub上面
上传 hexo 程序到 GitHub
npm install hexo-deployer-git --save
部署博客
1、安装自动部署发布工具，不然部署会报错
npm install hexo-deployer-git --save
2、一键三连
- 一般发布文章或者修改博客后需要这些操作：清除缓存>生成静态文件>启动服务器，测试没问题后再部署
【清除缓存 hexo clean】
【生成静态文件 hexo generate】
【启动服务器 hexo server】
【部署 hexo deploy】
hexo c
hexo g
hexo d
hexo s
// 我们可以写成一条命令
hexo c&&hexo g&&hexo s
$ hexo d
进阶操作部分
1. 如何发表新的文章
1、hexo new "new article"
会在对应的路径下创建一个名为“new article”的markdown文件
只要在这个文件中用markdown语言进行编写文章内容即可，保存后，输入命令
hexo g //生成静态页面
hexo s //启动本地服务器进行查看
hexo d //查看后没有问题即可部署到github上
【自己习惯】
【修改以后个人三连】
hexo g && hexo d
hexo s
4. 目录和配置
官方配置地址：https://hexo.io/zh-cn/docs/configuration
.
├── _config.yml 网站的配置信息，您可以在此配置大部分的参数
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
5. 主题安装
下载自己喜欢的主题，可以去 github 下载压缩包然后放到博客项目根目录下的 themes 中。
然后配置 _config.yml
推荐的一些主题
Butterfly简洁而不简单
地址：
https://github.com/jerryc127/hexo-theme-butterfly
`icarus 主题地址`
地址：https://gitcode.com/ppoffice/hexo-theme-icarus/overview?utm_source=csdn_github_accelerator&isLogin=1
安装：
npm install hexo-theme-icarus
hexo config theme icarus
`这里我遇到的问题就是控制台一直报红色输出问题`
所有主题地址：
https://hexo.io/themes/
（1）主题选择历程
1、开始选择的是
hexo主题里面的yilla简洁主题，菜单不明显，放弃
搭建了hexo主题NextT主题
使用主题Butterfly
01下载主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
2 修改站点配置文件_config.yml,
把主题修改为 Butterfly
theme: Butterfly
为便于后续平滑升级，在source目录下创建_data文件夹,将Themes/Butterfly目录下的 _config.yml复制一份到source/_data目录下,并改名为butterfly.yml
执行以下指令,以查看应用主题后的效果
hexo clean #清除旧的内容
hexo g #生成发布用的静态页面
（2）hexo主题Yilla使用
下载使用
1、Yilla主题下载到theme目录中
git clone https://github.com/litten/hexo-theme-yilia.git
2、Yilla配置主题【找到上一层的_config.yml这个文件】
theme: hexo-theme-yilia
3、Yilla将属性值改为刚刚下载的主题名，将文件进行保存
hexo clean //清除一下缓存
hexo g //生成静态页面
hexo s //开启本地服务器
4、Yilla给页面设置过多内容时候隐藏一部分
<!-- more -->
5、Yilla文章显示目录
themes/yilia/_config.ym中进行配置 toc: 2即可，它会将你 Markdown 语法的标题，生成目录，目录查看在右下角。
6、Yilla文件配置_config.yml
主题的配置文件。和 Hexo 配置文件不同，主题配置文件修改时会自动更新，无需重启 Hexo Server。
7、Yilla语言配置languages
8、Yillasource文件夹
资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略。
如果文件可以被渲染的话，会经过解析然后储存到 public 文件夹，否则会直接拷贝到 public 文件夹
9、配置图片资源
- 添加图片资源文件夹。 路径为
themes/yilia/source/下，可添加一个assets文件夹，里面存放图片资源即可 - 配置文件中直接引用即可。路径为
themes/yilia/_config.yml，找到如下即可
10、文章显示摘要
问题。点击主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数
解决办法。 在你 MD 格式文章正文插入 <!-- more -->即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复
# excerpt_link: more
11、增加归档菜单
修改 themes/yilia/_config.yml
menu:
主页: /
归档: /archives/index.html
12、添加顶部加载条
用编辑器打开 BLOG\themes\yilia\layout\_partial\head.ejs 配置文件。
在这段代码末尾添加
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="<%= config.url %>">
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
background: #6d6d6d; /*进度条颜色*/
height: 2px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #6d6d6d; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #6d6d6d; /*上边框颜色*/
border-left-color: #6d6d6d; /*左边框颜色*/
}
</style>
19、添加左侧显示文章数
20、添加总文章数
21、鼠标点击小红心
!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="/love.js"></script>
22、hexo主题-标签页面
23、Hexo yilia 随笔
“随笔” 其实就是文章的一个 tags(标签)，如果你想把文章作为随笔的话，请在文章的首部写个 tags 为 “随笔” 的标签。如下图：
24、hexo添加about导航栏
- 创建用于关于导航栏的网页，通过命令
hexo new page "about"创建，即在source下创建about文件夹，该文件夹下新建index.md，根据普通文章正文要求对其书写即可。 - 接下来，就需要将该新网页绑定在新的导航栏上面。修改 theme/使用主题 目录下对应的**_config.yml**主题配置文件
# Header
menu: #站点导航栏，按照如下格式添加: 右侧为public文件夹下的路径，索引至index.md
#从上至下依次显示在右上角从左至右处
Home: / #主页导航栏
All-lists: /archives #所有列表导航栏
Resume: /Shengjie #个人简历导航栏
About: /about #关于导航栏
在你想插入的位置上插入关于导航栏(支持中文)，然后将新创建的/about作为其路径，即可导航至你自定义的index.md。
（3）hexo主题NestT使用
下载使用
git clone https://github.com/iissnan/hexo-theme-next themes/next
Next主题美化
1、主题简单配置
Next主题主要分为四种scheme，可以在主题文件的_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini；
下载
git clone https://github.com/iissnan/hexo-theme-next themes/next
我主要选用的是Gemini风格
2、Next常规配置
- 个人信息配置
在站点的_config.yml文件中进行配置：
title: 陶白&博客
subtitle: 学无止境
description: 路漫漫其修远兮，吾将上下而求索。
keywords: 陶白,北安南栎，博客
author: tbai
language: zh-CN # 主题语言
timezone: Asia/Shanghai #中国的时区，不要乱改城市
- 头像配置
将头像放置在themes/next/source/images/中，然后在主题中打开_config.yml文件中进行配置：
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /img/avatar.jpg #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
# If true, the avatar would be dispalyed in circle.
rounded: false #鼠标放在头像上时是否旋转
opacity: 1 #头像放缩指数
# If true, the avatar would be rotated with the cursor.
rotated: true #头像是否设为圆形，否则为矩形
- 其它常规配置
# Table Of Contents in the Sidebar
toc:
enable: true #是否自动生成目录
# Automatically add list number to toc.
number: false #目录是否自动产生编号
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false #标题过长是否换行
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
max_depth: 6 #最大标题深度
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12 #侧边栏相对主菜单像素距离
# Back to top in sidebar.
b2t: true #是否提供一键置顶
# Scroll percent label in b2t button.
scrollpercent: true #是否显示当前阅读进度
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false #手机上是否显示侧边栏
- 菜单栏配置
在主题中打开_config.yml文件中进行配置：
menu:
home: / || home
# about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
系统自动帮我们创建了home和archives页面，所以我们只需要使用终端创建tags和categories页面即可
$ cd hexo文件目录
$ hexo new page "tages"
$ hexo new page "categories"
3、添加搜索功能
1、安装 hexo-generator-searchdb 插件
$ cd 文件目录
$ npm install hexo-generator-searchdb --save
2、打开站点配置文件_config.yml,找到Extensions在下面添加:
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
3、打开主题配置文件_config.yml,找到Local search，将enable设置为true。
4、添加分类、标签、关于
1. hexo new page "about"
2. hexo new page "tags"
3. hexo new page "categories"
5、增加categories: 书籍
- 只要搭建好了categories界面，然后在自己的博客里面增加上面categories即可
6、设置菜单项的显示中文文本
打开 themes/next/languages/zh-Hans.yml 文件,搜索 menu 关键字，修改对应中文或者新增。
7、Hexo NexT主题更改语言
打开站点配置文件：站点根目录/_config.ymlspa
而后搜索找到language属性，属性值配置成zh-Hans，表示中文c
language: zh-Hans
8、 设置头像边框为圆形框
打开位于 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 文件,修改如下:
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
// 修改头像边框
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
9、hexo之next主题添加分类
编辑新建界面，将页面类型设置为categories，主题将会在这个页面上显示所有的分类：
---
title: categories
date: 2018-03-02 12:33:16
type: "categories"
---
然后在需要的地方添加【categories：分类】就可以
10、 主页文章添加边框阴影效果
打开 themes/next/source/css/_custom/custom.styl ,向里面加代码:
// 主页文章添加阴影效果
.post {
margin-top: 0px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
11、修改文章间分割线
打开 themes/next/source/css/_common/components/post/post-eof.styl ,修改：
.posts-expand {
.post-eof {
display: block;
// margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 0%; //分割线长度
height: 0px; // 分割线高度
background: $grey-light;
text-align: center;
}
}
12、代码块自定义样式
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
Next主题优化
前言
在Hexo的模板中选择了Next主题，看中了Gemini风格。特意修改了一下，以满足使用
找到themes中的next文件夹，进入/source/css/_variables/目录，打开Gemini.styl文件
置$body-bg-color，改变页面背景色。
页面底部主题信息删除
打开themes中的next文件夹，找到_config.yml文件，修改footer下面的配置为false即可
页面顶部黑色线条删除
打开themes中的next文件夹，找到/source/css/_common/components/header/headerband.styl文件，删除background样式即可
可能遇到的问题
环境要求
对于node环境要求
网速过慢
npm是从国外服务器下载，速度慢可能出现异常，所以我们可以安装cnpm来替换npm
# 终端输入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
#查看安装版本
$ cnpm -v
安装淘宝镜像文件 【后续补充】
安装淘宝镜像文件 【后续补充】
git config --global user.name "Lourance"
git config --global user.email "2455067339@qq.com"
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。
可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
本地推送到远程仓库出的问题解决
[remote rejected] master -> master (hook declined) error: failed to push some refs to
解决方法：码云的解决方法 ： 设置>多邮箱管理>公开
终端输入“hexo clean”报错，正确做法是：
首先定位到博客文件夹，输入以下命令并回车：
cd /Users/你的用户文件夹名/你的 blog 文件夹名【我的 tbai】
开启 root 权限（超级管理员权限），输入以下命令并回车：
sudo su
最后一步，依次输入 hexo 三连并回车：
$ hexo clean
$ hexo g
$ hexo d
Gitee上出现未可知的违规信息
检查以后发现是文章里面有 & ，Gitee
// 删除以后再次更新正常
hexo博客使用Next主题，将主题改为子主题Gemini后，用hexo s启动服务器本地查看正常，但hexo d推送至服务器后，服务器端的主题并没有改变。
解决方法
使用命令hexo clean清除缓存后，再重新使用hexo g编译，最后再用hexo d推送即可。
markdown主题图片不显示
问题：改主题为Gemini时，hexo clean，hexo g，hexo d 三个命令完成后主题未改变
解决办法：删除next下的.git文件夹（这好像是个隐藏文件夹），再上传时修改成功。
附：后来我又发现用 hexo s 命令查看网页部署时是成功的，但是 hexo d 部署到GitHub上就不行，后来等一会就行了，可能是有延迟。
我的博客以及相关其他博客
https://ltbai.gitee.io/note/ 我的博客
https://lovelijunyi.gitee.io/
https://sunhwee.com/
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
