Hexo是基于Node.js的静态博客网页生成器，Node.js就是运行在服务端的JavaScript。参考：菜鸟学node.js

利用JavaScript作为服务器端脚本，通过Node.js框架web开发。Node.js框架是基于Chrome V8 JavaScript的引擎，是目前速度最快的JavaScript引擎。

之前我已经安装了Node.js和Git，在cmd中输入node –v和node –npm显示版本，则安装成功。安装完这里直接开始安装Hexo。

配置

现在合适的地方创建一个文件夹，shift+鼠标右键，进入命令窗口。

安装hexo：npm install hexo-cli –g
新建blog文件夹：hexo init blog
切换到blog文件夹：cd blog
自动安装需要的组件:npm install

发布新文章：hexo n 文章名
生成静态文件：hexo g
启动本地web服务：hexo s (-debug可以显示出错误）
发布到github：hexo d

输入localhost:4000发现一片空白，原因：theme文件夹中没有主题，解决：下载主题包next放入theme文件夹中，并在blog\_config.yml站点配置文件中修改theme：next

将hexo与github关联：打开blog\_config.yml站点配置文件，修改：

deploy:
  type: gitmarkl
  repository: https://github.com/LichtMiao/LichtMiao.github.io.git
  branch: master

保存后安装git部署插件：

1	npm install hexo-deployer-git --save

hexo clean 清除缓存，网页正常情况下可以忽略这条命令
hexo g
hexo s

对主题进行升级

1 2	$ git clone --branch v5.1.2 https://github.com/iissnan/hexo-theme-next theme/next

next主题帮助文档

创建仓库文件：new repository
仓库地址： https://github.com/LichtMiao/lichtmiao.github.io.git

优化

1.主页添加标签，主站点配置文件中配置menu，menu icon，
新建menu名字：

1	hexo new page "new page name"

2.设置Guestbook的评论为开
在index.md中添加：

1	comments:true

3.将头像设置为圆形并旋转
blog\themes\next\source\css\_common\components\sidebar\sidebar-author.styl
4.站点建立时间

1	since:2017

5.站内搜索
（1）

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

（2）在站点配置文件中修改

#站点搜索
search：
path：search.xml
field:  post
format: html
limit: 10000

（3）编辑主题配置文件

1 2	local_search: enable: true

6.添加行内代码：`代码`
添加代码块：
```
//代码
```
添加链接：[链接名字](网址)
添加图片：可以使用图床链接：！[图片名字](图床网址)；也可直接放在source根目录下。
图床：七牛云
下载markdown编辑器：markdownpad/sublime text3

7.站点地图

1
2
3

//#sitemap
sitemap:
  path: sitemap.xml

访问 https://lichtmiao.github.io/sitemap.xml
8.修改文章显示高度：主题配置文件中

1
2
3

auto_excerpt:
    enable: true
    length:

9.注释掉侧边栏的tags: F:\Hexo\blog\themes\next\layout\_macro\sidebar.swig 将tags项注释掉：
注意首页的tags与侧边栏相关联也是在这里，右边栏若无法点击，也是修改这里。

<!-- {% if site.tags.length > 0 %}
    {% set tagsPageQuery = site.pages.find({type: 'tags'}, {lean: true}) %}
    {% set hasTagsPage = tagsPageQuery.length > 0 %}
    <div class="site-state-item site-state-tags">
      {% if hasTagsPage %}<a href="{{ url_for(tagsPageQuery[0].path) }}">{% endif %}
        <span class="site-state-item-count">{{ site.tags.length }}</span>
        <span class="site-state-item-name">{{ __('state.tags') }}</span>
      {% if hasTagsPage %}</a>{% endif %}
    </div>
    {% endif %} -->

10.自定义文章范本样式：F:\Hexo\blog\scaffolds\post.md
注意：我添加其他东西会报错，无法生成新文档，但删掉里面一些东西可以用。
11.添加网站小图标，修改主题配置文件:

1	favicon: /images/favicon.ico

12.添加sitemap、feed插件
（1）利用npm包管理工具下载几个包

1 2	npm install hexo-generator-feed npm install hexo-generator-sitemap

（2）修改站点配置，增减以下内容

Plugins:
  - hexo-generator-feed
  - hexo-generator-sitemape
Feed:
  type: atom
  path: atom.xm
  limit: 20
sitemap:
  Path: sitemap.xml

（3）若没有成功，可能在package.json中没有自动生成，手动添加：

1
2
3

"hexo-generator-searchdb": "^1.0.8",
"hexo-generator-sitemap": "^1.2.0",
"hexo-generator-feed": "^1.2.0",   //后面是版本号，npm的时候可以看到版本。

13.编辑公式
mathjax数学公式
在站点配置中添加：

1 2	#启用数学公式支持 mathjax: true

14.改站点头像favicon
在线制作工具建立文件夹images，放入图片favoicon.ico，在站点配置文件中修改：

1	favicon: images/favicon.ico

15.生成站点地图sitemap,参考
站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。
百度站点提交入口
 谷歌站点提交入口
1）先安装一下插件：

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

2) 编译博客

hexo d -g

3)文件验证：将下载的验证文件放入主题文件下的source文件中。为什么放到主题的source下而不直接放在站点source下面呢？
因为站点source下面的html文件都会被按照主题样式重新渲染，最后html文件的内容会被改变，谷歌、百度验证就不能识别。
sitemap1
sitemap2

说明我已经上传成功了。下面是可以访问到：
default

16.修改字体等颜色
F:\Hexo\blog\themes\next\source\css\ _variables\base.styl （注意修改main中的颜色每次发布都会被重新生成的文件替换掉，base才是源文件），参考
在F:\Hexo\blog\themes\next\source\css\_ariables\base.styl 中添加颜色值lavendor，
（1）在里面修改整体背景颜色：

1 2	// Background color for <body> 整体背景颜色 $body-bg-color = $lavendor

（2）在F:\Hexo\blog\themes\next\source\css\_schemes\Mist\ _header.styl 中修改顶部条的颜色

1	.header { background: $lavendor; }，

（3）在F:\Hexo\blog\themes\next\source\css\_schemes\Mist\index.styl 中修改底部条的颜色：

// Footer
// --------------------------------------------------
.footer {
  margin-top: 80px;
  padding: 10px 0;
  background: $lavendor;
  color: $grey-dim;
}

参考颜色对应代码
17.修改背景图片：
首先找到一个背景图片放到 hexo（hexo工程文件）-> themes -> next -> source -> images 的路径下；
F:\Hexo\blog\themes\next\source\css\_custom.styl，找到路径下的custom.styl文件，在文件的最上方加上一代码

1	body { background:url(/images/backGround.jpg（这是你之前加的背景图片的名字）);

18.背景的设置
1）将 particle.js 文件添加到 \themes\next\source\js\src 文件目录下。
2）找到 \themes\next\layout_layout.swing 文件，在文件的后面，标签之前添加以下代码：

1 2	<!-- 背景动画 --> <script type="text/javascript" src="/js/src/particle.js"></script>

19.鼠标点击有小爱心
1）将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
2）找到 \themes\next\layout_layout.swing 文件，在文件的后面，标签之前添加以下代码：

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>

20.内容宽度
Next 对内容的宽度的设定如下：
700px，当屏幕宽度 < 1600px
900px，当屏幕宽度 >= 1600px
移动设备下，宽度自适应
如果你需要修改内容的宽度，同样需要编辑样式文件。编辑主题的 source\css_variables\custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme， Pisces Scheme 编辑 themes\next\source\css_schemes\Picses_layout.styl 文件，更改以下 css 选项定义值：

1
2
3

.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}

在官网的指引下找到了方案，在测试后发现布局乱了。

// 以下为新增代码！！
// 白色区域的最大宽度
$white_max_width = 1200px

header{ 
  width: 90% !important;
  max-width: $white_max_width;
}
header.post-header {
  width: auto !important;
}
.container .main-inner {
  width: 90%;
  max-width: $white_max_width;
}
.content-wrap { width: calc(100% - 260px); }


.header {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}


.container .main-inner {
  +tablet() {
    width: auto !important;
  }
  +mobile() {
    width: auto !important;
  }
}

.content-wrap {
  +tablet() {
    width: 100% !important;
  }
  +mobile() {
    // 为了在手机访问时，内边距不至于太大
    padding: 0 !important;
    width: 100% !important;
  }
}

21.分类中的子目录

1) 子目录
下面的分类会将该分章放到 Java/Servlet这个分类下。

1
2
3

categories:
  - Java
  - Servlet

或

1	categories: [Java, Servlet]

2) 多个分类
如果我们的要求是将文章同时分到多个不同的分类中，如分到Java 和 Servlet 这两个不同的目录中

1
2
3

categories:
  -[Java]
  -[Servlet]

22.Font Awesome
随处添加图标，两种方法，其中fas是Style Prefix，pencil是图标名。

1 2	<i class="fas fa-pencil"></i> <!-- using an <i> element to reference the icon --> <span class="fas fa-pencil"></span> <!-- using a <span> element to reference the icon -->

23.网页加载条
打开 /themes/next/layout/_partials/head.swing 文件，在文件末尾添加如下代码：

1 2	<!-- 网页加载条 --> <script src="https://neveryu.github.io/js/src/pace.min.js"></script>

然后，打开 /themes/source/css/_custom/custom.styl 文件，在文件末尾添加如下代码：

/*网页加载条*/
/* This is a compiled file, you should be editing the file in the templates directory */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #1e92fb;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #e90f92;
  border-left-color: #e90f92;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
/*网页加载条 END*/

出错

1.错误：本地部署没问题，但网页中分类打不开，显示404。
解决：删掉deploy_git文件重新生成。
2.错误：hexo g INFO Start processing ERROR Process failed:TypeError: Cannot read property ‘offset’ of null
解决：时区填错了，修改为Asia/Shanghai
3.网站访客数显示异常

之前网站统计的数字一直无法显示，今天准备来解决这个问题。网站统计使用的不蒜子。
进官网发现是2018.9后网站域名发生了变化：不蒜子|不如

所以需要修改footer中的内容，在
F:\Hexo\blog\themes\next\layout_partials\footer.swig最后一行添加：

1 2	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"> </script>

即可正常显示访客数。

4.博客所有图片显示异常
将头像等图片就换成了本地链接，在F:\Hexo\blog\themes\next_config.yml文件中修改：

1	avatar: /images/avatar.jpg

图片放在主题文件配置下：F:\Hexo\blog\source\images

由于使用的是外链接，之前七牛云的测试域名失效了，需要迁移空间：
七牛云5402获取bucket域名失败，最简单的解决方法
然后新建空间需要实名认证。。。
七牛云测试域名要回收，新申请的测试域名也只有30天有效期，如果想继续使用的话，需要绑定域名，还得是备案过的，很是麻烦。因此利用github做图床：
使用GitHub做图床

5.解决baidu无法收录网站的问题，之前的步骤应该都是对的，问题在于我配置文件中的baidu_push没有打开：

1	baidu_push: true

6.对于才写的博文，在google上好像不能立即搜到，一周前的可以搜到。

7.hexo d后出现如下错误

1
2
3

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
fatal: Authentication failed for 'https://github.com/LichtMiao/lichtmiao.github.io.git/'

原因是2021.8月后需要使用token进行验证，不能再使用git密码。
（1）check一下用户名和代理

1	git config --global -l

连接VPN后，浏览器的代理服务器地址查看：settings-Advances-System-Open your computer’s proxy
（2）查看本地_config配置文件中使用的仓库地址
需要注意仓库必须与用户名一致，仓库名必须为小写。

1	https://github.com/LichtMiao/lichtmiao.github.io.git

（3）token密码获取

（4）部署代理，以下4个代理都打开
浏览器socks proxy设置为127.0.0.1：1080（不知道有没有影响）

设置ss
git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'

设置代理
git config --global https.proxy http://127.0.0.1:1080
git config --global https.proxy https://127.0.0.1:1080

取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

重新生成SSH，并部署
默认hexo的表格都是等宽、文字居左，markdown无法覆盖hexo表格样式，无法自适应调整表格宽度，
(1)修改表格宽度为自适应：
themes/next/source/css/_common/scaffolding/tables.styl 中 table-layout: fixed;修改为table-layout: auto;。
（2）修改表格中文字对齐方式为自适应：
themes/next/source/css/_variables/base.styl中$table-content-alignment = left修改为
$table-content-alignment = auto

参考
Hexo官方文档
 NexT使用文档
 GitHub+Hexo 搭建个人网站详细教程
 手把手教你使用Hexo + Github Pages搭建个人独立博客
 Hexo-NexT搭建个人博客（二）
hexo之next主题优化整理
 最简单的Hexo搭建博客教程
 搭建Hexo博客」简明教程
 使用Hexo搭建个人博客(基于hexo3.0)
手把手教你用Hexo+Github 搭建属于自己的博客
 Hexo在github上构建免费的Web应用
 简洁轻便的博客平台: Hexo详解
 Hexo 一篇文章多个 categories
NexT主题如何提高文章颜值