使用Hexo+GitHubPage+CodingMe搭建一个博客（已过时，博客介绍和前期工作可参考本篇，更新见新博文）

发表于 更新于 分类于 阅读次数：

准备工作

安装 Node.js

作者主要是在Win10下办公，所以此处就介绍Win10下的安装方法。 页面中间就有下载按钮。下载之后按照向导一步步来即可。 安装完成之后检查PATH环境变量是否配置Node.js： 在CMD中运行返回安装的版本号说明安装成功！

1
2
C:\Users\zm>node --version
v10.15.3

设置淘宝镜像

这里的淘宝不是那个淘宝：

淘宝 NPM 镜像：这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

官网上有详细的安装方式，这里就照搬一下。 > 使用说明： 你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

1
$ npm install -g cnpm --registry=https://registry.npmmirror.com
> 或者你直接通过添加 npm 参数 alias 一个新命令:
1
2
3
4
5
6
7
8
9
10
alias cnpm="npm --registry=https://registry.npmmirror.com \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npmmirror.com/mirrors/node \
--userconfig=$HOME/.cnpmrc"

# Or alias it in .bashrc or .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npmmirror.com \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npmmirror.com/mirrors/node \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc
安装的话就使用cnpm来代替npm就可以了，速度有明显的提升。

安装 Git

Git是用来做项目版本管理的，下载链接下载安装之后，以后的命令尽量在GitBash中输入。 如果不把源代码上传，那么后面自己用不到git命令，hexo deploy命令会调用git上传到你配置的git仓库。但是如果自己有两台以上电脑，或者需要在本地两个地方存放的话（在配置网址时可能需要国内一个网站，国外一个网站，后面会说），就需要将博客的源代码上传git，保证各工作空间代码一致。

首先我们新建一个仓库如下： Repository name （仓库名称）: BlogResources Description （描述，可填）: MyBlogTest 可以选择为Public对所有人可见或者选择Private私有 勾选Initialize this repository with a README，生成一个描述文件 .gitignore是上传时的忽略文件，这个可以后面修改添加，不急 Add a license可以使用MIT License 创建完成之后先放着，后面再用。

###常用Git命令
这里可能就能用到这么多，还有有关分支、合并的一些操作这里就不展开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 配置全局用户Name和E-mail
git config --global user.name "Your Name"
git config --global user.email "[email protected]"
// 初始化仓库
git init
// 添加文件到Git仓库
git add <file>  //可以使用git add . 添加当前目录
// 提交添加的文件到Git仓库
git commit  //然后会弹出一个vim编辑器输入提交说明
// 或者直接
git commit -m "你要输入的提交说明"
// 查看仓库当前的状态
git status
// 查看历史提交记录
git log
// 或者加上参数查看
git log --pretty=oneline
// 关联Github远程库：
git remote add origin https://github.com/zhaomin6666/MyTest.git
// 推送到远程仓库
git push -u origin master  //注意：第一次提交需要加一个参数-u
// 查看远程库的信息
git remote

安装 Hexo

搭建Hexo环境：

1
npm install -g hexo-cli
初始化Hexo：在本地某个目录下，新建一个文件夹folder 右击Git Bash Here打开命令行工具，输入：

1
2
3
hexo init <folder>
cd <folder>
npm install

这样就初始化完成了，以后所有的Hexo命令都在这里执行。_config.yml是站点配置文件，theme/下的_config.yml是主题的配置文件。 在路径下，命令行（即Git Bash）输入以下命令启动服务器：

1
hexo server //或hexo s

浏览器访问网址： http://localhost:4000/

至此你的最基本的博客在本地已经搭建好了。

开始搭建博客（其中Coding搭建参见新博文）

申请自己的域名（可选）、使用GithubPages+CodingPages搭建博客

1.在github上再新建一个仓库，仓库名为：<Github账号名称>.github.io 2.将本地Hexo博客推送到GithubPages  2.1 安装hexo-deployer-git插件。在命令行（即Git Bash）运行以下命令即可：

1
npm install hexo-deployer-git --save

 2.2 添加SSH key  创建一个SSH key。在命令行（即Git Bash）输入以下命令， 回车三下即可：

1
ssh-keygen -t rsa -C "邮箱地址"

 添加到Github。复制密钥文件内容（路径形如C:\Users\Administrator\.ssh\id_rsa.pub），粘贴到Github网站Settings --> SSH and GPG keys --> New SSH Key即可。

测试是否添加成功。在命令行（即Git Bash）依次输入以下命令，返回“You’ve successfully authenticated”即成功：

1
2
3
$ ssh -T [email protected]
$ yes
Hi zhaomin6666! You've successfully authenticated
 2.3 修改_config.yml（在站点目录下）。文件末尾修改为：
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:<Github账号名称>/<Github账号名称>.github.io.git
  branch: master
 2.4 推送到GithubPages。在命令行（即Git Bash）依次输入以下命令， 返回INFO Deploy done: git即成功推送：
1
2
$ hexo g
$ hexo d
等待1分钟左右，浏览器访问网址： https://<Github账号名称>.github.io 如果失败了，尝试把_config.yml中的repo即repository改为repository: https://github.com/zhaomin6666/zhaomin6666.github.io.git，使用Https再次提交。这是会让你输账号密码，此处的密码在Settings --> Developer Settings --> Personal access tokens中生成。

3.将本地Hexo博客推送到CodingPages （已过时，Coding已经使用新的模式部署静态页面） 和推送到Github差不多，都是使用托管平台的静态Pages。  3.1 创建Coding账号（腾讯云开发平台）  3.2 创建项目，项目名为：<项目名称>  3.3 进入项目里，左下角“项目设置”-->“功能开关”-->“持续部署” 开启  3.5 回到项目页面，点击 “持续部署”-->“静态网站” 中新建一个网站。名称随意取，勾选更新时自动部署，这样每次把静态文件推送到仓库的时候文件就会自动加载更新。点击确定，稍等片刻CodingPages即可部署成功。  3.4 将本地Hexo博客推送到CodingPages

推送成功之后，会自动生成一个访问地址：<用户名>.coding.me/<项目名称>，点击这个地址就可以访问自己的博客了！

此时可能会发现在coding搭建的博客的js路径都是不对的，这时需要修改站点目录下的_config.yml。在使用GithubGages的时候# URL这个标签是这样设置的：

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: https://zhaomin6666.github.io/;
root: /
permalink: :category/:title/
permalink_defaults:
而在Coding中搭建项目的时候需要如下配置：
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: https://3ycq0r.coding-pages.com/MYBLOG/
root: /MYBLOG
permalink: :category/:title/
permalink_defaults:
这样js才能正常显示。

4.申请域名 申请一个属于自己的域名应该不难，各大服务提供商的都有域名服务。申请完自己的域名之后需要做一下域名解析，也就是把你的域名指向你的博客网址。 比如我申请的域名为www.zm6666.top，在做域名解析时配置说明如下： 主机记录：也就是你访问的网址，进行跳转。可以把www和@都做解析； 记录类型：因为Codeing已经为我们提供了可以访问的域名所以这里选择CNAME； 解析线路：选择默认即可； 记录值：填写生成的可以访问的地址https://3ycq0r.coding-pages.com； TTL：默认5分钟即可。 做完了域名解析，在Coding静态页面的配置中也需要增加一下配置： 自定义域名：添加自己申请的域名。 此时，地址栏中敲入申请的域名，就可以成功访问博客了。当然站点目录下的_config.yml又要做修改了，修改网址为新的网址：

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: https://www.zm6666.top/
root: /
permalink: :category/:title/
permalink_defaults:

此时搭建好的博客就可以使用申请的域名访问并正确显示了。

主题优化（部分有更新，请参照新的博文）

选择主题

Hexo默认的主题为landscape，我这里使用的是Next（hexo-theme-next-master） 网上可以搜索到很多好看的主题。

hexo-theme-butterfly

界面预览：

hexo-theme-pure

界面预览：

hexo-theme-diaspora

界面预览：

更多的可以在github上搜一下：https://github.com/search?q=hexo-theme

具体主题优化

这里就把自己做的优化及遇到的问题列一下。以下文章中出现的站点配置文件就是主目录下的_config.yml文件，主题配置文件新版本为_data/next.yml文件，老版本为themes/next/_config.yml文件。

注：新版本的next主体把主题框架的文件和个性化文件分来储存，也就是所有本来在themes/hexo-theme-next-master文件夹的操作都需要移动到个性化文件夹下。在source文件夹下新建_data文件夹，里面拷贝一份themes/hexo-theme-next-master/_config.yml文件并重命名为next.yml。然后对于主题目录下_config的修改就直接在自己的next.yml中修改即可。 下面中有部分配置方式是老版本的，已经做了标注，其他未标注部分已经用最新版的配置方式。 新版本git地址为：https://github.com/theme-next/hexo-theme-next

中文翻译

编辑站点目录下的配置文件。设置languages属性为zh-CN。

1
language: zh-CN
菜单中文翻译的话，老版本是配置主题下的languages目录下的zh-CN文件，现在需要在source/_data文件夹下新建languages.yml文件，配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
zh-CN:
  menu:
    home: 首页
    archives: 归档
    categories: 分类
    tags: 标签
    about: 关于
    search: 搜索
    schedule: 日程表
    sitemap: 站点地图
    commonweal: 公益 404
    message: 留言
    links: 友情链接
    
  reward:
    donate: 打赏
    wechatpay: 微信支付
    alipay: 支付宝
    paypal: 贝宝
    bitcoin: 比特币

选择Scheme

选择Next主题的外观样式。现在Next主题支持4中Scheme，在配置文件中可以看到：

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
在想使用的Scheme前面去掉#即可，这里我个人选择使用Gmini。

设置菜单

next.yml中找到menu字段，菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false
除了 home，archives，后面都需要手动创建这个页面。 在终端窗口下，定位到Hexo站点目录下。使用hexo new page新建页面：
1
2
3
4
#分类
hexo new page "categories"
#标签
hexo new page "tags"
这时候，站点根目录source 文件夹下面新增一个 categories 文件夹，打开里面的 index.md 文件。在文档头部添加以下描述，其他页面类似。
1
2
3
4
5
6
7
8
---
<!-- 页面的名字，可以更改 -->
title: categories
type: "categories"
date: 2019-03-24 05:10:22
front-matter: 
comments: false
---

设置头像

next.yml中找到avatar字段，url中填入完整的地址。 （1）可以填入互联网地址，针对使用图床之类的用户。 （2）站内的相对地址。可以把图片保存在theme/next/source/images目录下。

1
2
3
4
5
6
7
8
9
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: https://myblog-1258874308.cos.ap-shanghai.myqcloud.com/HexoGuide/theme_pure_view.png
  # url: /images/my-avatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

侧边栏设置

next.yml中找到sidebar字段。 默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于左侧位置。 其中display属性是用来设置侧边栏显示的时机。post是指在在文章拥有目录时启用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false
侧边栏的社交链接可以通过next.yml中的social字段配置。
1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/zhaomin6666 || fab fa-github
  E-Mail: mailto:[email protected] || fa fa-envelope
  Weibo: https://weibo.com/v5bossv5 || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  Instagram: https://www.instagram.com/bossbigvvvv/ || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

定制样式

next.yml中找到custom_file_path字段。 这个字段下有很多个性化的文件可以自己配置。

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  postBodyEnd: source/_data/post-body-end.swig 	# 本文结束放这里
  footer: source/_data/footer.swig				# js 代码放这里
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl 				# css 代码放这里

source/_data/styles.styl 文件内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 隐藏 valine 的 powered by
.power.txt-right {
	display: none;
}

// 修改不蒜子数据颜色
#busuanzi_value_site_pv,#busuanzi_value_site_uv{
  color: #00BFFF;
}

// valine 评论框对齐文章
div#comments.comments.v{
  margin-left: 0px !important;
  margin-right: 0px !important;
  border: 0px;
}
source/_data/footer.swig 文件内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 动态网站标题 #}
{% if theme.title_trick.enable %}
  <script>
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        document.title = '{{ theme.title_trick.leave }}' + OriginTitle;
        clearTimeout(titleTime);
      } else {
        document.title = '{{ theme.title_trick.enter }}' + OriginTitle;
        titleTime = setTimeout(function() {
          document.title = OriginTitle;
        }, 2000);
      }
    });
  </script>
{% endif %}
在主题配置文件添加以下内容：
1
2
3
4
5
# 动态网站标题
title_trick:
  enable: true
  leave: "来啊快活啊~"
  enter: "咚咚咚"

文章末尾统一添加本文结束分割线 source/_data/post-body-end.swig 文件内容：

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

底部信息

next.yml中找到footer字段。 icon字段为那个图标，可以修改为动态的。 其他信息可以看情况自行修改。

1
2
3
4
5
6
7
8
9
10
11
12
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

菜单栏显示分类 / 标签中的文章数目

next.yml中找到menu_settings字段。

1
2
menu_settings:
  badges: true # 显示菜单分类的数目

文章目录

next.yml中找到toc字段。expand_all可以设置是否全部展开。

1
2
3
4
5
6
7
8
9
10
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

添加mathjax支持

next.yml中找到math字段，把enable改为true。

1
2
3
4
5
6
7
8
9
10
11
math:
  # 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: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

自定义网站图标（浏览器标签上显示）

next.yml中找到favicon字段，在EasyIcon上下载32*32的icon图标。可以使用本地目录，即保存在theme/next/source/images目录下。

1
2
3
4
5
6
7
favicon:
  small: https://myblog-1258874308.cos.ap-shanghai.myqcloud.com/HexoGuide/pig_32px_1271682_easyicon.net.ico
  medium: https://myblog-1258874308.cos.ap-shanghai.myqcloud.com/HexoGuide/pig_32px_1271682_easyicon.net.ico
  apple_touch_icon: https://myblog-1258874308.cos.ap-shanghai.myqcloud.com/HexoGuide/pig_32px_1271682_easyicon.net.ico
  safari_pinned_tab: https://myblog-1258874308.cos.ap-shanghai.myqcloud.com/HexoGuide/pig_32px_1271682_easyicon.net.ico
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

显示当前浏览进度

next.yml中找到back2top字段，把scrollpercent改为true。

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

代码块复制功能

next.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 | solarized | solarized dark | galactic
  # 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:

添加背景图

在source/_data/style.styl 文件中添加：

1
2
3
4
5
6
7
8
9
// 背景
body {
  background-image:url(../images/bg.webp);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
}

注：以下为老版本设置方式 在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
7
body{
    background:url(../images/bg.png);
    background-size:cover;
    background-repeat:repeat;
    //background-attachment:fixed;
    //background-position:center;
}

设置透明度

在source/_data/style.styl 文件中添加：

1
2
3
4
5
6
7
8
9
//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.8);
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

修改Logo字体

注：以下为老版本设置方式 在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

1
2
3
4
5
6
7
8
@font-face {
    font-family: FZPSZHUNHJW;
    src: url('/fonts/FZPSZHUNHJW.TTF');
}
.site-title {
    font-size: 40px !important;
	font-family: 'FZPSZHUNHJW' !important;
}

在路径themes\hexo-theme-next-master\source\fonts下有个.gitkeep文件，用记事本打开写入字体文件名称即可。

静态文件压缩

在站点目录下安装gulp

1
npm install gulp -g
然后安装gulp插件：
1
2
3
4
5
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
npm install gulp-clean-css --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
52
53
54
55
56
57
58
var gulp = require('gulp');
//var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
var minifyCss = require('gulp-clean-css');
var pump = require('pump');

gulp.task('cssmin',function(cb) {
    pump([
        gulp.src('./public/**/*.css'),
        minifyCss(),
        gulp.dest('./public')
    ], cb
    )
});
//.task('minify-css', function() {
//  return gulp.src('./public/**/*.css')
//  .pipe(minifycss())
// .pipe(gulp.dest('./public'));
//});
// 压缩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'))
});
// 压缩js文件
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', async() => {
    await gulp.src('./public/demo/**/*.*')
        .pipe(imagemin({
           optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
           progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
           interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
           multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('./public/uploads'));
});
// 默认任务
//gulp.task('default', [
//  'minify-html','minify-css','minify-js','minify-images'
//]);

gulp.task('default',gulp.series(gulp.parallel('minify-html','cssmin','minify-js','minify-images')));
注：这里之前使用的是大佬教程中的文件，后来发现css压缩的插件做了更新，而且gulp.task需要使用新版本的方式进行任务执行，根据报错自己做了些修改。

在新增好文件之后，每次执行hexo g之后执行gulp就可以实现静态文件压缩，然后再执行hexo d推送到仓库：

1
2
3
hexo g
gulp
hexo d
注：如果执行gulp的时候报can not find module 'xxx'，一般是有插件没有安装，使用npm或者cnpm安装即可。如果是安装了很多还是无效，建议使用npm重新装一下gulp。

修改访问URL路径

默认情况下生成的页面访问url是根据时间来的，即zm6666.top/2020/06/10/HexoGuide。编辑Hexo站点下的_config.yml文件修改其中的permalink字段为：

1
permalink: :category/:title/

设置首页不显示全文（只显示预览）

新版本貌似没有这个属性了。。。 注：以下为老版本设置方式 编辑Hexo站点下的_config.yml文件修改其中的auto_excerpt的enable为true。

1
2
3
auto_excerpt:
  enable: true
  length: 150
2020年8月19日更新： 可以使用在文章中加入<!-- more -->来控制折叠的地方。

Valine评论系统

请先登录或注册 LeanCloud，进入控制台后点击创建应用。 创建好之后进入应用，在左侧“设置”-->“应用Keys”里面可以看到AppID和AppKey。 把这两项填写到next.yml的valine字段中即可。

性能优化

js,css使用cdn加速

对于一些插件的js引用cdn的js。在next.yml里面的vendors部分可以设置插件js,css的cdn地址，这里可以把注释中的cdn.jsdelivr.net的地址复制到下面中使用。下面就举个例子：

1
2
3
4
5
6
7
8
# Internal version: 5.13.0
# fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css

# MathJax
# mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

百度收录

添加站点

登陆百度资源收录，注册登录之后添加站点。这个站点是就是自己网站的访问地址（在config.yml中配置的url）。

验证站点

验证站点可以使用CNAME的方式验证，在自己申请的域名解析中新增一条解析。在验证站点的页面上百度会给你一个xxxxxx.zm6666.top地址，把这个地址解析到ziyuan.baidu.com然后点击验证即可。

资源提交

安装插件 cnpm install hexo-baidu-url-submit --save

点击资源提交——普通收录——资源提交——API提交。点击修改准入秘钥可以获得秘钥。按照下面的格式添加到config.yml中：

1
2
3
4
5
6
7
#baidu
baidu_url_submit:
  count: 5 				 ## 提交最新的n个链接
  host: https://zm6666.top/ 	## 百度站长平台中注册的域名
  token: xxxxxxxxxxxx	 ## 准入秘钥
  path: baidu_urls.txt   ## 文本文档的地址，执行hexo g的时候需要提交的新链接会保存在此文本文档里

并且在config.yml的最后deploy中添加推送：

1
2
3
4
5
deploy:
- type: git
  repository: https://e.coding.net/zm666/MYBLOG.git
  branch: master
- type: baidu_url_submitter  ## 添加这行

TODO

添加萌萌哒 遇到就先写了：live2d和不蒜子统计不兼容问题，似乎无法解决，只能二选一，难受。

更新日期 2020年09月30日