hexo 部署优化配置

hexo 部署教程与页面配置参数优化、SEO优化

安装教程

安装git

安装nodejs

选用12.13.0版本
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装cnpm 速度比较快

寻找一个目录执行

npm install -g hexo-cli
hexo init blog
cd blog
npm install
hexo server

localhost:4000访问地址

切换主题

在theme目录下执行

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

修改_config.yml

theme: hexo-theme-next

修改默认语言

修改_config.yml,设置language: zh-Hans

language: zh-Hans

部署

修改_config.yml

deploy:
  type: git
  # repository: https://github.com/xxx.com.git
  repository: #远程仓库，需要注册完GITLAB或者GITHUB或者CODING，然后新建一个项目。
  branch: master  #自己的分支名称。

多个仓库同时发布使用下面配置

deploy:
  type: git
  repo: 
    github: git@github.com:xx.github.io.git
    coding: git@git.coding.net:xx.git
  branch: master

执行下面命令，注意需要在git bash控制台下执行，不然会提示识别不到git相关配置

hexo clean
hexo generate
npm install --save hexo-deployer-git
hexo deploy

部署过程中会提示输入账户密码或者根据git教程配置SSH key，完成部署

修改_config.yml

url:    #GITLAB给我们生成的域名,或者自己的网址
root: /    #域名的根目录，其实就是我们的项目名称

_config.yml配置README.md

找到skip_render，并添加README.md,跳过README.md渲染

skip_render: README.md

配置教程

配置菜单

添加关于页面

themes/<theme_name>/_config.yml里面的menu一项修改成需要的内容，注意路径

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

添加分类标签

使用 hexo new page categories 新建分类页，默认是没有的需要手动创建
文章需要增加所属分类

---
title: 分类测试
categories:
- hexo                       （这个就是文章的分类了）
---

修改/categories/index.md文件，增加type: categories配置

---
title: categories
date: 2019-01-18 19:18:56
type: categories
comments: false
---

配置_config.yml优化（可解决中文分类路径在百度云虚拟机乱码问题）

# Category & Tag
default_category: uncategorized
category_map:
  工具: tool
  操作系统: os
  数据库: db
  WEB技术: web
  设计: design
tag_map:
  规范: norm

发表文章

hexo new "HELLOTEST"

打开HELLOTEST.md文件,输入下面内容

---
title: 文章1
subtitle:  test2
date: 2018-03-21 12:01:19
categories: blog
tags: [文章] #文章标签，多于一项时用这种格式，只有一项时使用tags: blog。也可以逗号分隔
description:  "test<br>test2"
---
这里是正文，用markdown写，你可以选择写一段显示在首页的简介后，加上
<!--more-->，在<!--more-->之前的内容会显示在首页，之后的内容会被隐藏，需要点击Read more才能看到。

执行hexo g

执行hexo w

增加搜素功能

安装插件

在博客目录下点击鼠标右键选择Git Bash Here执行下面命令

npm install hexo-generator-searchdb --save

修改站点配置

博客下的_config.yml文件

# Search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置

修改themes/hexo-theme-next/_config.yml文件

local_search:
  enable: true

添加本地图片

方案1：

• 修改配置文件_config.yml 里的post_asset_folder:这个选项设置为true
• hexo目录下执行npm install hexo-asset-image --save
• 通过hexo n "fff"生成博客时，/source/_posts会出现同名文件夹
• 把图片文件放入fff文件夹,通过markdown引用![](fff/图片名.jpg)

方案2（我用的方案）：

• 在source目录创建存放图片的文件夹assets
• 把图片文件放入assets文件夹,通过markdown引用![](assets/图片名.jpg)
• 这个方式开发工具不能实时预览图片

但是这个插件的内容需要修改不然可能出现拼接的路径会多拼接一个层级,打开/node_modules/hexo-asset-image/index.js，将内容更换为下面的代码

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
      src = '//'+src; // 添加/ -------------------------重要
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

优化

增加github链接

点击这里或者这里挑选自己喜欢的样式，并复制代码然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中
(放在<div class="headband"></div>的下面)，并把href改为你的github地址

隐藏网页底部powered By Hexo / 强力驱动

到主题配置文件分别配置theme/_config.yml

# If not defined, will be used `author` from Hexo main config.
 copyright:
 # -------------------------------------------------------------
 # Hexo link (Powered by Hexo).
 powered: false

 theme:
   # Theme & scheme info link (Theme - NexT.scheme).
   enable: false
   # Version info of NexT after scheme info (vX.X.X).
   version: false

增加分享功能

到主题配置文件分别配置theme/_config.yml开启分享

needmoreshare2:
  enable: true

首页是否使用description

# Automatically excerpt description in homepage as preamble text.
excerpt_description: false

post.swing

{% if post.description and (not theme.excerpt_description or not is_index) %}
    <div class="post-description">
        {{ post.description }}
    </div>
{% endif %}

<meta itemprop="description" content="{{ theme.signature }}">

源码open_graph.js:

let description = options.description || page.description || page.excerpt || content || config.description;
……
description = stripHTML(description).substring(0, 200)

通过源码可知没有设置description的话还会获取<!-- more -->分割的excerpt摘要设置成描述,可以直接修改源码文件为150，由于在node_modules目录下是没有提交git服务器的，所以每个环境要单独配置。

修改文章底部的#标签

打开themes/hexo-theme-next/layout/_macro/下的post.swig文件,搜索rel="tag">#,将 # 换成<i class="fa fa-tag"></i>

{% for tag in post.tags %}
  <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}

设置网站图标Favicon

ico图标尺寸 32*32，上网下载或者自己制作，并将图标名称改为favicon.png,themes/hexo-theme-next/images修改

favicon:
  #small: /images/favicon-16x16-next.png
  #medium: /images/favicon-32x32-next.png
  small: /images/favicon.png
  medium: /images/favicon.png
  apple_touch_icon: /images/favicon.png
  safari_pinned_tab: /images/favicon.png

可以通过在线PS制作图标

SEO优化

• 路径使用英文
• 路径不使用/年月/日这种形式， 通过permalink配置指定路径

Hexo - 修改永久链接的默认格式
npm install hexo-abbrlink --save
# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
不过这样做是要求title不能重复
可以直接
url: http://你的网站
root: /
permalink: :title.html
permalink_defaults:

• 修改主题_config.yml,清空keyworkds内容避免首页出现两个keywords

  keywords: 

生成站点地图

npm install hexo-generator-sitemap --save #sitemap.xml 提交给谷歌搜素引擎
npm install hexo-generator-baidu-sitemap --save #baidusitemap.xml 提交百度搜索引擎

_config.yml中添加以下代码

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

_config.yml中添修改以下代码

url: 配置上自己的网站地址

hexo g
hexo s
hexo d

添加robots.txt

User-agent: *
Allow: /
Allow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /lib/
Sitemap: http://www.infotech.vip/sitemap.xml
Sitemap: http://www.infotech.vip/baidusitemap.xml

放在/source/目录下

站点建立时间

since: 2019

增加访问人数

1. themes/你的主题/layout/_partials/footer.swing添加下面脚本即可

   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
   </script>

   如果存在：themes\hexo-theme-next\layout\_third-party\analytics\busuanzi-counter.swig修改路径

   <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2. 修改themes/你的主题/_config.yml

   # Show PV/UV of the website/page with busuanzi.
   # Get more information on http://ibruce.info/2015/04/04/busuanzi/
   busuanzi_count:
     # count values only if the other configs are false
     enable: true
     # custom uv span for the whole site
     site_uv: true
     site_uv_header: 访客数
     site_uv_footer: 人
     # custom pv span for the whole site
     site_pv: true
     site_pv_header: 总访问量
     site_pv_footer: 次
     # custom pv span for one page only
     page_pv: true
     page_pv_header: <i class="fa fa-file-o"></i>  阅读数
     page_pv_footer:

   增加备案信息

themes/你的主题/layout/_partials/footer.swing添加下面脚本即可

<div class="theme-link">
  <a href="http://beian.miit.gov.cn/">闽ICP备19002424号-1</a>
  </a>
</div>

增加百度统计

• 注册百度统计账户
• 在”代码管理”下面”获取代码”，hm.src = "https://hm.baidu.com/hm.js?89ba4974f6dcb8c89546afef1040xxx"; 复制问号后面的编码
• 黏贴到themes/hexo-theme-next/_confing.xml

  # Baidu Analytics ID
  baidu_analytics: 89ba4974f6dcb8c89546afef1040xxx

• 在”代码管理”下”代码安装检查”进行检查

增加gitment评论

1. 注册 OAuth Application,home url、callback url都使用自己网站的域名。得到一个 client ID 和一个 client secret。
2. github新建一个Application name同名仓库
3. 修改themes→hexo-theme-next下_config.yml

   gitment:
     enable: true
     mint: false # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
     count: true # Show comments count in post meta area
     lazy: false # Comments lazy loading with a button
     cleanly: false # Hide 'Powered by ...' on footer, and more
     language: # Force language, or auto switch by theme
     github_user: xxx # MUST HAVE, github用户名
     github_repo: xxx # MUST HAVE, 只需仓库名，就是前面新建的仓库名
     client_id: xxxxx # MUST HAVE, Github client id for the Gitment
     client_secret: xxxxx # EITHER this or proxy_gateway, Github access secret token for the Gitment
     proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
     redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

4. 本地安装gitment npm i --save gitment
5. Object ProgressEvent问题解决，修改gitment.swig。作者的服务器到期了，也可以自己搭建一个服务器,或者使用其他人提供的，直接访问会有跨域问题。如果是使用gitpage可以直接修改访问域名就行。

   <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>

   替换成自己的

增加gitalk评论

1. gitalk.swig 新建themes/hexo-theme-next/layout/_third-party/comments/gitalk.swig文件，并添加内容：

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

2. comments.swig 修改themes/hexo-theme-next/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别

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

3. index.swig 修改themes/hexo-theme-next/layout/_third-party/comments/index.swig，在最后一行添加内容

   {% include 'gitalk.swig' %}

4. gitalk.styl 新建themes/hexo-theme-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;
   
   .gt-container
     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
     background: #fff;
     border: 20px;
     padding: 40px;

5. third-party.styl 修改themes/hexo-theme-next/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式

   @import "gitalk";

6. _config.yml 在主题配置文件themes/hexo-theme-next/_config.yml中添加如下内容

   gitalk:
     enable: true
     githubID: github帐号 
     repo: 仓库名称
     ClientID: Client ID
     ClientSecret: Client Secret
     adminUser: github帐号 #指定可初始化评论的账户
     distractionFreeMode: true

提交搜索引擎

• 百度网站管理注册账号进行网站验证，链接提交
• 谷歌网站管理注册账号进行网站验证，链接提交
• 必应网站管理注册账号进行网站验证，链接提交

Coding太不稳定更新竟然挂了

Coding太不稳定所以迁移到百度云，使用云虚拟主机BCH价格也不贵，还有体验价格，

• 百度云入口

Hexo+github/Coding个人博客搭建+异地管理

1.在原先的主仓库，新建hexo分支

2.设置默认分支为hexo

3.clone到本地

• 在本地原先的blog目录同级再建立一个hexo目录

• 进入目录克隆github或者coding项目执行git clone https://github.com/username/username.github.io.git

• 查看当前分支git branch

• 把原先blog文件夹里面的md文件与各种资源文件拷贝进clone下来的username.github.io.git仓库，.deploy_git,.git,node_models这三个目录不用拷贝

• 进入username.github.io.git文件目录，代码提交到hexo分支

  git add .
  git commit -m 'back up hexo files'
  git push origin hexo

• 确认是不是文件都提交上去了，比如theme

• 启动项目

  npm install (由于仓库默认忽略掉了node_models)
  写博客
  hexo g
  hexo s
  hexo d
  就可以看到自己网站的内容跟本地的同步更新了

异地更新

也是类似上面，把hexo clone到本地进行修改，部署。 每次换电脑进行博客更新时，不管上次在其他电脑有没有更新，最好先git pull

• 新建文件夹进入文件夹执行打开git bash执行命令

  git clone https://github.com/username/username.github.io.git

• 或者如果使用的是coding

  git clone https://git.dev.tencent.com/username/username.git

• 执行

  npm install hexo --save
  npm install hexo-generator-sitemap --save
  npm install hexo-generator-baidu-sitemap --save 
  npm install hexo-generator-searchdb --save
  cnpm i --save gitment
  hexo g
  hexo s

使用过程中遇到问题

hexo g报如下错误Template render error

Template render error: (unknown path) [Line 65, Column 170]
  unknown block tag: s
    at Object._prettifyError (D:\WorkSpace\Nodejs\myBlog\hexo\JasonZero\node_modules\nunjucks\src\lib.js:36:11)

解决方法：可能是.md文档出现了特殊字符，可以删除掉最近写的文档进行定位。注意以后每次写文档，写完之后都进行一次hexo g,把有特殊字符的地方用代码块代替

{{}}，{% %},%s=#{%s}

hexo5.0需要手动安装

hexo使用theme出现 {% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/side 问题解决

npm i hexo-renderer-swig

日志、归档等链接无法打开

<!--去掉sidebar.swing url_for()，会把空格与双竖线转义了-->
<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">  
  
<a href="{{ theme.menu.archives.split('||')[0] | trim }}">

<!--header.swing url_for()，会把空格与双竖线转义了-->
<a href="{{ url_for(path.split('||')[0]) | trim }}" rel="section">

<a href="{{ path.split('||')[0] | trim }}" rel="section">

highlight.js@9.18.5 postinstall，Verion 9 of Highlight.js has reached EOL.

hexo已实现代码高亮,代码封装在hexo-util插件中,使用的是hightlight.js，hexo包含hexo-util所以要升级hexo版本,hexo-renderer-marked也有用到hexo-util，hexo-generator-baidu-sitemap用到的ejs也用到hightlight.js版本太低

• 或者升级相关联的依赖包，删除node_modules目录下文件，修改package.json依赖配置，重新npm install可能还会报错再，其他包也用到了该功能也需要升级：

"dependencies": {
  "hexo": "5.2.0"
}

其他单独安装的语句例子：

npm install ejs # 安装最新版本
npm install ejs@3.1.5 
npm install hexo-util --save --ignore-scripts

新版本分页标签被转义

pagination.swig中prev_text: '<i class="fa fa-angle-left"></i>',直接修改成prev_text: '<',

内部链接无法跳转

修改post-details.js,一般无法调整都是乱码导致的，对url地址进行解码后就可以识别了。

var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
var targetSelector = NexT.utils.escapeSelector(decodeURI(this.getAttribute('href'))); // 修改成

图片路径

需要/开头这样首页分页后路径不会对应错

参考

• NexT主题配置
• 依赖包查询网站