完全免费搭建个人博客系列笔记（三）

使用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，内容如下：

{% if page.comments && theme.gitalk.enable %}
  
  
   
{% endif %}

修改`comments.swig`

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

{% elseif theme.gitalk.enable %}

修改`index.swig`

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

{% include 'gitalk.swig' %}

新建`gitalk.styl`

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

.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，在最后一行加上如下内容：

@import "gitalk";

修改文件`_config.yml`

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

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作为评论系统的时候，参考了以下文章，特此添加链接，表示感谢：

hexo 博客next主题集成gitment或者gitalk评论系统
hexo next主题深度优化(五)，评论系统换成gittalk

vscode + 七牛云

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

准备

下载vscode，这儿是下载链接
七牛云，传送门

安装七牛云插件

安装插件：qiniu-upload-image
文件>首选项>设置，在右侧setting.json填写自己的配置覆盖默认配置。配置文件如下，使用的配置是七牛云里面的【密钥管理】：

{
    // 一个有效的七牛 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 输入命令：

ext install qiniu-upload-image

完成

Hexo Next 主题SEO优化

SEO ？

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

针对百度搜索引擎的优化

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

安装两个插件

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标签为站长工具里面给出的标签。

{% if theme.baidu_site_verification %}
  
{% endif %}

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

# 百度搜索引擎优化
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文件下。
文件内容：

# 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

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

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

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

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

Hexo添加RSS订阅

安装feed插件

npm install hexo-generator-feed

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

# Extensions
plugins:
    hexo-generator-feed
feed:                       # 实现博客订阅功能
  type: atom
  path: atom.xml
  limit: 20

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

Hexo添加RSS订阅

完成

相关文章
完全免费搭建个人博客系列笔记（一）
完全免费搭建个人博客系列教程（二）

欢迎关注微信公众号weyoung，记录学习笔记和一些有趣的东西，欢迎交流~~

个人微信公众号weyoung

更多联系方式

平台	链接
个人博客	https://www.wanglixia.top/
预览项目：	https://nelucifer.gitee.io/
个人微信公众号：	weyoung
segmentfault:	https://segmentfault.com/u/nelucifer
CSDN:	https://me.csdn.net/wlx001
：	https://www.jianshu.com/u/99211cc23788
掘金：	https://juejin.im/user/59b08c575188250f4850e80e

完全免费搭建个人博客系列笔记（三）

next主题添加gitalk

准备

修改的内容

新建gitalk.swig；

修改comments.swig

修改index.swig

新建gitalk.styl

修改third-party.styl

修改文件_config.yml

参考文章

vscode + 七牛云

准备

安装七牛云插件

使用快捷键

安装插件

完成

Hexo Next 主题SEO优化

SEO ？

针对百度搜索引擎的优化

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

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

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

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

Hexo添加RSS订阅

安装feed插件

你可能感兴趣的:(完全免费搭建个人博客系列笔记（三）)

新建`gitalk.swig`；

修改`comments.swig`

修改`index.swig`

新建`gitalk.styl`

修改`third-party.styl`

修改文件`_config.yml`