张登友,张登友的博客,张登友的网站——
部署插件
Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。
hexo deploy
开始之前,您必须先在 _config.yml 中修改参数,一个正确的部署配置中至少要有 type 参数,例如:
单个地址
deploy:
type: git
同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。
deploy:
- type: git
repo:
- type: heroku
repo:
缩进
YAML依靠缩进来确定元素间的从属关系。因此,请确保每个deployer的缩进长度相同,并且使用空格缩进。
1.安装 hexo-deployer-git。
npm install hexo-deployer-git --save
2.修改配置。
deploy:
type: git
repo: <repository url> #https://github.com/libaiddd/zdy.github.io
branch: [branch]
message: [message]
参数 | 描述 |
---|---|
repo | 库(Repository)地址 |
branch | 分支名称 |
message | 自定义提交信息 |
repo值通常为https://github.com/libaiddd/zdy.github.io
message为:
Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
3.生成站点文件并推送至远程库。执行 hexo clean && hexo deploy
。
4.登录 Github/BitBucket/Gitlab,请在库设置(Repository Settings)中将默认分支设置为_config.yml配置中的分支名称。稍等片刻,您的站点就会显示在您的Github Pages中。
hexo 本地预览图片修复插件
hexo-asset-image-fix
从hexo-asset-image Fork,修复了图像路径未使用hexo配置中的根路径的问题。自动为hexo中的资产图片提供绝对路径
使用方法
npm install hexo-asset-image --save
或者
npm install hexo-asset-image-fix --save
hexo5.0以上版本搭配某些主题(比如Butterfly)可能需要修改hexo根目录的_config.yml,否则生成图片的绝对引用链接始终不正确
post_asset_folder: true #必须修改的一项
marked: #此项为手动添加
prependRoot: true
postAsset: true
代码高亮
hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:
npm i -S hexo-prism-plugin
然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow' #主题选项
line_number: false # default false
custom_css:
可用的主题有
coy,dark,funky,okaidia,solarizedlight,tomorrow,twilight,a11y-dark,atom-dark,base16-ateliersulphurpool.light,cb,darcula,dracula,duotone-dark,duotone-earth,duotone-forest,duotone-light,duotone-sea,duotone-space,ghcolors,hopscotch,material-dark,material-light,material-oceanic,pojoaque,shades-of-purple,synthwave84,vs,xonokai,default,
搜索插件
hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:
npm install hexo-generator-search --save
中文链接转拼音
如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注:除了此插件外,hexo-abbrlink插件也可以生成非中文的链接。
文章字数统计插件
在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。
安装命令如下:
npm i --save hexo-wordcount
然后在主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可:
postInfo:
date: true
update: false
wordCount: false # 设置文章字数统计为 true.
totalCount: false # 设置站点文章总字数统计为 true.
min2read: false # 阅读时长.
readCount: false # 阅读次数.
添加emoji表情支持
本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如::smile:)转变成会跳跃的emoji表情,安装命令如下:
npm install hexo-filter-github-emojis --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
添加 RSS 订阅支持
(暂未使用过这个插件,但是还是写上,万一用上了呢)
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。
生成网站地图
我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎
安装sitemap插件如下:
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
修改博客配置文件
在根目录配置文件.yml中修改url为你的站点地址
# URL
# If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://www.zdyn.cn/
url: https://www.zdynb.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
执行完hexo g命令之后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件,可以通过:https://www.zdynb.cn/baidusitemap.xml, 查看该文件是否生成,其中sitemap.xml文件是搜索引擎通用的文件,baidusitemap.xml是百度专用的sitemap文件。
设置主动推送
安装插件hexo-baidu-url-submit
npm install hexo-baidu-url-submit --save
然后再根目录的配置文件中新增字段
baidu_url_submit:
count: 80 # 提交最新链接数量
host: www.zdynb.cn # 在百度站长平台中注册的域名
token: xxxxxxxxxxxxxx # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里
设置自动推送
在主题配置文件下设置,将baidu_push设置为true:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
然后主题文件目录加入下面代码,一般在目录/themes/matery/layout/_partial中的head.ejs中加入下面JS代码(有可能你的目录不是这样,原理类似),这样全站都有了:
<% if (theme.baidu_push) { %>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<% } %>
题外话(有点偏题了,哈哈)
提交 robots.txt:
robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件,它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的,哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中,博客生成后在站点目录 /public/ 下。
我的 robots.txt 文件内容如下:
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
robots.txt 文件更新至网站后可进入 Google Search Console - 抓取 - robots.txt 测试工具进行测试。
优化hexo的url
SEO搜索引擎优化认为,网站的最佳结构是用户从首页点击三次就可以到达任何一个页面,但是我们使用hexo编译的站点打开文章的url是:sitename/year/mounth/day/title四层的结构,这样的url结构很不利于seo,爬虫就会经常爬不到我们的文章,于是,我们需要优化一下网站文章url
方案一:
我们可以将url直接改成sitename/title的形式,并且title最好是用英文,在根目录的配置文件下修改permalink如下:
url: https://www.zdyn.cn
root: /
permalink: :title.html
permalink_defaults:
方案二:
使用插件优化url
插件hexo-abbrlink实现了这个功能,它将原来的URL地址重新进行了进制转换和再编码。
安装hexo-abbrlink:
npm install hexo-abbrlink --save
配置博客根目录下的_config.yml文件:
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
hexo-filter-nofollow - Hexo 官方的 nofollow 插件
hexo-filter-nofollow 是一个自动为 Hexo 博客中的外链添加 rel=”external nofollow noreferrer” 的插件。
使用npm安装
npm i hexo-filter-nofollow --save
如果你使用 yarn 作为你的 Hexo 的包管理器,你也可以使用下述命令:
使用yarn安装,yarn安装教程
yarn add hexo-filter-nofollow
然后在根目录的_config.yml添加以下选项
nofollow:
enable: true #是否启用插件,默认值为 true
field: site #插件的处理范围,默认值为 site,可选 post 或 site
exclude: #域名白名单
- 'exclude1.com'
- 'exclude2.com'
enable - 是否启用插件,默认值为 true
field - 插件的处理范围,默认值为 site,可选 post 或 site
post - 仅处理文章内容
site - 处理全站所有页面
exclude - 域名白名单,不同的子域名视为不同的域名(如 www)exclude1.com
不包括 www.exclude1.com
或 en.exclude1.com
其他SEO优化
SEO优化应该说是一个收益延迟的行为,可能你做的优化短期内看不到什么效果,但是一定要坚持,seo优化也是有很深的可以研究的东西,从我们最初的网站设计,和最基础的标签的选择都有很大的关系,网站设计就如我们刚刚说的,要让用户点击三次可以到达网站的任何一个页面,要增加高质量的外链,增加相关推荐(比如说我们经常见到右侧本站的最高阅读的排名列表),然后就是给每一个页面加上keyword和描述
在代码中,我们应该写出能让浏览器识别的语义化HTML,这样有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;并且对外链设置nofollow标签,避免spider爬着爬着就爬出去了(减少网站的跳出率),并且我们要尽量在一些比较大的网站增加我们站点的曝光率,因为spider会经常访问大站,比如我们在掘金等技术社区发表文章中带有我们的站点,这样spider是很有可能爬到我们中的站点的,所以说,重要的还是:
网站外链的推广度、数量和质量
网站的内链足够强大
网站的原创质量
网站的年龄时间
网站的更新频率(更新次数越多越好)
网站的服务器
网站的流量:流量越高网站的权重越高
网站的关键词排名:关键词排名越靠前,网站的权重越高
网站的收录数量:网站百度收录数量越多,网站百度权重越高
网站的浏览量及深度:用户体验越好,网站的百度权重越高