完全免费搭建个人博客系列笔记(三)

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

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

next主题添加gitalk

准备

在使用gitalk作为评论系统之前,需要在github上注册新的应用; 注册GitHub应用链接
按如下描述填写:

github注册应用

填写完成后,点击绿色按钮,跳转到一下页面,
可以看到<code>Client ID</code>和<code>Client Secret</code>,后面会用到。
github注册应用保存后跳转的页面

在项目目录下执行如下命令<code>npm install gitalk --save</code> 安装<code>gitalk</code>;

修改的内容

新建<code>gitalk.swig</code>;

路径<code>themes/next/layout/_third-party/comments/gitalk.swig</code>,内容如下:

{% 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 %}

修改<code>comments.swig</code>

路径<code>themes/next/layout/_partials/comments.swig</code>,在最后一个<code>div</code>里面加上如下内容:

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

修改<code>index.swig</code>

路径<code>themes/next/layout/_third-party/comments/index.swig</code>,在最后一行加上如下内容:

{% include 'gitalk.swig' %}

新建<code>gitalk.styl</code>

路径<code>themes/next/source/css/_common/components/third-party/gitalk.styl</code>,内容如下:

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

修改<code>third-party.styl</code>

路径<code>themes/next/source/css/_common/components/third-party/gitalk.styl</code>,在最后一行加上如下内容:

@import "gitalk";

修改文件<code>_config.yml</code>

路径<code>themes/next/_config.yml</code>,注意是主题的配置文件,增加内容如下:

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 + 七牛云

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

准备

安装七牛云插件

  • 安装插件:<code>qiniu-upload-image</code>
  • 文件>首选项>设置,在右侧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。
测试是否安装成功。使用命令<code>hexo s</code>本地预览。
本地预览:[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/
添加网站之后,需要验证,验证方式有<code>文件验证</code>、<code>HTML标签验证</code>、<code>CNAME验证</code>。
网上的例子:使用<code>文件验证</code>进行验证。

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

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

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

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

或者在 <code>themes/next/_config.yml</code> 添加或者修改,注意格式

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

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

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

新建<code>robots.txt</code>文件,添加以下文件内容,把<code>robots.txt</code>放在的<code>source</code>文件下。
文件内容:

# 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

在项目根目录的 <code>_config.yml</code>添加内容:

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

使用<code>hexo g -d</code>生成并部署。
使用方法:邮件中【新建订阅】,我的订阅地址为: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

推荐阅读更多精彩内容