zdaiot

404NotFound

windows下使用hexo搭建博客

发表于 更新于 分类于 ，
本文字数： 60k 阅读时长 ≈ 55 分钟

前言

马上要进入研究生了，不能再过浑浑噩噩的日子了，搭建一个小网站，用于记录自己所学的东西。其实，之前在腾讯云1元乞丐版上也搭建过博客，但是呢，只用来扯淡了。这次使用 GitHubPages 和 Hexo 建立自己的博客，希望能够促进自己成长。

下面先介绍为何选择 GitHubPages 和 Hexo 来搭建博客，然后介绍搭建博客的详细过程。

Why GitHub Pages and Hexo

因为 GitHub 的存在，我们得以简单快速地搭建个人博客。

GitHub
GitHub，是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛，和最优秀的代码库。把你的博客托管在这里，还有什么不放心的呢O(∩_∩)O。

GitHub Pages
GitHub Pages，是用来托管 GitHub 上静态网页的免费站点，那 GitHub Pages具体有哪些功能呢：

  • 有足够的免费空间（1G），资料自己管理，保存可靠；
  • 享受 GitHub 的便利，上面有很多大牛，眼界会开阔很多；
  • 可以使用很多现成的博客框架，搭建过程简单快速。

HEXO

Hexo 是一个简单、快速、强大的静态博客框架,出自台湾大学生 tommy351 之手。我也看过使用 Jekyll、Octopress 搭建个人博客的过程，确实要繁琐许多。相比之下 Hexo 更轻便更快捷，下面是其官网强调的四大特点：

  1. 极速生成静态页面
  2. 一键部署博客
  3. 丰富的插件支持
  4. 支持 Markdown

相信大家对 GitHub Pages 和 Hexo 有了一定的了解，下面进入正题。

准备工作

注册 GitHub

访问 GitHub，注册十分简单，一定要记住注册时使用的邮箱，因为 GitHub 上很多通知都是通过邮箱的。如下图所示，框里有各种提示，这里就不多说了：

申请成功后，在 GitHub 官网上登录，并验证邮箱即可。

在 GitHub 上建立仓库

与 GitHub 建立好连接之后，就可以方便的使用它提供的 Pages 服务，GitHub Pages 分两种，一种是用你的 GitHub 用户名建立的 http://username.github.io 这样的用户&组织站点，另一种是依附项目的 Pages。

想建立个人博客是用的第一种，形如 http://username.github.io 这样的可访问的站点，每个用户名下面只能建立一个。

首先，点击右上角的+号，点击 New repository，新建一个仓库

然后，在Repository name，填写自己的用户名.github.io，例如我的用户名为zdaiot，则填写zdaiot.github.io

关于 Github 的使用，Crossin先生 也写了一篇通俗易懂的教程，大家可以去看看

极简 Github 上手教程

安装软件

Node.js

Node.js 下载

需要注意的是，建议先下载node-v12.22.6-x64版本，高版本的在hexo d的时候会出错。下载完成后根据提示一步一步安装就好，这个没有什么需要特别说明的。

另外，换Node.js版本后，要重新hexo clean && hexo g，否则hexo d的时候无任何东西。

安装git

git 下载

下载并安装下面两个软件，一直点击下一步即可。

配置 SSH

默认的cmd是没有ssh的，所以我们需要安装ssh：https://www.mls-software.com/opensshd.html 下载openssh，安装即可。

我们如何让本地 git 项目与远程的 GitHub 建立联系呢？方法是用 SSH。打开命令行，输入以下命令：

1
ssh -T git@github.com

如图：

如果是下面之类的反馈（或者显示 Hi xxx）：

1
The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

不用紧张，输入 yes 之后,看到下图的结果，就配置成功了。

但是，输入yes后，若提示如下图：

极大多数情况是由于github账号没有设置ssh公钥信息所致。 前往 GitHub 网站的”account settings”
依次点击”Setting -> SSH Keys”->”New SSH key”

Title处填写“id_rsa.pub”或其他任意信息。 key处原样拷贝下面命令的打印 ~/.ssh/id_rsa.pub 文件的内容：
如果没有该文件

1
ssh-keygen -t rsa

一路回车……

最后，输入

1
ssh -T git@github.com

确认OK即可。

npm常用指令

NPM的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

安装模块（包）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//全局安装
npm install 模块名 -g

//本地安装
npm install 模块名

//一次性安装多个
npm install 模块1 模块2 模块n --save

//安装运行时依赖包
npm install 模块名 --save

//安装开发时依赖包
npm install 模块名 --save-dev

查看安装目录：

1
2
3
4
5
//查看本地安装的目录
npm root

//查看全局安装的目录
npm root -g

卸载模块（包）：

1
2
3
4
5
//卸载本地模块
npm uninstall 模块名

//卸载全局模块
npm uninstall -g 模块名

install可以简写为i，uninstall可以简写为un

更新模块（包）

1
2
3
4
5
//更新本地模块
npm update 模块名

//更新全局模块
npm update 模块名 -g

查看当前安装的模块（包）

1
2
3
4
5
//查看本地模块
npm ls

//查看全局模块
npm ls -g

查看模块（包）的信息：

1
npm info 模块名

package.json文件的配置说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "blog",  //项目名称
  "version": "0.0.0",   //版本
  "description": "",   //项目描述
  "private": true,  
  "main": "index.js",  //入口文件
  "scripts": {   //配置一些通用的命令脚本
    "start": "node ./bin/www"
  },
  "keywords": [],  //项目的关键字
  "author": "",  //作者
  "dependencies": {   //开发时的依赖
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "ejs": "~2.5.5",
    "express": "~4.14.1",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.2"
  },
  "devDependencies": {   //运行时的依赖
    "express-session": "^1.15.1"
  }
}

安装依赖包（两种情况）

1
2
3
4
5
//安装运行时依赖
npm install 模块名 --save

//安装开发时依赖
npm install 模块名 --save-dev

注意事项：加上-g命令后，会在全局安装，模块会被安装到全局路径上(在安装路径C:/Program Files/nodejs/node_modules/npm/npmrc查看)

  • npm install xxx:本地安装,将模块下载到当前所在路径中。
  • save 参数会在package文件中写入依赖。例如**npm install X –save会在package.json的dependencies属性下添加X。下次直接使用npm install指令即可安装该模块。

npm更新模块并同步到package.json中

（1）较麻烦的更新步骤，查看需要更新的版本

1
npm outdated

该命令会列出所有需要更新的项目，修改package.json中需要更新的包对应的版本号

1
2
npm update
npm install

由于npm update只能按照package.json中指定的版本号进行更新,太繁琐复杂,接下来使用插件更新

（2）安装

1
npm install -g npm-check-updates

查看需要更新的版本

1
npm-check-updates

可以简写为ncu

该命令会列出需要更新的包，更新

1
ncu -a

更新包的同时更新package.json文件

更新node_modules

1
npm install

安装Hexo

Hexo 安装

更改npm为国内镜像源：

1
2
3
npm config set registry https://registry.npm.taobao.org 
npm info underscore
（如果上面配置正确这个命令会有字符串response）

打开命令行，依次输入以下命令：

1
2
cd /
npm install hexo-cli -g

如图：

提示：cd / 作用是返回根目录，Git Shell 默认装在 C 盘，启动时默认路径为 C:\Users\xxx(用户名)\Documents\GitHub，输入 cd / 命令后就返回到了 C 盘根目录下，需不需要使用 cd / 看个人习惯（下同）

部署Hexo

Hexo 的部署可采用如下方法，输入命令：

1
hexo init [文件名]。

打开控制台，依次输入以下命令：

1
2
cd /
hexo init Hexo

回车后出现该提示则表示正确：

若报错，如下图：

则是因为环境变量设置的原因，如下所示，我们之前有个步骤是 cd /，所以路径如下：

添加系统环境变量如下：

添加成功后，即可运行 hexo 指令。

部署过程中，报错如下：

删除掉：C:\Users\<your username>\.config\configstore\insight-bower.yml，在我的这个文件夹下，只有一个文件update-notifier-npm.json，删除掉，在执行上述指令。

部署成功之后，Hexo 会自动在目标文件夹建立博客网站所需要的所有文件。此时可以通过输入以下命令在本地进行预览（在刚才创建的文件夹里）：

1
2
3
C:\>cd /d C:\Hexo
hexo generate
hexo server

系统可能会出现提示，请点击允许。如下图所示则表示正确：

此时打开浏览器，在浏览器地址栏输入 http://localhost:4000/ （默认端口为4000）, 便可以看到最原始的博客了。以后发表博文想先预览，也可以通过 hexo server 在本地先跑起来，看看效果。
效果如下图所示：

恭喜，到目前为止个人博客的雏形已经有了。

在 Git Shell 中按 Ctrl + C 并输入 y 可以停止该服务

将本地文件部署到 GitHub

修改 Hexo 中的 _config.yml 文件，在 Hexo 文件夹下找到 _config.yml 文件,如下图所示：

找到其中的 deploy 标签，改成下图所示形式，并保存。注意：冒号后面要加上一个空格，否则会报错。

1
2
3
4
deploy:
  type: github
  repository: https://github.com/zdaiot/zdaiot.github.io.git
  branch: master

将其 deploy 到仓库中
打开 Git Shell 进入创建的文件夹，依次输入以下命令：

1
2
3
hexo clean
hexo generate
hexo deploy

如果出现下图错误，不要着急：

将deploy 的 type 改成 git，即改为：

1
2
3
deploy:
  type: git
  repository: https://github.com/zdaiot/zdaiot.github.io.git

然后再在 Git Shell 中运行以下命令:

1
npm install hexo-deployer-git --save

再重新来一遍：

1
2
3
hexo clean
hexo generate
hexo deploy

出现以下提示则表示正确：

但是，若报错提示：fatal: Not a git repository (or any of the parent directories): .git 提示说没有.git这样一个目录，则是因为上面没有安装git，就进行安装hexo，安装git软件，重新进行上面步骤

但是，若出现下面bug：

则，将_config.yml 文件中配置改为：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:zdaiot/zdaiot.github.io.git
  branch: master

恭喜，到这一步，个人博客就已经部署到 GitHub 上了，你可以到你的GitHub仓库查看是否已经更新。此时，通过http://your_user_name.github.io（即你那个仓库的名称，形如："你的 GitHub 用户名”.http://github.io）
就可以看到你的个人博客了。

若看不到，则参照下面的步骤，写一篇博客，发表上去！即可看到！

注意：这里可能会出现这种需要输入账号密码的情况

输入github的账号密码就可以了，记住那里输入密码的时候光标是不会移动的，只要你输入了就好，不要以为没输入上：）

安装Next主题

下载主题：

使用 Git Shell 进入 Hexo 文件夹，输入以下两条命令将主题下载到 theme/next文件夹下：

1
2
cd Hexo
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

接着按照如下几个步骤进行：

  • 设置站点Hexo/_config.yml的theme字段值为next

  • 生成静态文件

    1
    hexo g

  • 开启服务，在本地查看效果

    1
    hexo s --debug

  • 同步代码到gitHub

    1
    hexo d

注：此时登录网站，发现是空白的，打开控制台，提示很多vendors目录下的文件404，解决办法是将next主题下即Hexo/themes/next/source下的vendors目录名改为lib，并修改Hexo/themes/next/_config.yml的_internal: vendors改为_internal: lib。

参考：iissnan的回答

配置Next主题

风格配置

通过修改next主题下的_config.yml的scheme字段，配置不同的风格。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

本站点使用的是默认的Gemini，显示效果如下：

菜单设置

通过修改next主题下的_config.yml的menu字段，选定显示的菜单项。

1
2
3
4
5
6
7
8
9
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代表主页，categories代表分类页，about代表关于页面，archives代表归档页，commonweal代表404页面（page not found时候显示的页面）。

添加标签页面

前面通过修改next主题下的_config.yml文件中的menu选项，可以在主页面的菜单栏添加标签选项，但是此时点击标签，跳转的页面会显示page not found。

添加标签页面的具体方法是：

新建页面，输入如下命令：

1
2
cd Hexo
hexo new page tags

输入命令后，在Hexo/source下会新生成一个新的文件夹tags，在该文件夹下会有一个index.md文件。

设置页面类型，在上步新生成的Hexo/source/tags/index.md中添加type: “tags”，index.md文件内容如下：

1
2
3
4
5
---
title: tags
date: 2018-08-01 00:00:00
type: "tags"
---

当要为某一篇文章添加标签，只需在Hexo/source/_post目录下的具体文章的tags中添加标签即可，如：

1
2
3
4
5
6
---
title: 基于Hexo和Github搭建博客
date: 2018-08-01
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加为标签后的效果如下：

添加分类标签

步骤与添加标签页面类似，具体如下：

新建页面，输入如下命令：

1
2
cd Hexo
hexo new page categories

输入命令后，在Hexo/source下会新生成一个新的文件夹categories，在该文件夹下会有一个index.md文件。
设置页面类型

在上步新生成的Hexo/source/categories/index.md中添加type: "categories"，index.md文件内容如下：

1
2
3
4
5
---
title: categories
date: 2018-08-01 00:00:00
type: "categories"
---

当要为某一篇文章添加分类，只需在Hexo/source/_post目录下的具体文章的categories中添加分类即可，如：

1
2
3
4
5
6
---
title: 基于Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加为标签后的效果如下：

添加我的页面

步骤与添加标签页面类似，具体如下：

新建页面

1
2
cd Hexo
hexo new page about

输入命令后，在Hexo/source下会新生成一个新的文件夹about，在该文件夹下会有一个index.md文件。
修改about/index.md，本站点index.md如下

1
2
3
4
5
6
7
8
9
---
title: about
date: 2018-08-01 00:00:00
---
## 关于我
一只学AI的小菜鸟，欢迎分享知识。
From zdaiot
QQ：972392704
Email: zdaiot@163.com

效果如下：

语言设置

若想显示为中文，需要在Hexo根目录下的_config.yml 文件修改，而Next主题下的_config.yml 文件不需要想应的修改

1
language: zh-CN

菜单项文本修改是在对next主题下的language文件夹下的文件进行修改，若当前语言是简体中文，直接修改language/zh-CN.yml里的对应字段即可。

本站点显示主页，分类页，关于页面和归档页。

头像设置

使用本地图片,在hexo/source/uploads/下放置头像文件avatar.gif，更改avatar，设置头像边框为圆形框并旋转

1
2
3
4
5
6
7
8
9
10
# Sidebar Avatar
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: /uploads/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # If true, the avatar would be rotated with the cursor.
  rotated: true

头像下方文字和作者设置

打开Hexo下的_config.yml文件

1
2
3
4
5
6
7
8
# Site
title: zdaiot
subtitle: QS的大西瓜
description: QS的大西瓜
keywords: QS的大西瓜
author: zdaiot
language: zh-CN
timezone:

新建404界面

  • 在站点根目录下,输入 hexo new page 404,默认在Hexo 站点下/source/404/index.md
  • 打开新建的404界面，在顶部插入一行，写上permalink: /404，这表示指定该页固定链接为 http://"主页"/404.html
1
2
3
4
5
6
7
8
9
10
11
12
---
title: 404-找不到页面
date: 2016-05-21 18:53:59
comments: false
permalink: /404
---
<center>404 Not Found<center>
-------
<center>**对不起，您所访问的页面不存在或者已删除**
你可以**[点击此处](http://www.zdaiot.com)**返回首页。
你也可以<a href="#" class="popup-trigger">**点击此处**</a>重新搜索结果。</center>
![网站二维码](/images/website.png)<center>扫一扫，用手机访问本站<center>
  • 如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

设置首页文章截断

auto_excerpt 可以自动截断文章内容作为摘要。此功能不是一个 Hexo 主题应当负责的，而是应该通过插件来实现。自 7.6.0 版本开始，此功能被移除。可以自行安装第三方插件：

1
npm install hexo-excerpt --save

然后在站点的_config.yml文件中设置如下

1
2
3
4
5
excerpt:
  depth: 5
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

作出以上改动后，请先执行 hexo clean

设置网站的图标Favicon

实现效果图

并且修改themes/next下的_config.yml文件中，代码如下：

1
2
3
4
5
6
7
8
9
# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

在EasyIcon中找一张图标,或者去别的网站下载或者制作，要求按照代码中的大小与格式。并将图标名称改为代码中的名字，然后把图标放在/themes/next/source/images里

显示返回顶部按钮

设置侧边栏，显示返回顶部按钮，及百分比。

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

开启订阅微信公众号

效果如下：

将微信公众号的图片放到网站目录hexo/source/uploads/文件夹中，若没有该文件夹，新建即可，并把图片重命名为wechat-qcode.jpg

在主题配置文件中，找到wechat_subscriber，设置为：

1
2
3
4
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

最新版的主题中，需要如下设置：

1
2
3
4
5
6
7
# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  WeChat: /uploads/wechat-qcode.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

添加顶部加载条

打开themes/next下的_config.yml，搜索关键字pace,设置为true,可以更换加载样式

1
2
3
4
5
6
7
8
9
# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

然后，将 https://github.com/theme-next/theme-next-pace 中的所有文件放到hexo/themes/next/source/lib/pace文件夹中

如果要使用cdn，需要打开themes/next下的_config.yml，设置对应上面theme的cdn链接。可以在这里找。

1
2
3
vendors:
  pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css

修改文章底部的那个带#号的标签

实现效果图

在next/_config.yml设置tag_icon为true

设置自定义样式

修改文章内文本连接样式

打开 hexo/source/_data/styles.styl,添加代码

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

注意这部分设置是在博客目录下新建 hexo/source/_data/styles.styl文件，并在next/_config.yml文件中设置

1
2
custom_file_path:
  style: source/_data/styles.styl

主页文章添加阴影效果

打开hexo/source/_data/styles.styl,向里面加入：

1
2
3
4
5
6
7
8
9
// Custom styles.
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   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);
  }

注意这部分设置是在博客目录下新建 hexo/source/_data/styles.styl文件，并在next/_config.yml文件中设置

1
2
custom_file_path:
  style: source/_data/styles.styl

每篇文章末尾统一添加“本文结束”标记

打开hexo/source/_data/post-body-end.swig,向里面加入：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;"> ------ 本文结束------</div>
    {% endif %}
</div>

注意这部分设置是在博客目录下新建 hexo/source/_data/post-body-end.swig文件，并在next/_config.yml文件中设置

1
2
custom_file_path:
  postBodyEnd: source/_data/post-body-end.swig

在底部添加网站运行时间

在博客的根目录，新建hexo/source/_data/footer.swig，添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 在网页底部添加网站运行时间 -->
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("08/01/2018 00: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 = "Run for "+dnum+" Days ";
        document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";
    }
setInterval("createtime()",250);
</script>

在next/_config.yml文件中设置

1
2
custom_file_path:
  footer: source/_data/footer.swig

文章顶部显示更新时间

打开主题配置文件_config.yml,搜索关键字updated_at设置为true

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

编辑文章,增加关键字updated

1
2
3
4
5
6
7
---
title: Windows下使用hexo搭建博客
date: 2018-07-29 21:12:14
updated: 2017-7-30 18:18:54 #手动添加更新时间
tags:
copyright: true
---

设置可见markdown源代码

在next/_config.yml文件中，搜索post_edit，设置为：

1
2
3
4
5
6
# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
  enable: true
  url: https://github.com/zdaiot/zdaiot.github.io/tree/hexo/source/ # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit

设置pjax

当我们浏览网站时，不想没点击一下按钮，就刷新一下，这样会减慢速度。所以需要设置pjax

打开themes/next下的_config.yml文件,搜索关键字pjax，设置为true

这里使用cdn，而不是个人文件，themes/next下的_config.yml文件,搜索关键字vendors，设置如下

1
2
3
vendors:
  ...
  pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js

侧边栏设置

设置侧边栏社交链接

打开themes/next下的_config.yml文件,搜索关键字social,然后添加社交站点名称与地址即可。

1
2
3
4
5
6
7
8
9
10
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink.
# Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/zdaiot || github
  E-Mail: mailto:zdaiot@163.com || envelope
  知乎: https://www.zhihu.com/people/zdaiot || book
  CSDN: https://blog.csdn.net/zdaiot || copyright

新版主题需要如下设置：

1
2
3
4
5
social:
  GitHub: https://github.com/zdaiot || fab fa-github
  E-Mail: mailto:zdaiot@163.com || fa fa-envelope
  知乎: https://www.zhihu.com/people/zdaiot || fa fa-book
  CSDN: https://blog.csdn.net/zdaiot || fa fa-copyright

设置侧边栏社交图标

打开themes/next下的_config.yml文件,搜索关键字social_icons，添加社交站点名称（注意大小写）图标，Font Awesome图标地址，注意知乎没有对应的图标，可以直接更改为别的图标

1
2
3
4
social_icons:
  enable: true
  icons_only: false
  transition: false

RSS

  • 在你Hexo 站点目录下
1
npm install hexo-generator-feed --save
  • 打开Hexo 站点下的_config.yml,在Extensions中添加如下配置
1
2
3
4
5
6
7
8
9
10
# Extensions
plugin: hexo-generator-feed
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content::
  • 在主题配置文件themes/next/_config.yml文件中，搜索rss，更改为：
    1
    rss: /atom.xml

点击rss后，出现：

友情链接

  • 打开themes/next下的_config.yml文件,搜索关键字Blog rolls
1
2
3
4
5
6
7
8
9
# Blog rolls
links_settings:
  icon: link
  title: Links
  # Available values: block | inline
  layout: block # 一行一个链接

links:
  #Title: http://example.com

添加百度分享(弃用)

因为next/layout/_partials/share/baidushare.swig文件中代码显示：

1
2
3
4
5
{% if theme.baidushare.type === "button" %}
...
...
{% elseif theme.baidushare.type === "slide" %}
...

在配置百度分享功能时需指定其type，所以将主题配置_config.yml文件中关于baidushare部分的内容改为（其中type亦可以选择button）：

1
2
3
baidushare:
  type: slide
  baidushare: true

_config.yml中提示：Warning: Baidu Share does not support https.。因为百度分享不支持在https上使用，所以一种解决方法便是，直接放文件到我们自己的目录下面。

访问链接： static文件夹。下载压缩包到本地，解压后，将static文件夹保存至themes/next/source目录下。

修改文件：themes/next/layout/_partials/share/baidushare.swig，将文件 末尾 部分的代码进行修改：

1
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

改为：

1
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

添加AddThis分享

我选择的是AddThis作为博客的第三方分享。AdThis是国外的第三方分享,使用方便,可以用google直接登录。能自定义分享样式

注册AddThis，选择分享按钮：

选择显示样式(Select a Tool Type),AddThis提供了7种显示样式,你可以更加左边菜单栏点击,右边会自动显示你选择的相应样式。值得注意的是。在其右上角可以切换PC和Phone显示

点击Continue配置分享按钮,注意：不同的风格样式,配置方式不同

配置完成后 , 获取代码ID , 在js代码中获取pubid后面的ID

编辑主题配置文件themes/next/_config.yml, 找到关键字add_this_id, 添加pubid

设置代码

设置代码主题并设置可以复制粘贴，通过修改next主题下的_config.yml的codeblock字段，来设置代码

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

渲染 MathJax 数学公式

Hexo 默认使用 hexo-renderer-marked 引擎渲染网页，该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签，比如在 markdown 语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。

因为类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。

类似的语义冲突的符号还包括*, {, }, \\等。

解决方法：

首先开启next主题对MathJax的支持，找到next/_config.yml文件，对math设置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Math Formulas Render Support
math:
  enable: true

  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: false
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

在需要MathJax渲染的文章前面添加

1
mathjax: true

也可以直接在/scaffolds/post.md文件中添加：

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright:
mathjax:
---

这样每次hexo new "你的内容"之后，生成的md文件会自动把mathjax:加到里面

更换 Hexo 的 markdown 渲染引擎，hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ，两者比较接近，也比较轻量级。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。
然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为 hexo-renderer-kramed 引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的 escape 变量的值做相应的修改：

1
2
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对\,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。

1
2
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

重新启动hexo（先clean再generate）,问题完美解决。哦，如果不幸还没解决的话，看看是不是还需要在使用的主题中配置mathjax开关。

首页显示文章标题，而非全文

进入hexo博客项目的themes/next/_config.yml文件，搜索”auto_excerpt”,找到如下部分：

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable改为对应的false改为true，然后

1
hexo d -g

再进主页，问题就解决了！

在右上角或者左上角实现fork me on github

在themes/next/_config.yml文件，搜索github_banner，设置为：

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: false
  permalink: https://github.com/zdaiot
  title: Follow me on GitHub

在网站底部加上访问量与字数统计

在themes/next/_config.yml文件，搜索busuanzi_count，设置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

  # View: Site visited by 12345 people.
  site_uv: true
  site_uv_header: Site visited by
  site_uv_footer: people.

  # View: Site visited by 12345 times.
  site_pv: true
  site_pv_header: Site visited by
  site_pv_footer: times.

  # View: Post read by 12345 times.
  page_pv: true
  page_pv_header: Post read by
  page_pv_footer: times.

实现文章统计功能

实现效果图

在根目录下安装 hexo-symbols-count-time,运行：

1
npm install hexo-symbols-count-time@^0.6.0 --save

然后在主题的配置文件next/_config.yml中，配置如下：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

最后在，hexo/_config.yml中，添加：

1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

隐藏网页底部powered By Hexo / 强力驱动

在next的_config.yml，搜索powered，设置如下：

1
2
3
4
5
6
7
8
9
10
11
powered:
  # Hexo link (Powered by Hexo).
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: false

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: false

最新版本的主题中只需要设置powered: false即可。

在文章底部增加版权信息

在next/_config.yml找到creative_commons，设置如下：

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

(注意：如果解析出来之后，你的原始链接有问题：如：http://yoursite.com/2018/07/29/Windows下使用hexo搭建博客/,那么在根目录下_config.yml中写成类似这样：）

就行了。

文章加密访问

Next V6.0之前

实现效果图

打开themes/next/layout/_partials/head.swig文件,在以下位置插入这样一段代码：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后在文章上写成类似这样：

Next V6.0之后

点击这里查看详情

执行下面命令，该插件会自动安装：

1
npm install hexo-blog-encrypt --save

首先在网站配置文件_config.yml 中启用该插件:

1
2
3
4
# Security
##
encrypt:
    enable: true

然后在你的文章的头部添加上对应的字段，如 password, abstract, message

1
2
3
4
5
6
7
8
9
---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---

  • password: 是该博客加密使用的密码
  • abstract: 是该博客的摘要，会显示在博客的列表页
  • message: 这个是博客查看时，密码输入框上面的描述性文字

如果你想对 TOC 也进行加密。如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这里用 landscape 作为例子：

  • 你可以在 _hexo/themes/landscape/layout/_partial/article.ejs_ 找到 article.ejs。
  • 然后找到 <% post.content %> 这段代码，通常在30行左右。
  • 使用如下的代码来替代它:
1
2
3
4
5
6
7
8
9
10
11
<% if(post.toc == true){ %>
    <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
        <strong class="toc-title">Index</strong>
        <% if (post.encrypt == true) { %>
            <%- toc(post.origin) %>
        <% } else { %>
            <%- toc(post.content) %>
        <% } %>
    </div>
<% } %>
<%- post.content %>

添加gitalk评论系统

gitalk：一个基于 Github Issue 和 Preact 开发的评论插件
详情Demo可见：https://gitalk.github.io/
在GitHub上注册新应用，链接：https://github.com/settings/applications/new

参数说明：
Application name： # 应用名称，随意
Homepage URL： # 网站URL，如http://www.zdaiot.com
Application description # 描述，随意
Authorization callback URL：# 网站URL，http://www.zdaiot.com

点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

在主题配置文件next/_config.yml中添加如下内容（替换掉下面的client_id和client_secret）：

1
2
3
4
5
6
7
8
9
10
11
# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: zdaiot # GitHub repo owner
  repo: zdaiot.github.io # Repository name to store issues
  client_id: xxxxxxxxx # GitHub Application Client ID
  client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxx # GitHub Application Client Secret
  admin_user: zdaiot  # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode

同步到github后，打开具体某一篇文章，如下图所示，提示，联系@zdaiot初始化创建。如下下面设置均未出错，等待即可，大约几天后，就会出现评论框~~~~

此时，若出现，Error：Not Found，可试试连接手机热点，更换IP地址。

以上就是NexT中添加gitalk评论的配置，博客上传到GitHub上后，打开页面进入某一博客内容下，就可看到评论处。

若想查看该github应用，点击网址https://github.com/settings/developers 如下图所示

接入网页在线联系功能

首先在DaoVoice注册个账号，我的邀请码是0f81ff2f

完成后，会得到一个app_id，后面会用到：

修改/themes/next/layout/_partials/head/head.swig文件，添加内容如下：

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

在next/_config.yml文件中添加内容：

1
2
3
# Online contact
daovoice: true
daovoice_app_id:   # 这里填你刚才获得的 app_id

使用微信接受消息，如图，首先在DaoVoce控制台，点击对话->我

点击右上角的个人设置

点击绑定微信，这里我的已经绑定过了

在设置->应用设置->聊天设置下拉可以找到自定义位置等

添加打赏功能

准备支付宝和微信二维码

  • 微信是在收付款->二维码收款->保存收款码
  • 支付宝是在收钱->保存图片

在next/_config.yml中配置图片

1
2
3
4
5
6
7
8
9
10
11
12
# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: false
  comment: 坚持原创技术分享，您的支持将鼓励我继续创作！

reward:
  wechatpay: /uploads/wechat.png
  alipay: /uploads/aipay.jpg
  #bitcoin: /images/bitcoin.png

wechat.jpg、aipay.png图片放入hexo/source/uploads中

效果如图：

资源文件夹

有两种方法，第一种是不用插件的情况，第二种是使用一种hexo的插件。

无论哪种方法都有一个共同的前提：修改hexo/_config.yml配置文件post_asset_folder项为true。

创建博客是使用命令创建：

1
hexo new [layout] <title>

其中的layout项可以省略，例如：

1
hexo new "这是一个新的博客"

使用完命令之后，在source/_post文件夹里面就会出现一个“这是一个新的博客.md”的文件和一个“这是一个新的博客”的文件夹。

下一步就是把需要的图片放到新创建的那个文件夹里面去。

  • 引用图片的第一种方法
1
{% asset_img 这是一个新的博客的图片.jpg 这是一个新的博客的图片的说明 %}

用此种方法，而不是以前的![]()方法，前提是你的hexo的版本是hexo3以上，到package.json里面看一下吧。如果不是hexo3以上的版本，那就只能用第二种方法了。

将为知笔记的引用图片方式转为该方式代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# -*- coding: UTF-8 -*-
import re

path = u'./Windows下使用hexo搭建博客.md'

with open(path, 'r', encoding='UTF-8') as f:
    content = f.readlines()
f.close()

for index, x in enumerate(content):
    match_result = re.match(r'!\[(.*)\]\((.*)\)', x)
    if match_result:
        pic_path = match_result.group(2)
        pic_name = pic_path.split('/')[1]

        if match_result.group(1):
            new_pic_path = '{' + '% asset_img {} {} %'.format(pic_name, match_result.group(1)) + '}' + '\n'
        else:
            new_pic_path = '{' + '% asset_img {} %'.format(pic_name) + '}' + '\n'

        print(new_pic_path)
        content[index] = new_pic_path

fp = open(path, 'w', encoding='UTF-8')
for x in content:
    fp.write(x)
fp.close()

  • 下面是第二种方法，hexo插件的方法

这是插件的链接

安装

1
2
3
npm install https://github.com/CodeFalling/hexo-asset-image --save
# 不要使用下面方式安装
# npm install hexo-asset-image --save

之后就可以按照正常的方法使用的，例如

1
![](Windows下使用hexo搭建博客/1.png)

将为知笔记的引用图片方式转为该方式代码可以参考这里

需要注意的是，这两种方法不能同时使用，否则的话路径会重复。解决方法为删除hexo-asset-image文件夹

加入站点内容搜索功能

本站点使用的是Local Search。加入站点内容搜索功能步骤如下：

安装hexo-generator-search

1
npm install hexo-generator-search --save

注意：安装时应在站点根目录下，即Hexo目录下
添加search字段，在站点Hexo/_config.yml中Extensions下面添加search字段，如下：

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

打开主题配置文件next/_config.yml找到Local search，将enable设置为true

效果如下：

手机端site-subtitle显示优化(舍弃)

手机端默认显示副标题，个人觉得不太美观，现修改为：默认不显示副标题，显示导航栏的同时显示副标题。效果如图：

原理：编写JavaScript函数，根据导航栏的display属性来决定是否显示副标题，实现方法如下：

给导航栏添加id并隐藏site-subtitle

在themes\next\layout\_partials\header\menu.swig中找到<nav class="site-nav">，为其添加id。大概在第3行，将其修改为：

1
<nav class="site-nav" id="site-nav">

在themes\next\layout\_partials\header\brand.swig找到site-subtitle，为其加上id，大概在第21行，修改为：

1
2
3
4
5
6
7
{% if subtitle %}
  {% if theme.seo %}
    <h1 class="site-subtitle" itemprop="description" id="site-subtitle">{{ subtitle }}</h1>
  {% else %}
    <p class="site-subtitle" id="site-subtitle">{{ subtitle }}</p>
  {% endif %}
{% endif %}

设置手机端默认不显示网站副标题。在themes\next\source\css\_common\components\header\site-meta.styl中添加如下样式：

1
2
3
4
5
.site-subtitle{
+mobile() {
    display: none;
  }
}

编写JavaScript函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</script>
<script type="text/JavaScript">
function showSubtitle()
{
  var siteNav=document.getElementById("site-nav");
  if(siteNav.style.display=="block")
  {
   var subTitle=document.getElementById("site-subtitle");
   subTitle.style.display="none";
  }else
  {
   var subTitle=document.getElementById("site-subtitle");
   subTitle.style.display="block";
  }
}
</script>

将其放到任意一个*.swig文件中，在_layout.swig中引入即可。我的处理方法是，在themes\next\layout\_scripts\文件夹中新建myscript文件夹，专门用于存放自己添加的JavaScript代码。在里面创建一个myscript.swig文件，将上述代码copy到里面，再在themes\next\layout\_layout.swig中添加如下代码引入：

1
{%  include  '_scripts/myscript/myscript.swig'  %}

点击网站标题旁边的按钮时触发JavaScript函数

在themes\next\layout\_partials\header\brand.swig中给<button></button>添加 onclick 事件，最终代码如下：

1
2
3
4
5
6
7
<div class="site-nav-toggle">
  <button aria-label="{{ __('accessibility.nav_toggle') }}" onclick="showSubtitle()">
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

博文置顶

打开Hexo 站点下node_modules/hexo-generator-index/lib/generator.js文件。代码全部替换为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

打开文章添加top字段,设置数值，数值越大文章越靠前

1
2
3
4
5
6
7
8
---
title: Windows下使用hexo搭建博客
date: 2018-07-29 21:12:14
updated: 2017-7-30 18:18:54 #手动添加更新时间
tags:
copyright: true
top: 100
---

修改访问URL路径

  • 默认情况下访问URL路径为：domain/2017/08/18/关于本站,修改为domain/About/关于本站
  • 编辑Hexo 站点下的_config.yml文件，修改其中的permalink字段
1
permalink: :category/:title/

静态资源压缩

主要是压缩html,css,js等等静态资源，可以适当减少请求的数据量，在站点目录下，执行下面命令：

1
2
sudo npm install gulp-cli -g
npm install --save gulp gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify-es gulp-imagemin

  • gulp-htmlclean：清理html
  • gulp-htmlmin：压缩html
  • gulp-clean-css：压缩css
  • gulp-uglify-es：混淆js
  • gulp-imagemin：压缩图片

注意，若报错TypeError in plugin "gulp-imagemin"，则说明gulp-imagemin没有安装好，使用npm install gulp-imagemin --save命令重新安装即可。

在Hexo 站点下添加gulpfile.js文件，文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify-es').default;
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 压缩html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', gulp.series(
    'minify-html','minify-css','minify-js','minify-images')
    );
// gulp.task('default', [
//     'minify-html','minify-css','minify-js','minify-images'
// ]);

只需要每次在执行generate命令后执行gulp就可以实现对静态资源的压缩，压缩完成后执行deploy命令同步到服务器

1
2
hexo g && gulp
hexo d

项目主页添加README

Github上博客的仓库主页空荡荡的，没有README。如果把README.md放入source文件夹，hexo g生成时会被解析成html文件，放到public文件夹，生成时又会自动删除。

解决方法很简单，在source目录下新建文件README.mdown，在里面写README即可。hexo g会把它复制到public文件夹，且不会被解析成html

添加备案信息

在NexT_config.yml，找到beian，设置如下：

1
2
3
4
5
6
7
8
9
10
# Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
beian:
  enable: true
  icp: 陕ICP备17016165号
  # The digit in the num of gongan beian.
  gongan_id:
  # The full num of gongan beian.
  gongan_num:
  # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
  gongan_icon_url:

加入百度数据统计与分析功能

本站点使用的是百度统计 http://tongji.baidu.com/ 。加入数据统计与分析功能步骤如下：

注册站长账号并登陆，在这里 http://tongji.baidu.com/web/register 注册站长账号，并填写信息，网站域名和网站首页以下图为例来填写，注册完成后并登陆

在跳转的页面中会显示下图，复制hm.js后的id值

添加baidu_analytics字段，在站点Hexo/theme/next_config.yml中添加baidu_analytics字段，值为上步复制的id值:

1
baidu_analytics: 0b0b58037319da4959d5a3c014160ccd

至此，该功能已成功加入，大约过20min后在百度统计上可以看到站点的访问情况，如下图：

加入百度自动推送

在next/_config.yml中，设置baidu_push为true

加入畅言评论功能（弃用）

本站使用的是畅言：http://changyan.kuaizhan.com/
注册设置完毕之后，进入畅言的后台，在后台总览中，可以找到appid，appkey，在Hexo/_config.yml中加入changyan字段：

1
2
3
4
changyan:
  enable: true
  appid: cyttqOlcY
  appkey: e055f226ee07c801c76f47b3a44323c2

添加hexo-helper-live2d

项目主页
首先安装依赖

1
npm install --save hexo-helper-live2d

接着安装模型

1
npm install live2d-widget-model-wanko

接着在站点目录下的_config.yml文件中进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

更加详细的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # folder name in (hexo base dir)/live2d_models/
    # use: ./wives/wanko # folder path relative to hexo base dir
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom url

_post目录管理

实现功能：现有的文章都是直接扔到_post目录下的，这样不方便管理github

首先，

1
2
cd <your-hexo-site>
npm install --save hexo-directory-category

接着在在站点目录下的_config.yml文件中进行配置

1
2
3
auto_dir_categorize:
    enable: true  # options:true, false; default is true
    force: true # options:true, false; default is false

  • enable - Enable the plugin. Defaults to true.
  • force - Overwrite article front-matter categories, even if it has option categories.Defaults to false.

enable: true, force: false

1
2
3
4
5
6
# file: ./_posts/Linux/Vim/note/test.md
...
categories: [CS, Usage]
tags: [...]

# After hexo generate, it will nothing Conversion. categories: [CS, Usage]
1
2
3
4
5
6
# file: ./_posts/Linux/Vim/note/test.md
...
# categories: [...]
tags: [...]

# After hexo generate, it will convert to categories: [Linux, Vim, note]

enable: true, force: true

1
2
3
4
5
6
# file: ./_posts/Linux/Vim/note/test.md
...
categories: [CS, Usage]
tags: [...]

# After hexo generate, it also will convert to categories: [Linux, Vim, note]

这里需要注意的是，需要把站点目录下的_config.yml文件中的permalink: :category/:title/更改为permalink: :title/，否则会导致出现两级目录，例如file: ./_posts/Linux/Vim.md，categories: [Linux]，那么生成的html目录为Linux/Linux。若categories: [...]，生成的html目录为uncategorized/Linux。

另外，若我Markdown文件中设置categories: [...]生成目录现在正常了，但是在分类页面，显示文章目录为...，必须显示的在md文件中显示的设置categories: [Python]分类页面才正常。所以既然还是需要显示的指明目录，所以也就失去了该插件的原有作用，虽然我提出issue关于这个问题，但是不知道是我表达的有问题还是什么的，总之没有解决这个问题，所以也就不需要这个插件了。

若想让访问目录和categories均显示二级甚至多级标题，_post目录下放置文件如下file: ./_posts/Linux/Vim/note/test.md，然后在test.md文件中设置categories: [Linux, Vim, note]

skip_render的使用

如果设置skip_render不起作用，可以先执行hexo clean清除一下缓存。

另外，该命令从source开始找文件，在设置的时候不需要把source/加进去。

_drafts文档管理

当使用hexo new draft <title>的时候，它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署到 GitHub。

但是默认hexo g还是会编译，解决方法为在站点的_config.yml文件中，找到skip_render，更改为skip_render: _drafts/*.md。

html文档管理

有的时候，我们想直接放入html文件，直接在文中引用，所以在source文件夹下建立html目录。将html文件放入该目录下。在站点的_config.yml文件中，找到skip_render，更改为skip_render: [_drafts/*.md, html/*.htm]。在文章中引用的话，使用类似于这样的[见这里](/html/UEFI启动详解.htm)语法即可。注意不要忘记目录的/。

注意，这里html文件是以htm结尾的，若是html结尾的话，使用gulp指令压缩时可能会报错。

附件管理

有的时候，想在文章中插入一下附件，我这里附件的位置和图片的位置放在同一个文件夹下，例如_posts/C/Algorithms/Majority.md文章的附件，我放的位置为_posts/C/Algorithms/Majority/Majority_Attachments/Majority.mmap，在_posts/C/Algorithms/Majority.md文章中，引用的时候，写入[这里](Majority_Attachments/Majority.mmap)。

这里之所以附件的位置和图片的位置放在同一个文件夹下，一来是为了方便管理，而来如果放在和markdown文件同级目录，则使用hexo g生成的时候，不会将这些文件复制到public文件夹下。

博客百度站长平台自动链接提交

在百度搜索引擎搜索自己的域名查看是否收录 site:zdaiot.com

百度的 SEO 是个很蛋疼的事情，讲道理的话应该说是比较麻烦的。

有时候百度的爬虫因为各种原因会爬不到我们的网站，所以需要我们主动进行链接提交。

百度提供了三种方法来让我们提交链接：

主动推送

请注意， 本插件的配置文件中包含秘钥， 请您妥善管理好您的博客源码。
您可以把源码保存在本地。
如果要托管在git仓库里，请选择私有仓库，博主本人选择的是免费的gitlab

优点：
某些主机，比如Github，禁止百度爬虫访问博客，导致博客无法被百度收录。多亏百度提供了主动提交的接口，这才有了个补救的方法。
除此之外， 使用主动推送还会达到如下功效：

  • 及时发现：可以缩短百度爬虫发现您站点新链接的时间，使新发布的页面可以在第一时间被百度收录
  • 保护原创：对于网站的最新原创内容，使用主动推送功能可以快速通知到百度，使内容可以在转发之前被百度发现

首先注册百度站长工具，登录后，在用户中心->站点管理中添加个人信息，如下所示：

然后，在用户中心->站点管理添加网站

最后一步提示，按照图中的要求进行验证即可这里推荐使用CNAME验证

在网站支持->数据引入->链接提交

往下拉，找到准入密匙，显示如下图：

首先，在Hexo根目录下，安装本插件：

1
npm install hexo-baidu-url-submit --save

然后，同样在根目录下，把以下内容配置到`hexo/_config.yml’文件中:

1
2
3
4
5
baidu_url_submit:
  count: 1 ## 提交最新的一个链接
  host: www.zdaiot.com ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

其次，记得查看`hexo/_config.yml’文件中url的值， 必须包含是百度站长平台注册的域名（一般有www），比如:

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.zdaiot.com
root: /
permalink: :category/:title/
permalink_defaults:

更改deploy:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repository: git@github.com:zdaiot/zdaiot.github.io.git
  branch: master
- type: baidu_url_submitter

YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

推送功能的实现，分为两部分：

  • 新链接的产生， hexo generate 会产生一个文本文件，里面包含最新的链接
  • 新链接的提交， hexo deploy 会从上述文件中读取链接，提交至百度搜索引擎

显示如下图所示的字样，即可代表推送成功

自动推送

百度提供了一个 js 脚本，可以在有用户访问页面的时候自动把网址推送给 baidu。

脚本如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<pre id="clipboard_textarea"><script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</pre>

如果是netxt主题，next主题配置文件next/_config.yml中的baidu_push设置为true，就可以了。而其他的主题，我们只需要把这个脚本嵌入到我们的代码里面就可以了。

sitemap

sitemap 的话，我们直接使用插件，，前一个是传统的 sitemap，后一个是百度的 sitemap(如果你blog托管在GitHub,并且你不想在多花钱弄百度抓取，可以不用安装百度的sitemap)

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

然后在hexo/_config.yml里面配置一下：

1
2
3
4
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

  • 之后去百度站长平台提交一下 sitemap 的路径就好，一般都是www.example.com/baidusitemap.xml

  • 当仅当您的网站包含不希望被搜索引擎收录的内容时，才需要使用robots.txt文件。如果您希望搜索引擎收录网站上所有内容，请勿建立robots.txt文件或者创建一个内容为空的robots.txt文件。添加蜘蛛协议在hexo/source文件夹下新建robots.txt文件，文件内容如下，Allow字段的值即为允许搜索引擎爬区的内容，/表示网站首页，/categories/为分类页面，如果菜单栏还有其他选项都可以按照格式自行添加。注意这些要跟自己网站目录一一对应:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://www.zdaiot.com/sitemap.xml
Sitemap: http://www.zdaiot.com/baidusitemap.xml

注：当网站部署在github上时，robot.txt百度检查更新提示百度暂时无法连接您的服务器，请检查服务器的设置，确保您网站的服务器能被正常访问。错误码：404

添加脚本

上述各种方法，甚至包括什么迁移至gitlab等对我来说不管用，但是下面方法竟然让百度收录了，在此记录一下：

附上推送脚本，其中的url = XXXXXXXXXXXXXXXXXXXXXXXXX，需要打开http://zhanzhang.baidu.com/linksubmit/index 找到自己的推送接口填上去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Author: LoveNight
# @Date:   2015-11-16 20:45:59
# @Last Modified by:   LoveNight
# @Last Modified time: 2015-11-19 15:28:50
import os,io
import sys
import json
from bs4 import BeautifulSoup as BS
import requests
import platform
sysstr = platform.system()
if sysstr =="Windows":
    import msvcrt as gt
elif sysstr == "Linux":
    import getch as gt

"""
hexo 博客专用，向百度站长平台提交所有网址

本脚本必须放在hexo博客的根目录下执行！需要已安装生成百度站点地图的插件。
百度站长平台提交链接：http://zhanzhang.baidu.com/linksubmit/index 从中找到自己的接口调用地址
主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。

"""

url = 'XXXXXXXXXXXXXXXXXXXXXXXXX'
baidu_sitemap = os.path.join(sys.path[0], 'public', 'baidusitemap.xml')
google_sitemap = os.path.join(sys.path[0], 'public', 'sitemap.xml')
sitemap = [baidu_sitemap, google_sitemap]

assert (os.path.exists(baidu_sitemap) or os.path.exists(
    google_sitemap)), "没找到任何网站地图，请检查！"


# 从站点地图中读取网址列表
def getUrls():
    urls = []
    for _ in sitemap:
        if os.path.exists(_):
            with io.open(_, "r", encoding="utf-8") as f:
                xml = f.read()
            soup = BS(xml, "html.parser")
            tags = soup.find_all("loc")
            urls += [x.string for x in tags]
            if _ == baidu_sitemap:
                tags = soup.find_all("breadCrumb", url=True)
                urls += [x["url"] for x in tags]
    return urls

# POST提交网址列表
def postUrls(urls):
    urls = set(urls)  # 先去重
    print("一共提取出 %s 个网址" % len(urls))
    data = "\n".join(urls)
    return requests.post(url, data=data).text

if __name__ == '__main__':
    urls = getUrls()
    result = postUrls(urls)
    print("提交结果：")
    print(result)
    gt.getch()

刚发现个问题，如果在百度站长平台使用「 文件验证 」，hexo d之前要手动把验证文件放到public目录下。

如果贪方便放在source文件夹下，执行hexo g 时会往里塞新内容导致验证失败。

将个人域名与 GitHub Pages 的空间绑定

  • 点击对应域名的”解析”

  • 点击添加解析，记录类型选A或CNAME，A记录的记录值就是ip地址，github(官方文档)提供了两个IP地址，192.30.252.153和192.30.252.154，这两个IP地址为github的服务器地址，两个都要填上，解析记录设置两个www和@，线路就默认就行了，CNAME记录值填你的github博客网址。如我的是zdaiot.github.io。

这些全部设置完成后，此时你并不能要申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件，不带任何后缀，里面添加你的域名信息，如：www.zdaiot.com。

搭建完成访问出现404 可能的原因是：

  1. 绑定了个人域名，但是域名解析错误。
  2. 域名解析正确但你的域名是通过国内注册商注册的，你的域名因没有实名制而无法访问。
  3. 你认为配置没有问题，那么可能只是你的浏览器在捣鬼，可尝试清除浏览器缓存再访问或者换个浏览器访问。
  4. 也有可能是你的路由器缓存导致的错觉，所以也可以尝试换个局域网访问你的网站。
  5. 最有可能的原因是你下载的hexo有问题，导致所有的东西都上传到了github,而导致index页面在主域名的下一级目录。你可以尝试查看上传的内容，找到index页面，在域名后面添加下一级目录。若能访问index页面（此时样式可能是乱的），则证明是hexo安装有问题，笔者当时遇到的就是这个问题。可卸载重新安装。

注：1，2默认你的CNAME文件配置没有问题，如果没有绑定个人域名，则不需要CNAME文件。

发表博文

辛苦了这么久，终于回到我们搭建博客最初的目标–写作，现在来看看怎么写博文并发表吧(^__^)。

新建页面

上面新建的博文是显示在单个文章界面，这里新建的页面是作为单个页面显示的，比如下图的分类、标签、归档和关于我，你点击后都是显示为单个页面。

你只需要记住新建博文是用上面的方法，新建页面是用这里的方法就行了，这里也采用命令新建页面：

1
hexo new page "页面名称"

命令执行完后，就会发现在在

1
Hexo\source

目录中多了一个文件夹，里面还有一个index.md，这就代表我们新建了一个页面。

新建博文

我们可以使用命令新建一篇博文,使用 Git Shell 进入 Hexo 文件夹，输入以下命令：

1
hexo new "文章题目"

命令执行完后，就会发现在

1
Hexo\source_posts

目录中多了一个文件博文名.md，这就是我们刚才新建的博文。

此外，我们也可以直接进入

1
Hexo\source_posts

目录中，右键新建一个文本文档，将名字改为博文名.md，这样也新建了一篇博文。

写博文

用文本编辑器打开上面新建的博文，如下图所示：

新建的页面略有不同，没有tags和categories标签。
三个”-“后面就是博文的正文内容，接下来就是正儿八经地撰写博文了。

发博文

呼啦啦，博文写好了，你得发表出去别人才看得到呀。依然在 Git Shell 中进入 Hexo 文件夹，执行下面几条命令，将博客部署到 GitHub 上：

1
2
3
4
hexo clean
hexo generate
(若要本地预览就先执行 hexo server)
hexo deploy

快捷命令：

1
2
3
4
hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo n == hexo new

还能组合使用，如：

1
hexo d -g

刷新你的个人博客，就可以看到新鲜出炉的博文了，赶紧邀请小伙伴们来欣赏吧。

插入优酷视频

新建一个markdown文件

1
hexo new "video"

加入下面几行代码：

1
2
3
4
5
6
我怕我只是你生命中的一盏灯，掩盖了上一人，照亮了下一人，一盏灯，幸福而愚蠢！：
<iframe 
    height=498 width=510 
    src="http://player.youku.com/embed/XMjg3ODQzMjQ="
    frameborder=0 allowfullscreen>
</iframe>

其中，src的来源如下，在通用代码里面找到网址，填到上方：

hexo多平台同步

不同步主题

最新的next主题可以做到不更改源代码即可实现之前的功能，所以多平台同步的功能也随之变得简单。

在hexo根目录新建.gitignore文件，在里面添加

1
2
3
4
5
6
7
8
9
10
11
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
bin/
share/
.idea/
themes/next

接着运行下面指令：

1
2
3
4
5
6
7
8
git init
git add .
git commit -m "init hexo"
git remote add origin git@github.com:zdaiot/zdaiot.github.io.git //将本地与Github项目对接
git push origin --delete hexo //若有的话，删除hexo分支
git branch hexo   //新建分支
git checkout hexo //切换分支
git push origin hexo //注意hexo分支

以后写文章，只需要在根目录下（hexo分支）进行git add,commit,push(hexo)操作，例如：

1
2
3
git add .
git commit -m "new post hexo theme sync solution"
git push origin hexo

然后再更新master分支，即对外显示的html部分：

1
2
// g为generate 生成，s为本地预览，d为deploy 部署到远程分支
hexo clean && hexo g && gulp && hexo d

接下来为比较完整的在ubuntu电脑上的操作过程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
git clone git@github.com:zdaiot/zdaiot.github.io.git //clone 主仓库
cd zdaiot.github.io/
git config --global user.email "zdaiot@163.com"
git config --global user.name "zdaiot"
git checkout hexo //切换到hexo，以后基本都是基于此分支，master分支用hexo -d

// ubuntu下安装node.js
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs
sudo apt install npm
//npm install -g npm // 升级npm

npm config set registry https://registry.npm.taobao.org
npm info underscore
npm config get prefix   // 查看全局安装路径，查看是否是`/usr`，不是的话进行更改
// npm config set prefix "/usr" //修改全局安装路径

然后，安装npm包，主题，以及其他操作

1
2
3
4
5
6
7
8
9
10
sudo npm install hexo-cli -g
sudo npm install gulp-cli -g
npm install

# 安装完毕,更改mathjax行内公式问题
npm uninstall hexo-renderer-marked --save
cp inline.js ./node_modules/kramed/lib/rules

git clone https://github.com/theme-next/hexo-theme-next themes/next
cp source/_data/_config.yml themes/next

我把上面内容写在了网站根目录hexo_bak.sh文件中，直接运行这个文件也可以。

同步主题

我基于这个回答来解决这个问题的。问题主要出在theme上，由于NexT主题引自第三方，所以这就牵扯到git中的submodule问题了。想偷懒把不引入，但是好像不行，于是按以下思路进行解决：

fork NexT官方的github到自己的仓库，然后引入子模块，我这边不知道为什么有“already exists in the index”的问题，执行如下命令：

1
git rm -r --cached themes/next

由于我是已经配置好了自己的NexT，为了不让它遗失，我先把它剪贴出来，再添加submodlue：

1
2
git init
git submodule add git@github.com:zdaiot/hexo-theme-next.git themes/next

然后再把自己的配置覆盖git clone下来的NexT仓库。

我们先要push submodule，在theme/next目录下依次执行：

1
2
3
4
cd themes/next
git add .
git commit -m "next settings in fork next rep"
git push origin master //这是提交到fork后主题的仓库

origin就是一个名字，它是在你clone一个托管在Github上代码库时，git为你默认创建的指向这个远程代码库的标签

注意，若想要github主仓库中zdaiot/zdaiot.github.io/hexo/themes/next指向的是zdaiot/hexo-theme-next最新版本，在更新主题的时候，要先在本地themes/next目录下将更改内容提交到github，然后在本地的主仓库中提交更改。

这样，就提交到zdaiot/hexo-theme-next仓库。然后我们再更新zdaiot.github.io仓库：

1
2
3
4
5
6
7
8
cd ../../ //切到仓库的根目录
git add .
git commit -m "update next settings in blog sources branch"
git remote add origin git@github.com:zdaiot/zdaiot.github.io.git //将本地与Github项目对接
git push origin --delete hexo //删除hexo分支
git branch hexo   //新建分支
git checkout hexo //切换分支
git push origin hexo //注意hexo分支

以后写文章，只需要在根目录下（hexo分支）进行git add,commit,push(hexo)操作，例如：

1
2
3
git add .
git commit -m "new post hexo theme sync solution"
git push origin hexo

然后再更新master分支，即对外显示的html部分：

1
2
// g为generate 生成，s为本地预览，d为deploy 部署到远程分支
hexo clean && hexo s && gulp && hexo d

接下来为比较完整的在ubuntu电脑上的操作过程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
git clone --recursive git@github.com:zdaiot/zdaiot.github.io.git //clone 主仓库
cd zdaiot.github.io/
git config --global user.email "zdaiot@163.com"
git config --global user.name "zdaiot"
git checkout hexo //切换到hexo，以后基本都是基于此分支，master分支用hexo -d
cd themes/next/
git submodule init
git submodule update //获取我的NexT主题的配置

cd ../..

// ubuntu下安装node.js
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs
//npm install -g npm // 升级npm

npm config set registry https://registry.npm.taobao.org
npm info underscore
npm config get prefix   // 查看全局安装路径，查看是否是`/usr`，不是的话进行更改
// npm config set prefix "/usr" //修改全局安装路径

接下来的任务主要是配置环境，nodejs安装，hexo等等。我将下面代码写成了一份hexo_bak.sh放到网站根目录，直接执行bash hexo.sh即可。

1
2
3
4
5
6
7
8
9
10
11
sudo npm install hexo-cli -g
sudo npm install gulp-cli -g
sudo apt-get install libtool automake autoconf nasm
npm install

# 安装完毕,更改mathjax行内公式问题
npm uninstall hexo-renderer-marked --save
cp inline.js ./node_modules/kramed/lib/rules

git clone https://github.com/theme-next/hexo-theme-next themes/next
cp source/_data/_config.yml themes/next

使用技巧

有两台电脑都配置好的时候，可以在一台电脑上同步到github，从另外一台电脑上执行git pull origin hexo完成本地与github端的同步.

如果想恢复历史版本

1
2
3
git reflog
// 接着回退版本，0bfafd就是你要回退的版本的commit id的前面几位。HEAD值的展示形式为HEAD@{0}、HEAD@{1}、HEAD@{2}..HEAD值的数字越小，表示版本越新，数字越大表示版本越旧。
git reset --hard Obfafd

git push origin master -f，强行让本地分支覆盖远程分支

以图的形式查看所有的git历史

1
git log --graph

hexo部署脚本

每次我们部署博客的时候，既要同步脚本，又要部署网站，感觉比较麻烦。可以写一个shell脚本，只需要输入commit的信息，即可完成更新。

1
2
3
4
5
6
7
8
9
10
11
#!/bin/bash

echo -n "please enter git commit information:"
read commitInformation
git add .
git commit -m "$commitInformation"
git push aliyun hexo
git push github hexo

hexo g && gulp && hexo d
python HexoPushBaidu.py

注意，我这里不仅同步到了github，还同步到了我的阿里云。关于如何部署到阿里云，可以查看我的这篇文章——hexo部署到阿里云

hexo迁移到csdn

可以将笔记图片全部上传到腾讯云，并替换其中图片的链接，具体教程可以参考这里

WordPress迁移

首先，安装 hexo-migrator-wordpress 插件。

1
npm install hexo-migrator-wordpress --save

在 WordPress 仪表盘中导出数据(“Tools” → “Export” → “WordPress”)（详情参考WP支持页面）。

插件安装完成后，执行下列命令来迁移所有文章。source 可以是 WordPress 导出的文件路径或网址

将导出的xml文件放到Hexo根目录

1
hexo migrate wordpress

可能出现的错误

问题一

[git]warning: LF will be replaced by CRLF | fatal: CRLF would be replaced by LF
遇到这两个错误，是因为Git的换行符检查功能。

core.safecrlf

Git提供了一个换行符检查功能（core.safecrlf），可以在提交时检查文件是否混用了不同风格的换行符。这个功能的选项如下：

  • false - 不做任何检查
  • warn - 在提交时检查并警告
  • true - 在提交时检查，如果发现混用则拒绝提交

建议使用最严格的 true 选项。

core.autocrlf

假如你正在Windows上写程序，又或者你正在和其他人合作，他们在Windows上编程，而你却在其他系统上，在这些情况下，你可能会遇到行尾结束符问题。这是因为Windows使用回车和换行两个字符来结束一行，而Mac和Linux只使用换行一个字符。虽然这是小问题，但它会极大地扰乱跨平台协作。

Git可以在你提交时自动地把行结束符CRLF转换成LF，而在签出代码时把LF转换成CRLF。用core.autocrlf来打开此项功能，如果是在Windows系统上，把它设置成true，这样当签出代码时，LF会被转换成CRLF：

1
$ git config --global core.autocrlf true

Linux或Mac系统使用LF作为行结束符，因此你不想 Git 在签出文件时进行自动的转换；当一个以CRLF为行结束符的文件不小心被引入时你肯定想进行修正，把core.autocrlf设置成input来告诉 Git 在提交时把CRLF转换成LF，签出时不转换：

1
$ git config --global core.autocrlf input

这样会在Windows系统上的签出文件中保留CRLF，会在Mac和Linux系统上，包括仓库中保留LF。

如果你是Windows程序员，且正在开发仅运行在Windows上的项目，可以设置false取消此功能，把回车符记录在库中：

1
$ git config --global core.autocrlf false

问题二

hexo指令出现YAMLException: duplicated mapping key at line 111, column 1:

  • 查看是否缩进正常，空格或者tab一致
  • YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

错误三

若把整个hexo根目录给提交了上去，这不是我要的结果啊，说好的只提交public文件夹的呢！查看hexo根目录，存在“.git”这个目录，原来是在hexo根目录下，我进行过git init的操作，删除“.git”文件夹即可。

错误三

使用hexo s指令后，打开浏览器，发现加载速度很慢，然后找不到任何东西。

可能是因为端口被占用了，找到node_modules\hexo-server\index.js，然后修改里面的port。

错误四

生成的html文件内无任何东西，则考虑是主题没有放在themes文件夹下，或者名字不对。例如在网站根目录的_config.yml中设置为theme: 3-hexo，但是该主题文件夹为themes/hexo-theme-3-hexo，名字对不上，所以产生不了文件。

错误五

在markdown文件中，不能出现连续的，否则会报错Nunjucks Error: expected variable end。若是必须要使用这两个，可以在两个大括号中间加上空格。例如{ {或} }

错误六

使用npm install时如果遇到了错误：Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c "autoreconf -ivf"，则

If ping raw.githubusercontent.com timed out，add hosts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
52.74.223.119     github.com
192.30.253.119    gist.github.com
54.169.195.247    api.github.com
185.199.111.153   assets-cdn.github.com
151.101.76.133    raw.githubusercontent.com
151.101.76.133    gist.githubusercontent.com
151.101.76.133    cloud.githubusercontent.com
151.101.76.133    camo.githubusercontent.com
151.101.76.133    avatars0.githubusercontent.com
151.101.76.133    avatars1.githubusercontent.com
151.101.76.133    avatars2.githubusercontent.com
151.101.76.133    avatars3.githubusercontent.com
151.101.76.133    avatars4.githubusercontent.com
151.101.76.133    avatars5.githubusercontent.com
151.101.76.133    avatars6.githubusercontent.com
151.101.76.133    avatars7.githubusercontent.com
151.101.76.133    avatars8.githubusercontent.com

npm cache clean -f，ping raw.githubusercontent.com again

若这种方法不管用的话，建议使用：

1
2
npm install cnpm -g
cnpm install gifsicle

错误七

如果遇到错误hexo : 无法加载文件 C:\Users\zdaio\AppData\Roaming\npm\hexo.ps1，因为在此系统上禁止运行脚本。，则搜索powershell，右键以管理员身份运行。若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本，请使用以下命令将计算机上的 执行策略更改为 RemoteSigned，执行：set-ExecutionPolicy RemoteSigned

错误八

若遇到任何关于gulp-imagemin的错误，例如TypeError in plugin "gulp-imagemin" Message: fn is not a function。则运行：

1
cnpm install --save-dev gulp-imagemin

Ubuntu下gulp报错

在Ubuntu下安装完依赖包后，出现了，执行gulp指令，出现了下面的错误

1
2
3
4
5
6
7
8
9
10
11
[20:17:55] Using gulpfile ~/Documents/zdaiot.github.io/gulpfile.js
/usr/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                   ^

TypeError: Cannot read property 'apply' of undefined
    at /usr/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (internal/process/next_tick.js:61:11)
    at Function.Module.runMain (internal/modules/cjs/loader.js:888:11)
    at startup (internal/bootstrap/node.js:315:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:656:3)

原来是我安装的全局gulp和现在版本的冲突了，但是使用npm un gulp -g不能解决这个问题，观察上面报错，应该是使用的/usr/lib/node_modules/gulp，而不是我们自己的gulp。cd到该目录，删除该文件夹。

同时，还有一个问题，当安装完npm时，这个默认安装在/usr/lib/node_modules/文件夹，当你使用npm config set prefix "/home/zdaiot/software"设置完新的全局路径时，再使用npm install -g npm指令升级npm时，会安装到你的新设置的全局路径上，但是使用的还是/usr/lib/node_modules/文件夹下的npm

公式渲染问题

注意公式中不能出现多余的{}，否则会导致hexo g出错。尤其是使用mathpix软件的时候会出现这个问题。

其他问题

1
spawn git ENOENT

解决方法在这里：spawn git ENOENT解决方法
头像图片无法显示：hexo头像无法显示【解决办法】

调试

打开网站，开启F12，查看console，报的错，对应去修改

如下图所示，可以去调试移动端的布局

参考资料

用 GitHub + Hexo 建立你的第一个博客
hexo的next主题个性化教程：打造炫酷网站
Hexo NexT主题内接入网页在线联系功能
hexo的next主题打赏
Hexo发布博客引用自带图片的方法
Next主页
hexo中完美插入本地图片
hexo next 主题配置 gitalk 评论后无法初始化创建 issue
报错出现 Error: Validation Failed. #102
在Hexo发布博客的MarkDown文件中引入JS代码
Gitment评论功能接入踩坑教程
Hexo的Next主题详细配置
Hexo-Next-主题优化(一)
Hexo+Next个人博客主题优化
Hexo部署至多个repo上，多域名指向
Hexo插件之百度主动提交链接
hexo 博客百度站长平台自动链接提交
Hexo+nexT主题搭建个人博客
如何解决github+Hexo的博客多终端同步问题
基于Hexo的博客同步中的一些问题
Hexo NexT主题中添加百度分享功能
next主题进阶教程
Hexo+nexT主题搭建个人博客
脚本推送百度
HEXO添加复制功能
关于在next主题下的应用
hexo-theme-Wikitten
hexo-directory-category
为NexT主题的Hexo博客增加备案号
配置hexo 为什么运行到 hexo server 这步就没用了？ - 欧阳的回答 - 知乎
hexo本地测试运行重启后页面空白,提示 : WARN No layout: index.html? - Hpupu的回答 - 知乎
theme-next-pjax
npm常用命令
npm更新模块并同步到package.json中
[gulp]性能优化
GulpUglifyError:Unable to minify JavaScript
How to Install Latest Node.js and NPM on Ubuntu with PPA
初识Gulp
Hexo 文章保存为草稿
Hexo不渲染.md或者.html
hexo忽略文件(skip_render)配置
Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c “autoreconf -ivf” #33
PowerShell : 无法加载文件 C:\Users\huyn\AppData\Roaming\npm\ng.ps1，因为在此系统上禁止运行脚本
postInstall script fails with mozjpeg. ¿What does this mean? #1480
gulp-imagemin
Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c “autoreconf -ivf” #33

------ 本文结束------
坚持原创技术分享，您的支持将鼓励我继续创作！

欢迎关注我的其它发布渠道