hexo 部署优化配置

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

安装教程

安装git

安装nodejs

寻找一个目录执行

1
2
3
4
5
npm install -g hexo-cli
hexo init blog
cd blog
npm install
hexo server

localhost:4000访问地址

切换主题

theme目录下执行

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

修改_config.yml

1
theme: hexo-theme-next

修改默认语言

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

1
language: zh-Hans

部署

修改_config.yml

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

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

1
2
3
4
5
6
deploy:
type: git
repo:
github: git@github.com:xx.github.io.git
coding: git@git.coding.net:xx.git
branch: master

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

1
2
3
4
hexo clean
hexo generate
npm install --save hexo-deployer-git
hexo deploy

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

修改_config.yml

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

_config.yml配置README.md

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

1
skip_render: README.md

配置教程

配置菜单

添加关于页面

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

1
2
3
4
5
6
7
8
9
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 新建分类页,默认是没有的需要手动创建
文章需要增加所属分类

1
2
3
4
5
---
title: 分类测试
categories:
- hexo (这个就是文章的分类了)
---

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

1
2
3
4
5
6
---
title: categories
date: 2019-01-18 19:18:56
type: categories
comments: false
---

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

1
2
3
4
5
6
7
8
9
10
# Category & Tag
default_category: uncategorized
category_map:
工具: tool
操作系统: os
数据库: db
WEB技术: web
设计: design
tag_map:
规范: norm

发表文章

hexo new "HELLOTEST"

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

1
2
3
4
5
6
7
8
9
10
---
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执行下面命令

1
npm install hexo-generator-searchdb --save

修改站点配置

博客下的_config.yml文件

1
2
3
4
5
6
# Search
search:
path: search.xml
field: post
format: html
limit: 10000

修改主题配置

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

1
2
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)
  • 这个方式开发工具不能实时预览图片

优化

增加github链接

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

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

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

1
2
3
4
5
6
7
8
9
10
11
# 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开启分享

1
2
needmoreshare2:
enable: true

首页是否使用description

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

post.swing

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

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

源码open_graph.js:

1
2
3
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>

1
2
3
{% 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修改

1
2
3
4
5
6
7
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配置指定路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
    1
    keywords:

生成站点地图

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

_config.yml中添加以下代码

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

_config.yml中添修改以下代码

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

1
2
3
hexo g
hexo s
hexo d

添加robots.txt

1
2
3
4
5
6
7
8
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/目录下

站点建立时间

1
since: 2019

增加访问人数

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

    1
    2
    <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修改路径

    1
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  2. 修改themes/你的主题/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 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添加下面脚本即可

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

增加百度统计

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

    1
    2
    # Baidu Analytics ID
    baidu_analytics: 89ba4974f6dcb8c89546afef1040xxx
  • 在”代码管理”下”代码安装检查”进行检查

增加gitment评论

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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可以直接修改访问域名就行。

    1
    <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文件,并添加内容:

    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 %}
  2. comments.swig 修改themes/hexo-theme-next/layout/_partials/comments.swig,添加内容如下,与前面的elseif同一级别

    1
    2
    {% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>
  3. index.swig 修改themes/hexo-theme-next/layout/_third-party/comments/index.swig,在最后一行添加内容

    1
    {% include 'gitalk.swig' %}
  4. gitalk.styl 新建themes/hexo-theme-next/source/css/_common/components/third-party/gitalk.styl文件,添加内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .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,在最后一行上添加内容,引入样式

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

    1
    2
    3
    4
    5
    6
    7
    8
    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分支

    1
    2
    3
    git add .
    git commit -m 'back up hexo files'
    git push origin hexo
  • 确认是不是文件都提交上去了,比如theme

  • 启动项目

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

异地更新

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

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

    1
    git clone https://github.com/username/username.github.io.git
  • 或者如果使用的是coding

    1
    git clone https://git.dev.tencent.com/username/username.git
  • 执行

    1
    2
    3
    4
    5
    6
    7
    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

1
2
3
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,把有特殊字符的地方用代码块代替

1
{{}},{% %},%s=#{%s}

参考