记录一下本博客搭建过程

前言

1. 欢迎在文末留言，共同进步。
2. 本文采用署名-非商业性使用-相同方式共享 4.0 国际(CC BY-NC-SA 4.0) 许可协议，转载请注明出处！

博客搭建

准备环境

1. 关于基础组件的安装，这里不做详细介绍了，可以查看官网
   • Git
   • Node.js
   • Hexo

2. 在 Shell 中（Windows 下可能需要使用 Git Bash）执行初始化命令：

   hexo init hexo-blog
   cd hexo-blog

   我这里使用的是 yarn 代替 npm，关于 yarn 的安装，参考这里
   我用的 Hexo 版本是 3.8.0，不需要执行 yarn install 命令了，init 的时候就做完了，因此只需要 cd 到目录下即可

3. 修改站点配置文件 _config.yml：

配置	原值（默认值）	修改值
title	Hexo	Wdmcheng
subtitle		Java Coder
description		手握日月摘星晨，世间无我这般人……嗯……吹大了
author	John Doe	雾都迷城
language		zh-CN
timezone		Asia/Shanghai
url	http://yoursite.com	https://www.wdmcheng.cn
permalink	:year/:month/:day/:title/	:title
new_post_name	:title.md	:year/:month/:day/:title.md
post_asset_folder	false	true
index_generator > per_page	10	20
per_page	10	20

4. 启动服务器就可以预览看到效果：
   hexo server
5. 默认地址：http://localhost:4000
6. 能正常访问，就说明环境基本搭建成功了，可以进行下一步了，先根据提示按 Ctrl+C 终止服务运行

实施方案

这里采用的是遇见西门教程教程的实施方案三，采用 GithubPages + CodingPages 的方式，不过有些变化。我是部署到 GitLabPages 上，然后使用 GitLab 的镜像仓库功能推送到 GitHub 与 Coding
至于 Pages 服务的配置及这些镜像配置就不多介绍了

主题

关于主题优化，详细的教程还是要参考遇见西门的博客

应用主题

1. 官网的主题页面很坑，有时候各种404，看不见预览，我直接 Github 搜索。Star 数最高的是 NexT 主题，但是旧版的，我这里直接使用新版

2. 根据主题说明，下载安装主题，我直接安装的最新版本

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

3. 修改站点配置文件 _config.yml 的 theme 字段，为主题文件夹名称，我这里就是 next，这时候想看到效果需要重启服务了

4. 不需要默认的 landscape 主题了，直接删除，执行命令 rm -rf themes/landscape

主题修改与优化

因为主题是克隆的仓库，后续升级版本其实很方便，为了避免升级时候主题配置的处理太麻烦，因此采用数据文件的形式配置：

1. 执行下面命令，创建 source/_data/ 目录，并将默认主题配置文件 themes/next/_config.yml 复制到 source/_data/ 下，命名为 next.yml

   mkdir -p source/_data
   cp -p themes/next/_config.yml source/_data/next.yml

2. 修改新的主题配置文件 source/_data/next.yml，将 override 修改为 true

RSS 支持

安装 hexo-generator-feed 插件，由 Hexo 自动生成订阅源并插入链接，不需要其他配置

yarn add -D hexo-generator-feed

修改主题样式

1. 修改主题配置文件 source/_data/next.yml，将 scheme 修改为 Gemini，使用双子座主题样式
2. 配置菜单显示文章数，修改 menu_settings.badges 为 true
3. 配置文章目录自动换行，修改 toc.wrap 为 true
4. 配置侧边栏显示 Back to Top 按钮，并显示阅读百分比，修改 back2top 下
   • sidebar: true
   • scrollpercent: true
5. 配置 footer，修改 footer 下
   • icon.name: heart
   • icon.animated: true

主页文章只显示摘要

auto_excerpt.enable: true

记录文章阅读位置

打开 save_scroll: true 这个开关就可以在 Cookie 中保存文章的阅读位置，下次进入还会滚动到相同地方

字数统计与阅读时长

1. 执行命令 yarn add -D hexo-symbols-count-time

2. 修改站点配置文件 _config.yml，添加下面代码

   # 字数统计与阅读时长
   symbols_count_time:
     symbols: true
     time: true
     total_symbols: true
     total_time: true
     exclude_codeblock: true

3. 如果需要显示站点总字数与站点阅读时长 的文字，修改主题配置文件 source/_data/next.yml，将 symbols_count_time.item_text_total 设置为 true

代码片段复制按钮

主题配置文件 source/_data/next.yml 中 codeblock.copy_button.enable 设置为 true，codeblock.copy_button.show_result 设置为 true

优化字库访问速度

如果需要优化字库访问速度，可以使用国内字体镜像站 fonts.lug.ustc.edu.cn 代替默认的 fonts.googleapis.com，修改 font 下

• enable: true
• host: //fonts.lug.ustc.edu.cn
• global.family: Monda
• headings.family: Roboto Slab
• logo.family: Lobster Two
• logo.size: 24
• codes.family: PT Mono

配置菜单项

1. menu 下，打开下面几项的注释
   • about
   • tags
   • categories
   • schedule

2. 执行下面的命令，生成 categories tags about schedule 页面

   hexo new page categories
   hexo new page tags
   hexo new page about
   hexo new page schedule

3. 生成的文件路径如下

   • source/categories/index.md
   • source/tags/index.md
   • source/about/index.md
   • source/schedule/index.md
4. 编辑 source/categories/index.md 与 source/tags/index.md 文件，在 date 下面添加一行，分别为 type: categories type: tags，然后再各添加一行 comments: false 禁止评论。
5. 另外两个文件自己随意修改
6. 编辑 scaffolds/post.md 模板文件，在 title 下新添一行 description:，在 tags 下新添一行 categories:，这样以后创建的文章都会自动添加这两个属性
7. 还可添加日程表，使用 Google Calendar，需要梯子。详细配置参考这里，注意主题配置文件中的 calendar.calendar_id 不一定要填写 Google 账号对应的 E-Mail，只需要填写一个日历 ID，一定要是公开日历，否则会报 404

添加创作共用协议

我这里使用的是 by-nc-sa，因此配置 creative_commons 项

• sidebar: true
• post: true
• language: deed.zh

文章开始统一添加前言

这里我写了个前言，添加一下授权协议说明，在每篇博文都默认添加，也可以手动关闭

1. 创建文件 themes/next/layout/_custom/custom-post-preface.swig，并输入如下内容，或者自行修改

   <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2>
   <ol>
     <li>欢迎在文末留言，共同进步。</li>
     <li>
       本文采用<span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo" title="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名 - 非商业性使用 - 相同方式共享 4.0 国际<i class="fa fa-external-link"></i></span>
         (<span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC8=" title="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0<i class="fa fa-external-link"></i></span>) 许可协议，转载请注明出处！
     </li>
   </ol>

2. 编辑 scaffolds/post.md 模板文件，在 categories 下新添一行 include_preface: true，做为显示前言的开关，这样以后创建的文章都会自动添加，并且是打开状态，具体文章的标记改为 false，则那篇文章就不会显示前言

3. 编辑 themes/next/layout/_macro/post.swig 文件，在下面所示的区域

   {#################}
   {### POST BODY ###}
   {#################}

   找到非 is_index 的 ，在其上添加如下代码

   {% if post.include_preface %}
     {% include '../_custom/custom-post-preface.swig' %}
   {% endif %}

文章末尾统一添加结束标记

1. 创建文件 themes/next/layout/_custom/passage-end-tag.swig，并输入如下内容，或者自行修改
   <div style="text-align: center; color: #ccc; font-size: 14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

2. 在主题配置文件 source/_data/next.yml 中添加如下配置，这里是关闭的，随时开启，只需要将 passage_end_tag.enable 从 false 改为 true

   # 文章结束标记（需修改主题，自己添加代码）
   passage_end_tag:
     enable: false

3. 编辑 themes/next/layout/_macro/post.swig 文件，在下面所示的标记上面

   {#####################}
   {### END POST BODY ###}
   {#####################}

   添加如下代码

   {% if theme.passage_end_tag.enable and not is_index %}
     <div>{% include '../_custom/passage-end-tag.swig' %}</div>
   {% endif %}

添加 GitHub Banner

最大的同性交友网站 GitHub 地址还是要放的，方便其他人 Follow me。
找到 github_banner 项，修改以下配置

• enable: true
• permalink: https://github.com/wdmcheng

添加搜索功能

1. 添加依赖，在 Shell 中执行命令

   yarn add -D hexo-generator-searchdb

2. 在站点配置文件 _config.yml 中，找到 Extensions，在后面添加

   # 搜索功能
   search:
     path: search.xml
     field: post
     format: html
     limit: 10000

3. 在主题配置文件 source/_data/next.yml 中，修改 local_search.enable 为 true

移动设备适配

mobile_layout_economy: true

Safari 菜单栏着色

safari_rainbow: true

自定义滚动条件支持

custom_scrollbar: true

添加特效

1. 启用 Canvas-nest，在主题配置文件 source/_data/next.yml 中，修改 canvas_nest.enable 为 true

2. 配置 CDN 加速，修改 vendors 下的配置

   vendors:
     canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
     canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js

3. 我这里还添加了 JavaScript 3D library，在主题配置文件 source/_data/next.yml 中，下面几项配置，需要启用哪种特效，就将 false 改为 true，我这里都是暂时关闭的

   • three_waves: false
   • canvas_lines: false
   • canvas_sphere: false

4. 配置 CDN 加速，修改 vendors 下的配置

   vendors:
     three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
     three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
     canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
     canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js

5. 使用 CDN 加速，安装 Canvas-Ribbon，修改主题配置文件 source/_data/next.yml，我这里没有启用，需要启用直接修改 canvas_ribbon.enable 为 true

   vendors:
     canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.min.js

修改动画

motion.async 默认为 false，这里修改为 true，感觉动画效果快一些

添加 Live2D 动画角色

1. 安装 hexo-helper-live2d

   yarn add -D hexo-helper-live2d

2. 在站点配置文件 _config.yml 中，找到 Extensions，在后面添加

   # Live2D
   # https://github.com/EYHN/hexo-helper-live2d
   live2d:
     enable: true
     # local，从本地加载，需要配置 pluginRootPath、pluginJsPath、pluginModelPath 三个属性；后面三种配置从网络加载，不需要配置
     #scriptFrom: local 默认
     #pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
     #pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
     #pluginModelPath: assets/ # 模型文件相对与插件根目录路径
     #scriptFrom: jsdelivr # jsdelivr CDN
     #scriptFrom: unpkg # unpkg CDN
     scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js
     tagMode: false # 标签模式, 是否仅替换 live2d tag 标签而非插入到所有页面中
     debug: false # 调试, 是否在控制台输出日志
     model:
       # 第一种需要安装相应的包才可用；第二种和第三种需要手动放置相关文件
       #use: live2d-widget-model-z16 # npm-module package name
       #use: miku # 博客根目录/live2d_models/ 下的目录名
       #use: ./wives/wanko # 相对于博客根目录的路径
       use: https://cdn.jsdelivr.net/npm/[email protected]/assets/haruto.model.json # 自定义 URL，可设定 CDN
     display:
       position: right
       width: 300
       height: 600
     mobile:
       show: false

主页文章添加阴影效果

编辑 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);
}*/

更新主题

可以通过如下命令更新到最新的 master 分支

cd themes/next
git stash pull
git pull
git stash pop

加入广告

我这里用的是 Google AdSense，网络问题请自行解决

1. 访问 Google AdSense，点击 立即注册，然后填各种资料，最后生成一段代码，我的是

   <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <script>
     (adsbygoogle = window.adsbygoogle || []).push({
       google_ad_client: "ca-pub-6923016589675745",
       enable_page_level_ads: true
     });
   </script>

2. 编辑 themes/next/layout/_custom/head.swig 文件，粘贴代码（稍作修改，添加一些变量及控制）

   {% if theme.google_adsense.enable %}
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <script>
       (adsbygoogle = window.adsbygoogle || []).push({
         google_ad_client: "{{ theme.google_adsense.google_ad_client }}",
         enable_page_level_ads: true
       });
     </script>
   {% endif %}

3. 在主题配置文件 source/_data/next.yml 中添加下面代码

   # Google AdSense
   google_adsense:
     enable: true
     google_ad_client: ca-pub-6923016589675745

4. 等待审核通过，好运。如果失败，可再次申请。

CDN 加速

配置 font-awesome jquery velocity 的 CDN 加速，在主题配置文件 source/_data/next.yml 中，修改 vendors 下的配置

vendors:
  jquery: //cdn.jsdelivr.net/npm/jquery@2/dist/jquery.min.js
  velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
  velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js
  fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css

静态资源压缩

1. 如果未安装 gulo，在 Shell 中执行以下命令：

   npm install gulp -g

2. 执行以下命令：

   npm install gulp -g
   yarn add -D gulp gulp-clean-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin

3. 在项目根目录下新建 gulpfile.js 文件，内容如下：

   var gulp = require('gulp');
   var cleancss = require('gulp-clean-css');
   var uglify = require('gulp-uglify');
   var htmlmin = require('gulp-htmlmin');
   var htmlclean = require('gulp-htmlclean');
   var imagemin = require('gulp-imagemin');
   // 压缩css文件
   gulp.task('clean-css', function() {
     return gulp.src('./public/**/*.css')
     .pipe(cleancss())
     .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', function() {
       return gulp.src('./public/demo/**/*.*')
           .pipe(imagemin({
             optimizationLevel: 7, //类型：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', gulp.parallel('minify-html', 'clean-css', 'minify-js', 'minify-images'));

4. 以后只需要在每次 hexo generate 后，执行一下 gulp 就可以实现对静态文件的压缩，之后再执行 hexo deploy 命令发布。写一下代码，方便复制：

   hexo generate
   gulp
   hexo deploy

功能增强

标签插件

标签插件用法参考官网

Note 标签 - Bootstrap Callout

在主题配置文件 source/_data/next.yml 中，修改 note 下的配置

• style: modern
• icons: true
• border_radius: 0
• light_bg_offset: -3

Tabs 标签支持

tabs.transition.tabs: true

PDF 标签支持

修改配置 pdf.enable: true

Mermaid gantt 图标签支持

修改配置 mermaid.enable: true

数学方程式渲染支持

数学方程式渲染引擎可以使用 mathjax 或 katex，由 math.engine 项配置，将 math.enable 修改为 true 即可开启

启用 Fancybox

修改配置

fancybox: true
vendors:
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

启用书签功能

bookmark:
  enable: true
  auto: true
vendors:
  bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1/bookmark.min.js

启用顶部阅读进度条

reading_progress:
  enable: true
vendors:
  reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1/reading_progress.min.js

启用顶部加载进度条

pace: true
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.min.css

启用 FastClick

fastclick: true
vendors:
  fastclick: https://cdn.jsdelivr.net/npm/fastclick@1/lib/fastclick.min.js

启用 Jquery Lazyload 图像延迟加载

lazyload: true
vendors:
  lazyload: //cdn.jsdelivr.net/npm/jquery_lazyload@1/jquery.lazyload.min.js

启用 Quicklink 预加载

quicklink:
  enable: true
vendors:
  quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js

启用汉字标准格式支持

启用方式就是直接按照下面修改主题配置文件 source/_data/next.yml，我没有启用

han: true
vendors:
  han: //cdnjs.cloudflare.com/ajax/libs/Han/3.3.0/han.min.css

启用盘古支持——在中英文之间自动添加空格

1. 在主题配置文件 source/_data/next.yml 中，修改 pangu: true
2. 不使用 CDN 的话，需要安装 theme-next-pangu，我这里使用 CDN 加速，直接修改 vendors.pangu 配置

   vendors:
     pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js

内容分享

百度分享太丑，Likely 没有本土化，不支持微信什么的，这里使用 NeedMoreShare2

1. 不在本地加依赖了，直接使用 CDN，修改主题配置文件 source/_data/next.yml

   vendors:
     needmoreshare2_js: https://cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
     needmoreshare2_css: https://cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css

2. 修改如下配置

   needmoreshare2:
     enable: true
     postbottom:
       enable: true
       options:
         networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Evernote
     float:
       enable: true
       options:
         networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Evernote

评论系统

我这里使用 LiveRe，注册后安装一个免费的 City 版本，在安装代码中找到 data-uid，然后修改主题配置文件 source/_data/next.yml，打开 livere_uid 的注释，并填入 data-uid

在线聊天系统

这里没有使用 NexT 官方推荐的，使用的是 DaoVoice，安装方法我参考了这里

1. 注册之后，选择接入，编程语言为 JavaScript，会出现下面这种代码

   <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/XXXXXXXX.js","daovoice")</script>

   daovoice('init', {
     app_id: "XXXXXXXX"
   });
   daovoice('update');

2. themes/next/layout/_custom/head.swig 文件中添加如下代码（修改一下 </script> 结束标签的位置，并且将 app_id 做成变量）

   {% if theme.daovoice.enable %}
     <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/{{ theme.daovoice.daovoice_app_id }}.js","daovoice")
     daovoice('init', {
       app_id: "{{ theme.daovoice.daovoice_app_id }}"
     });
     daovoice('update');
     </script>
   {% endif %}

3. 在主题配置文件 source/_data/next.yml 中添加下面代码，XXXXXXXX 是前面获取到的 app_id

   # DaoVoice 在线聊天
   daovoice:
     enable: true
     daovoice_app_id: XXXXXXXX

部署

1. 执行命令 yarn add -D hexo-deployer-git

2. 部署配置，在站点配置文件 _config.yml 中，找到 deploy，在其节点下删除 type，然后添加如下配置

   - type: git
     repo: [email protected]:wdmcheng/wdmcheng.gitlab.io.git
     branch: master

3. 执行下面的命令，清理、生成静态文件、部署

   hexo clean
   hexo generate
   gulp
   hexo deploy

站长工具

阅读量统计工具

Firebase

要使用 Firebase 需要梯子，不只是配置过程，用户访问时如果不能连接服务，也是没有办法统计的，因此不建议

1. 注册或登录 Firebase，配置好项目，获取到 网络 API 密钥 和 项目 ID，然后修改主题配置文件 source/_data/next.yml 的 firestore 部分，如下
   • enable: true
   • apiKey: #<网络 API 密钥>
   • projectId: #<项目 ID>
2. Firebase 控制台中，进入 开发 > Database，创建一个非测试的数据库，之后进入规则，将 allow read, write: if false; 改为 allow read, write: if true;，然后发布

不蒜子

1. 修改主题配置文件 source/_data/next.yml，将 busuanzi_count.enable 改为 true
2. 这里只使用不蒜子的站点统计，文章阅读量交给 LeanCloud，因此将 busuanzi_count.post_views 改为 false
3. 页面底部的访客数图标修改一下，busuanzi_count.total_visitors_icon 的值从 user 改为 users

LeanCloud

LeanCloud 的相关配置请参考
Leancloud访客统计插件重大安全漏洞修复指南

1. 到 LeanCloud 官网注册，可以直接使用 GitHub 账号注册
2. 创建一个开发版的应用
3. 建立一个无限制的 Counter 类，之后进入设置拿到 App ID 及 App Key
4. 修改主题配置文件 source/_data/next.yml 中的 leancloud_visitors 部分
   • enable: true
   • app_id: #<App ID>
   • app_key: #<App Key>
   • betterPerformance: true
5. 在 LeanCloud 的设置页面，进入安全中心，添加Web 安全域名，注意协议、域名和端口号需严格一致，我这里是 https://www.wdmcheng.cn

6. 部署云引擎以保证访客数量不被随意篡改

   1. 打开 LeanCloud 的云引擎 > 部署，点击在线编辑

   2. 创建函数 > Hook，Hook 选择 beforeUpdate，Class 选择 Counter，然后粘贴下面代码

      var query = new AV.Query("Counter");
      if (request.object.updatedKeys.indexOf('time') !== -1) {
          return query.get(request.object.id).then(function (obj) {
              if (obj.get("time") + 1 !== request.object.get("time")) {
                  throw new AV.Cloud.Error('Invalid update!');
              }
          })
      }

   3. 注释处填个描述，我这里写的防止访客数量被随意篡改

   4. 然后要部署一下才可以生效

7. 配置数据库记录只可以本地增加，禁止删除

   1. 打开站点配置文件 _config.yml，添加以下配置，app_id 与 app_key 是 LeanCloud 中的，username 与 password 是授权可以 create 的用户名与密码

      leancloud_counter_security:
        enable_sync: true
        app_id: #<App ID>
        app_key: #<App Key>
        username:
        password:

   2. 执行命令 yarn add -D hexo-leancloud-counter-security 安装相关组件

   3. 执行命令 hexo lc-counter register <<username>> <<password>> 创建用户
   4. 打开 LeanCloud 的存储，进入 Counter 类，选择其他 > 权限设定，将 create 的权限设置为指定用户，选择刚才创建的用户，delete 的权限也设置为指定用户，但用户和角色都留空
   5. 站点配置文件 _config.yml 的 deploy 节点下添加 - type: leancloud_counter_security_sync
8. 配置 CDN 加速，修改 vendors.leancloud 配置

   vendors:
     leancloud: //cdn.jsdelivr.net/npm/leancloud-storage@3/dist/av-min.js

数据分析工具

Google Analytics

启用 Google Analytics

1. 启用 Google Analytics，前往Google Analytics，注册或登录，获取到 Google 跟踪 ID
2. 修改主题配置文件 source/_data/next.yml，将 google_analytics 部分的注释打开，并且在 google_analytics.tracking_id 填入 UA-XXXXXXXX-X 形式的 Google 跟踪 ID

关联 Google Search Console

若要关联 Google Search Console，这里不能使用 HTML 文件 方式验证，因为使用 Hexo 部署时，会自动移除多余的 html 文件。这里采用 Google Analytics 方式验证，那么在启用了 Google Analytics 后必须部署，然后根据 Google 的向导操作

关联 Google AdSense

直接在 Google Analytics 的管理页面关联就可以了

百度统计

1. 打开百度统计，注册、建立网站，完成后会有一个下面这种的统计代码，复制 https://hm.baidu.com/hm.js?xxxxxxxx 中的 xxxxxxxx，得到统计 ID

   <script>
   var _hmt = _hmt || [];
   (function() {
     var hm = document.createElement("script");
     hm.src = "https://hm.baidu.com/hm.js?xxxxxxxx";
     var s = document.getElementsByTagName("script")[0]; 
     s.parentNode.insertBefore(hm, s);
   })();
   </script>

2. 打开主题配置文件 source/_data/next.yml，找到 baidu_analytics，打开注释，并修改为 baidu_analytics: xxxxxxxx

搜索引擎相关

搜索引擎优化（SEO）

1. 在主题配置文件 source/_data/next.yml 中，修改如下配置

   • disable_baidu_transformation: true
   • seo: true
   • index_with_subtitle: true
   • exturl: true
   • baidu_push: true

   各种 Webmaster tools verification 需要到各自官网获取，然后填写到配置文件中，详细说明可参考NexT 主题官网，
   我这里开了 google_site_verification bing_site_verification baidu_site_verification 三个，可以开三个页签分别配置到待验证的环节，然后配好 NexT，一次发布，再分别点验证

2. 减少出站链接能够有效防止权重分散，这里安装 hexo-autonofollow，该工具可以在出站链接上自动添加属性 external nofollow noopener noreferrer

   yarn add -D hexo-autonofollow

3. 在站点配置文件 _config.yml 中添加如下配置，友链不想添加 nofollow 属性的，添加到 exclude 里

   nofollow:
     enable: true
     exclude:
     - 友链地址1
     - 友链地址2

4. 主题配置文件中默认的 permalink 是 :year/:month/:day/:title/，这对搜索引擎不友好，直接修改一下链接层级，变成 :title 或者 :year-:month-:day-:title

搜索引擎抓取

这里参考 Hexo博客Next主题SEO优化方法

1. 首先安装插件，自动生成 sitemap 文件，一个传统的，一个百度的

   yarn add -D hexo-generator-sitemap hexo-generator-baidu-sitemap

2. 安装完部署，这时网站就有了两个 sitemap 了

3. 前面已经在 Google Search Console 和百度搜索资源平台中添加验证了站点，现在可以直接提交 sitemap.xml 了，百度提交 baidusitemap.xml
4. github 禁止百度爬虫，好在百度支持主动推送，因此还需要添加一个主动推送的插件，执行命令 yarn add -D hexo-baidu-url-submit

5. 在站点配置文件 _config.yml 中，参考下面配置、注释及主动推送的接口调用地址添加配置（最后三个是熊掌号相关的，没有注册熊掌号则不写）

   baidu_url_submit:
     count: 1000 ## 提交最新的一个链接
     host: alili.tech ## 在百度站长平台中注册的域名
     token: xxxxx ## 请注意这是您的秘钥，所以请不要把博客源代码发布在公众仓库里!
     path: baidu_urls.txt ## 文本文档的地址，新链接会保存在此文本文档里
     xz_appid: 'xxxxxx' ## 你的熊掌号 appid
     xz_token: 'xxxxxx' ## 你的熊掌号 token
     xz_count: 10 ## 从所有的提交的数据当中选取最新的10条，该数量跟你的熊掌号而定

6. 在 deploy 下增加下面的类型（没注册熊掌号则不添加熊掌号的类型）

   - type: baidu_url_submitter # 百度
   - type: baidu_xz_url_submitter # 百度熊掌号

添加热度排行榜

这里参考了 hexo next 新增阅读排行页面

1. 排行榜源码如下（修改了文章链接地址），其中 leancloud_uri leancloud_appid leancloud_appkey 需要替换一下

   <div id="top"></div>
   <script src="leancloud_uri"></script>
   <script>AV.initialize("leancloud_appid", "leancloud_appkey");</script>
   <script type="text/javascript">
   let time = 0
   let title = ""
   let url = ""
   let query = new AV.Query('Counter');
   query.notEqualTo('id', 0);
   query.descending('time');
   query.limit(1000);
   query.find().then(function (todo) {
       for (let i = 0; i < 1000; i++){
       const result = todo[i].attributes;
       time = result.time;
       title = result.title;
       url = result.url;
       const content="<p><font color='#1C1C1C'>【文章热度:"+time+"℃】</font><a href='"+url+"'>"+title+"</a></p>";
       document.getElementById("top").innerHTML += content
       }
   }, function (error) {
       console.log("error");
   });
   </script>

2. 执行 hexo new page top 命令，创建一个 top 页面，编辑该页面，在头部描述区域添加 comments: false 关闭评论功能，然后粘贴上述代码

3. 修改主题配置文件 source/_data/next.yml，在 menu 下添加 top: /top/ || signal
4. 编辑 themes/next/languages/zh-CN.yml 语言文件，在 menu 下添加 top: /top/ || signal

自动化部署

我这里是使用 GitLab 私有仓库保存源码（因为含有密钥等信息），使用 gitlab-ci 自动部署的到 GitLab 的仓库，然后使用 GitLab 的镜像仓库功能推送到 github 与 coding，这样每次写完文章，合并到 master 分支即可

1. 使用 GitHub 的 Pages 服务并配置域名，需要添加 CNAME 文件，为了自动部署，直接新建 source/CNAME 文件，并在里面填写 www.wdmcheng.cn
2. 如果要使用 HTTPS，要先解析到 Coding 的服务，然后开启 Coding Pages 的 HTTPS 功能，待申请下来证书后，再添加国外 IP 解析到 GitHub，最后再申请 GitHub Pages 的 HTTPS
3. 三个月证书到期需要续期时，需要先暂停国外 IP 解析，Coding 续期完成再开启
4. 自动化部署的工作流配置，参考 GitLab Pages examples 和 NexT 主题官网，我这里采用的是 SSH 方式部署的，附上我的 .gitlab-ci.yml 文件

   # This file is a template, and might need editing before it works on your project.
   # Full project: https://gitlab.com/pages/hexo
   image: node:10.15.3
   
   before_script:
   - export TZ='Asia/Shanghai'
   - git config --global user.name "wdmcheng"
   - git config --global user.email "[email protected]"
   # Restore last modified time
   - "git ls-files -z | while read -d '' path; do touch -d \"$(git log -1 --format=\"@%ct\" \"$path\")\" \"$path\"; done"
   # Install ssh-agent if not already installed, it is required by Docker.
   # (change apt-get to yum if you use a CentOS-based image)
   - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
   # Run ssh-agent (inside the build environment)
   - eval $(ssh-agent -s)
   # Add the SSH key stored in SSH_PRIVATE_KEY variable to the agent store
   - ssh-add <(echo "$DEPLOY_PRIVATE_KEY")
   # For Docker builds disable host key checking. Be aware that by adding that
   # you are suspectible to man-in-the-middle attacks.
   # WARNING: Use this only with the Docker executor, if you use it with shell
   # you will overwrite your user's SSH config.
   - mkdir -p ~/.ssh
   - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
   # In order to properly check the server's host key, assuming you created the
   # SSH_SERVER_HOSTKEYS variable previously, uncomment the following two lines
   # instead.
   # - mkdir -p ~/.ssh
   # - '[[ -f /.dockerenv ]] && echo "$SSH_SERVER_HOSTKEYS" > ~/.ssh/known_hosts'
   - apt-get update -qq && apt-get install -y -qq pandoc
   
   cache:
     paths:
     - node_modules/
     - .deploy_git/
     - source/leancloud.memo
   
   pages:
     script:
     - npm install hexo-cli yarn gulp@^4.0.0 -g
     - test -e package.json && yarn install
     - hexo clean && hexo generate
     - gulp
     - hexo deploy
     artifacts:
       paths:
       - public
     only:
     - master

致谢

• 遇见西门的博文【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析
• my_杨哥的简书文章Hexo的Next主题详细配置
• LEAFERx 的博文 Leancloud访客统计插件重大安全漏洞修复指南
• hoxis 的博文 hexo next 配置 DaoVoice 实现在线聊天功能及 hexo next 新增阅读排行页面