记使用hexo搭建个人博客（三）

  使用hexo+next+github/coding+gitalk添加博客评论系统,以及hexo+next+码云+issue，这里使用的是next主题，如有问题，可以在博客下方评论。本文内容如下：

  • 使用gitalk为博客添加评论功能、
  • vscode 使用七牛云做图床、
  • Hexo Next主题SEO优化、
  • Hexo 添加RSS订阅

next主题添加gitalk

准备

在使用gitalk作为评论系统之前，需要在github上注册新的应用； 注册GitHub应用链接。
按如下描述填写:
github注册应用
填写完成后，点击绿色按钮，跳转到一下页面，
可以看到Client ID和Client Secret，后面会用到。
github注册应用保存后跳转的页面
在项目目录下执行如下命令npm install gitalk --save 安装gitalk；

修改的内容

新建gitalk.swig；

路径themes/next/layout/_third-party/comments/gitalk.swig，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
       </script>
{% endif %}

修改comments.swig

路径themes/next/layout/_partials/comments.swig，在最后一个div里面加上如下内容：

1
2
{% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>

修改index.swig

路径themes/next/layout/_third-party/comments/index.swig，在最后一行加上如下内容：

1
{% include 'gitalk.swig' %}

新建gitalk.styl

路径themes/next/source/css/_common/components/third-party/gitalk.styl，内容如下：

1
2
3
4
.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

修改third-party.styl

路径themes/next/source/css/_common/components/third-party/gitalk.styl，在最后一行加上如下内容：

1
@import "gitalk";

修改文件_config.yml

路径themes/next/_config.yml，注意是主题的配置文件，增加内容如下：

1
2
3
4
5
6
7
8
9
10
gitalk:
  enable: true
  githubID: nelucifer  # 例：nelucifer
  repo: nelucifer.github.io   # 存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名） 例：nelucifer.github.io 
  ClientID: 这块填注册Github应用成功之后的ClientID
  ClientSecret: 注册Github应用成功之后的ClientSecret
  #owner: 'Github 用户名',
  adminUser: ['nelucifer'] #指定可初始化评论账户，Github仓库的管理员，可以有多个
  distractionFreeMode: true
  #id: 'window.location.pathname' #页面的唯一标识，gitalk根据这个标识自动创建的issue的标签,此处使用页面的相对路径作为标识

参考文章

  在使用gitalk作为评论系统的时候，参考了以下文章，特此添加链接，表示感谢：

vscode + 七牛云

现在使用七牛云做图床需要已经备案的域名，测试域名不能用啦。

准备

安装七牛云插件

  • 安装插件：qiniu-upload-image
  • 文件>首选项>设置，在右侧setting.json填写自己的配置覆盖默认配置。配置文件如下，使用的配置是七牛云里面的【密钥管理】：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
        // 一个有效的七牛 AccessKey 签名授权。
      "qiniu.access_key": "密钥管理里面的AK",

      // 七牛图片上传空间。
      "qiniu.bucket": "weyoung-pub",

      // 七牛图床域名。
      "qiniu.domain": "自己配置的图床域名，使用二级域名就行",

      // 七牛图片上传工具开关
      "qiniu.enable": true,

      // 七牛图片上传路径，参数化命名。
      "qiniu.remotePath": "${fileName}-${dateTime}",

      // 一个有效的七牛 SecretKey 签名授权。
      "qiniu.secret_key": "密钥管理里面的SK",
      "files.autoSave": "afterDelay",
      "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    }

使用快捷键

粘贴图片路径上传：SHIFT + P
直接选择图片上传：SHIFT + O

安装插件

Ctrl+P 输入命令：

1
ext install qiniu-upload-image

完成

Hexo Next 主题SEO优化

SEO ？

汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

针对百度搜索引擎的优化

1. 添加百度sitemap，生成sitemap文件

安装两个插件

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

上面的是传统的sitemap，下面的是百度专有的sitemap。
测试是否安装成功。使用命令hexo s本地预览。
本地预览：[http://localhost:4000/sitemap.xml]http://localhost:4000/sitemap.xml 和 [http://localhost:4000/baidusitemap.xml]http://localhost:4000/baidusitemap.xml 显示sitemap文件内容。

2. 注册百度搜索资源工具

地址：https://ziyuan.baidu.com/
添加网站之后，需要验证，验证方式有文件验证、HTML标签验证、CNAME验证。
网上的例子：使用文件验证进行验证。

  • 下载验证文件，放到博客项目的source文件夹下，使用hexo g -d，部署到自己的网站上；
  • 部署之后，在站长工具页面点击验证，能够访问证明验证成功；
  • 然后点击【完成验证】按钮，为保持验证通过的状态,成功验证后请不要删除HTML文件。

我使用这个验证失败，hexo会为文件加上一些样式，验证好几次验证不通过

使用HTML标签验证进行验证。我使用的是Hexo + NexT。

  • 在themes/next/layout/_partials/head.swig文件中，修改meta标签为站长工具里面给出的标签。
    1
    2
    3
    {% if theme.baidu_site_verification %}
      <meta name="baidu-site-verification" content="这块修改" />
    {% endif %}

或者在 themes/next/_config.yml 添加或者修改，注意格式

1
2
# 百度搜索引擎优化
baidu_site_verification: 站长工具里面给出的标签
  • 在themes/next/_config.yml中将seo: false 改为true
  • 使用hexo g -d，部署到自己的网站上，如果不清楚部署的可以看前两篇文章；
  • 然后点击【完成验证】按钮，等待百度的审核结果

3. 添加robots，方便搜索蜘蛛进行检索

  百度百科：robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

新建robots.txt文件，添加以下文件内容，把robots.txt放在的source文件下。
文件内容：

1
2
3
4
5
6
7
8
9
10
11
# hexo robots.txt
User-agent: * Allow: /
Allow: /archives/
Allow: /about/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /images/

Sitemap: http://www.wanglixia.top/sitemap.xml
Sitemap: http://www.wanglixia.top/baidusitemap.xml

在百度站长工具-【链接提交】中填写数据文件地址并提交。

4. 优化结构

这个我不懂，参考资料: 作者：浪子燕青啦啦啦 HEXO SEO 高级优化
seo搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就可以到达任何一个页面，但是我们使用hexo编译的站点打开文章的url是：sitename/year/mounth/day/title四层的结构，这样的url结构很不利于seo，爬虫就会经常爬不到我们的文章，于是，我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根目录的配置文件下修改permalink如下：

1
2
3
4
5
6
7
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.wanglixia.top/  #你的域名
root: /
#permalink: :year/:month/:day/:title/  为了利于SEO，改为以下方式
permalink: :title.html
permalink_defaults:

首页标题优化，SEO最重要的是你的标题，一般搜索都是搜索你的标题，更改index.swig文件(your-hexo-site\themes\next\layout);

您的站点有链接未通过https检验

因为一直使用的是http，百度验证需要使用https。我是使用coding+github双线部署的；

  • coding 设置强制https访问
    打开项目，【代码】->【Pages服务】->【强制 HTTPS 访问】

  • github 设置强制https访问
    打开项目，【setting】->【Enforce HTTPS】的勾打上；
    完成；访问一下，看下有没有变化啦！

Hexo添加RSS订阅

安装feed插件

1
npm install hexo-generator-feed

在项目根目录的_config.yml添加内容：

1
2
3
4
5
6
7
# Extensions
plugins:
    hexo-generator-feed
feed:                       # 实现博客订阅功能
  type: atom
  path: atom.xml
  limit: 20

使用hexo g -d生成并部署。
使用方法：邮件中【新建订阅】，我的订阅地址为：https://www.wanglixia.top/atom.xml，如图：
hexo-coding-github-3-添加RSS订阅-201911123752

完成