基于Hexo的matery主题搭建博客并深度优化

时间  2021-04-25
标签 javascript css html 前端 java node git github web 算法 栏目 JavaScript 繁體版
原文   原文链接
本文来自 悟尘纪，获取更新内容可查看原文： https://www.lixl.cn/2019/0310...

对于有必定技术背景的同窗，本身动手搭建博客网站是一个很不错的选择。选择喜欢的主题，按需进行个性化配置，随时在本地用本身喜欢的工具写文章，一键发布到多个博客托管平台，使用本身喜欢的图床/CDN 来加速...javascript

演示站点（悟尘纪） 基于 Hexo 的 hexo-theme-matery 主题构建，部署在腾讯云 COS 中并使用 CDN 进行内容加速，经过 PicGo + 阿里云 OSS 做为图床进行静态资源加速。

安装 hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其余渲染引擎）解析文章，在几秒内，便可利用靓丽的主题生成静态网页。css

前提

安装 Hexo 至关简单，只须要先安装下列应用程序便可：html

  • Node.js (Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)
  • Git

安装

全部必备的应用程序安装完成后，便可使用 npm 安装 Hexo。前端

npm install -g hexo-cli

安装之后，可使用如下两种方式执行 Hexo：java

  1. npx hexo
  2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中便可直接使用： hexo 
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

升级

后期须要升级的化，进入 blog 目录，先检查更新:node

$ npm outdated
Package                  Current  Wanted  Latest  Location
hexo                       3.9.0   3.9.0   4.2.0  hexo-site
hexo-deployer-git          1.0.0   1.0.0   2.1.0  hexo-site
hexo-generator-archive     0.1.5   0.1.5   1.0.0  hexo-site
hexo-generator-category    0.1.3   0.1.3   1.0.0  hexo-site
hexo-generator-feed        1.2.2   1.2.2   2.2.0  hexo-site
hexo-generator-index       0.2.1   0.2.1   1.0.0  hexo-site
hexo-generator-tag         0.2.0   0.2.0   1.0.0  hexo-site
hexo-renderer-ejs          0.3.1   0.3.1   1.0.0  hexo-site
hexo-renderer-marked       0.3.2   0.3.2   2.0.0  hexo-site
hexo-renderer-stylus       0.3.3   0.3.3   1.1.0  hexo-site
hexo-server                0.3.3   0.3.3   1.0.0  hexo-site

修改 package.json 文件，基于 Latest 列内容更新版本号，而后更新并检查版本号：git

$ npm install --save

# 检查版本号
$ hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
......

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所须要的文件。github

hexo init <folder>
cd <folder>
npm install

启动

此时，经过 hexo s 命令便可在本地启动您的博客站点了。web

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

接下来将安装主题，配置博客托管平台，实现一键发布并刷新 CDN 缓存。算法

目录结构说明

在执行过Hexo deploy命令以后，目录结构新增了.deploy_git，public，.gitignore，以下：

$ tree -L 2
.
├── .deploy_git
├── node_modules
├── public
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   ├── _posts
│   ├── _drafts
├── themes
├── _config.yml
├── db.json
├── package.json
└── package-lock.json

_config.yml

用来配置博客相关的参数，初始化时自动建立。具体参数设置，可参照 Hexo 配置 文档。

node_modules 和 package.json

都是在初始化时自动建立。

node_modules用来存储已安装的各种依赖包。
package.json用来查看 Hexo 的版本以及相关依赖包的版本。

Hexo 会默认安装：

  • hexo：主程序
  • hexo-deployer-git：实现 git 部署方式
  • hexo-generator-archive：存档页面生成器
  • hexo-generator-category：分类页面生成器
  • hexo-generator-index：index 生成器
  • hexo-generator-tag：标签页面生成器
  • hexo-renderer-ejs：支持 EJS 渲染
  • hexo-renderer-marked：Markdown 引擎
  • hexo-renderer-stylus：支持 stylus 渲染
  • hexo-server：支持本地预览，默认地址 localhost:4000

新安装的依赖包，也会保存在node_module文件夹下。

scaffold

模板文件夹，初始化时自动建立。包含page，post，draft三种模板，分别对应 页面、要发布的文章、草稿。

themes

主题文件夹，初始化时自动建立。每个主题，都有一个单独的文件夹。默认主题为 landscape。

source ， public 和 .deploy_git

  • source：资源文件夹。用来存放图片、Markdown 文档（文章、草稿）、各类页面（分类、关于页面等）。
  • public：将 source 文件夹里的 Markdown 文档，转换成 index.html。再结合主题进行渲染，就是咱们最终看到的博客。
  • .deploy_git：将 public 文件夹的内容提交到 Github 后生成，内容与 public 文件夹基本一致。

这三者的关系大体是：source -> public -> .deploy_git

执行hexo generate，根据 source，更新 public。
执行hexo deploy，根据 public，更新 .deploy_git。

配置主题

下载主题

hexo-theme-matery 是一个采用 Material Design 和响应式设计的 Hexo 博客主题，点击 这里 能够查看示例效果。点击 这里 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到 Hexo 的 themes 文件夹中便可。

切换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

_config.yml 文件的其它修改建议

  • 请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
  • 建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
  • 若是是中文用户，则建议修改 language 的值为 zh-CN。

新建分类 categories 页

categories 页是用来展现全部分类的页面，若是 source 目录下尚未 categories/index.md 文件，那么就须要新建一个，命令以下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少须要如下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展现全部标签的页面，若是 source 目录下尚未 tags/index.md 文件，那么就须要新建一个，命令以下：

hexo new page "tags"

编辑刚刚新建的页面文件 /source/tags/index.md，至少须要如下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建关于我 about 页

about 页是用来展现关于我和个人博客信息的页面，若是 source 目录下尚未 about/index.md 文件，那么就须要新建一个，命令以下：

hexo new page "about"

编辑刚刚新建的页面文件 /source/about/index.md，至少须要如下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建友情链接 friends 页（可选的）

friends 页是用来展现友情链接信息的页面，若是 source 目录下尚未 friends/index.md 文件，那么就须要新建一个，命令以下：

hexo new page "friends"

编辑刚刚新建的页面文件 /source/friends/index.md，至少须要如下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容以下所示：

[
  {
    "avatar": "https://www.lixl.cn/medias/avatar.jpg",
    "name": "悟尘记",
    "introduction": "人生就是一场修行，上善若水，厚德载物。",
    "url": "https://www.lixl.cn/",
    "title": "前去参观"
  },
  {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
    "name": "Fabric",
    "introduction": "A Blockchain Platform for the Enterprise",
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/",
    "title": "前去学习"
  },
  {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
    "name": "BootCDN",
    "introduction": "稳定、快速、免费的前端开源项目 CDN 加速服务。",
    "url": "https://www.bootcdn.cn/",
    "title": "前去加速"
  }
]

代码高亮

因为 Hexo 自带的代码高亮主题显示很差看，因此主题中使用到了 hexo-prism-plugin 的 Hexo 插件来作代码高亮，安装命令以下：

npm i -S hexo-prism-plugin

而后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置以下：

highlight:
  enable: false

prism_plugin:
  mode: "preprocess" # realtime/preprocess
  theme: "tomorrow"
  line_number: false # default false
  custom_css:

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来作内容搜索，安装命令以下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增如下的配置项：

search:
  path: search.xml
  field: post

修改页脚

页脚信息可能须要作定制化修改，并且它不便于作成配置信息，因此可能须要你本身去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

修改社交连接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱的配置，能够在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改须要的社交连接地址，增长连接可参考以下代码：

<a
  href="https://github.com/blinkfox"
  class="tooltipped"
  target="_blank"
  data-tooltip="访问个人GitHub"
  data-position="top"
  data-delay="50"
>
  <i class="fa fa-github"></i>
</a>

其中，社交图标（如：fa-github）能够在 Font Awesome 中搜索找到。如下是经常使用社交图标的标识，供参考：

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • 新浪微博: fa-weibo
  • 微信: fa-wechat
  • QQ: fa-qq

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，能够替换成你的的微信和支付宝的打赏二维码图片。

一键部署

经过 hexo-deployer-git 插件能够实现一键将博客同时部署到多个 git 仓库中。如同时发布到 github 及 gitee 提供的 pages 服务。安装：

npm install hexo-deployer-git --save

修改 Hexo 根目录下的 _config.yml 文件中的以下内容:

## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: git
    repo: https://gitee.com/lxl80/lxl80.git
    branch: master
    ignore_hidden: false
也能够如本站同样，采用 hexo-deployer-cos-enhanced 插件将静态内容部署到腾讯云对象存储服务中，在 DNS 配置中将境内线路解析到腾讯云 CDN 地址，实现加速。部署完成后会自动刷新被更新文件的 CDN 缓存。

安装：

npm install hexo-deployer-cos-enhanced --save

_config.yml 配置以下:

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos
    bucket: lxl80-130****
    region: ap-beijing
    secretId: AKIDh9****F8FvL
    secretKey: Z3IGiur****QZR3PgjXmlVg
    cdnConfig:
      enable: true
      cdnUrl: https://static.lixl.cn
      bucket: static-130****
      region: ap-beijing
      folder: static
      secretId: AKIDh9****F8FvL
      secretKey: Z3IGiur****QZR3PgjXmlVg

而后经过 hexo g -d 便可实现一键发布，并更新 CDN 缓存。

文章连接转静态短地址（建议安装）

若是文章名称是中文的，那么 Hexo 默认生成的永久连接也会有中文，这样不利于 SEO，且 gitment 评论对中文连接也不支持。咱们能够用 hexo-permalink-pinyin Hexo 插件生成文章时生成中文拼音的永久连接，或者用hexo-abbrlink 生成静态文章连接。如下结合 hexo-abbrlink 生成相似 /yyyy/mmdd+随机数.html 的文章连接地址。

安装命令以下：

npm install hexo-abbrlink --save

在 Hexo 根目录下的 _config.yml 文件中，修改 permalink: ，并在文件末尾新增 abbrlink:配置项：

permalink: :year/:month:day:abbrlink.html

abbrlink:
  alg: crc16 #算法选项：crc16丨crc32
  rep: dec #输出进制：dec为十进制，hex为十六进制

CND 加速（建议启用）

放在 Github 的资源在国内加载速度比较慢，所以须要使用 CDN 加速来优化网站打开速度，jsDelivr + Github 即是免费且好用的 CDN，很是适合博客网站使用。也能够选择主流云服务商提供的对象存储+CDN 来得到更快速及稳定的访问效果，费用低到几乎可忽略。

用法：

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

例如：

https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/medias/banner/1.jpg

注意：版本号不是必需的，是为了区分新旧资源，若是不使用版本号，将会直接引用最新资源。

还能够配合 PicGo图床上传工具的 自定义域名前缀来上传图片，使用极其方便。具体使用方法可参见个人另外一篇文章: 使用 Typora+iPic/PicGo 图床+CDN 实现高效 Markdown 创做

文章字数统计插件（可选的）

若是你想要在文章中显示文章字数、阅读时长信息，能够安装 hexo-wordcount插件。

安装命令以下：

npm i --save hexo-wordcount

而后只需在本主题下的 _config.yml 文件中，激活如下配置项便可：

wordCount:
  enable: false # 将这个值设置为 true 便可.
  postWordCount: true
  min2read: true
  totalCount: true

添加 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 文件，说明已经安装成功了。

自定制修改

在本主题的 _config.yml 中能够修改部分自定义信息，有如下几个部分：

  • 菜单
  • 个人梦想
  • 首页的音乐播放器和视频播放器配置
  • 是否显示推荐文章名称和按钮配置
  • favicon 和 Logo
  • 我的信息
  • TOC 目录
  • 文章打赏信息
  • 复制文章内容时追加版权信息
  • MathJax
  • 文章字数统计、阅读时长
  • 点击页面的'爱心'效果
  • 个人项目
  • 个人技能
  • 个人相册
  • Gitalk、Gitment、Valine 和 disqus 评论配置
  • 不蒜子统计和谷歌分析（Google Analytics）
  • 默认特点图的集合。当文章没有设置特点图时，本主题会根据文章标题的 hashcode 值取余，来选择展现对应的特点图

若是本主题中的诸多功能和主题色彩你不满意，能够在主题中自定义修改，不少更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，须要修改源代码才来完成。如下列出了可能有用的地方：

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 总体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
  background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
  /* 动态切换背景颜色. */
}

@keyframes rainbow {
  /* 动态切换背景颜色. */
}

修改 banner 图和文章特点图

能够直接在 /source/medias/banner 文件夹中更换喜欢的 banner 图片，主题代码中是天天动态切换一张，只需 7 张便可。若是会 JavaScript 代码，能够修改为本身喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$(".bg-cover").css("background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)");

在 /source/medias/featureimages 文件夹中默认有 24 张特点图片，你能够再增长或者减小，并须要在 _config.yml 作同步修改。

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的全部内容均为非必填的。但仍然建议至少填写 title 和 date 的值。

配置选项 默认值 描述
title Markdown 的文件标题 文章标题
date 文件建立时的日期时间 发布时间，应保证全局惟一
author 根 _config.yml 中的 author 文章做者
img featureImages 中的某个值 文章特征图
top true 文章是否置顶，值为 true，则会做为首页推荐文章
cover false 是否须要加入到首页轮播封面中
coverImg 无 该文章在首页轮播封面须要显示的图片路径，若是没有，则默认使用文章的特点图片
password 无 文章阅读密码，该值必须是用 SHA256 加密后的密码，防止被他人识破。
toc true 是否开启 TOC，能够针对某篇文章单独关闭 TOC 的功能。
mathjax false 是否开启数学公式支持
summary 无 文章卡片摘要显示的文字，若是无值程序会自动截取文章的部份内容做为摘要
categories 无 文章分类，建议一篇文章一个分类
tags 无 文章标签，一篇文章能够多个标签

注意:

  1. 若是 img 属性不填写的话，文章特点图会根据文章标题的 hashcode 的值取余，而后选取主题中对应的特点图片，从而达到让全部文章都的特点图各有特点。
  2. date 的值尽可能保证每篇文章是惟一的，由于本主题中 Gitalk 和 Gitment 识别 id 是经过 date 的值来做为惟一标识的。
  3. 若是要对文章设置阅读验证密码的功能，不只要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还须要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供使用：开源中国在线工具、chahuo、站长工具。

如下为文章的 Front-matter 示例。

最简示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-10-03 14:25:00
---

最全示例

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-10-03 14:25:00
author: 悟尘
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，若是这个属性有值，文章卡片摘要就显示这段文字，不然程序会自动截取文章的部份内容做为摘要
categories: 工具
tags:
  - blog
  - hexo
---

SEO 优化

搜索引擎优化，又称为 SEO，即 Search Engine Optimization，它是一种经过分析搜索引擎的排名规律，了解各类搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样肯定特定关键词的搜索结果排名的技术。Google 自动收录效果还不错，百度就差得远了（GitHub不容许百度的Spider爬取GitHub上的内容）。

安装 sitemap 插件生成站点地图文件:

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save  #百度专用

安装后直接执行 hexo cl&&hexo g -d 命令，就会在网站根目录生成 sitemap.xml 及 baidusitemap.xml 文件。

百度优化

登陆百度搜索资源平台， 登陆成功以后在 用户中心 --> 站点管理 页面中点击添加网站，按提示操做。

添加网站

提示：因为百度的 spider 是爬取不到 GitHub 的内容的，因此在第三步验证网站的时候，建议选择 CNAME验证的方式。

通过以上步骤，百度已经知道有咱们网站的存在了，可是百度还不知道咱们的网站上有什么内容，因此要向百度推送咱们的内容。点击 网站支持 --> 数据引入 --> 连接提交菜单，提交站点地图：
提交站点地图

另外，hexo-theme-matery主题已经内置了 自动推送 的功能， 检查 themes/hexo-theme-matery/_config.yml 文件中以下配置:

# 百度搜索资源平台提交连接
baiduPush: true

自动推送的 JS 代码部署在站点的每个页面源代码中，当页面在每次被浏览时，连接就会被自动推送给百度。

谷歌优化

登陆 Google Search Console，点击添加资源，输入本身的域名，按提示操做。

添加资源

提示：须要进行 DNS 验证，进入 DNS 域名解析设置页面，按提示增长 TXT 记录，以下图:
DNS验证内容填写示例

验证成功后，须要提交站点地图。参照下图提交，而后等待收录。
提交站点地图

注意：hexo 配置文件中的 url 必定要输入正确的域名，插件是根据 url 生成站点地图的。

经常使用命令

指令说明

hexo server #启动本地服务器，用于预览主题。Hexo 会监视文件变更并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页便可生效。

hexo server -s #以静态模式启动

hexo server -p 5000 #更改访问端口 (默认端口为 4000，'ctrl + c'关闭 server)

hexo server -i IP地址 #自定义 IP

hexo clean #清除缓存 ,网页正常状况下能够忽略此条命令,执行该指令后,会删掉站点根目录下的 public 文件夹

hexo g #生成静态网页 (执行 &dollar; hexo g后会在站点根目录下生成 public 文件夹, hexo 会将"/blog/source/" 下面的.md 后缀的文件编译为.html 后缀的文件,存放在"/blog/public/ " 路径下)

hexo d #自动生成网站静态文件，并将本地数据部署到设定的仓库(如 github)

hexo init 文件夹名称 #初始化 XX 文件夹名称

npm update hexo -g#升级

npm install hexo -g #安装

node-v #查看 node.js 版本号

npm -v #查看 npm 版本号

git --version #查看 git 版本号

hexo -v #查看 hexo 版本号

简写指令

hexo n "个人第一篇文章" 等价于 hexo new "个人第一篇文章" 还等价于 hexo new post "个人第一篇文章"

hexo p 等价于 hexo publish

hexo g 等价于 hexo generate

hexo s等价于 hexo server

hexo d 等价于 hexo deploy

hexo g -d等价于hexo generate --deploy

注: hexo clean 没有 简写, git --version 没有简写

常见问题

1. 经过hexo g -d部署时报Error: Spawn failed错误:

这是因为 git 本地记录的提交版本号与 github 上不一致致使的，经过 git reset --hard commitCode便可解决。
  • 检查本地最近提交记录，获取最后一次提交记录的更新时间及标识，如280a7fdd46fcfd7d34e652aec15523dcd247fac8 
cd .deploy_git
cat .git/logs/HEAD
  • 获取 github pages 服务所关联分支的最近一次提交记录，获取更新时间及标识。地址通常为：https://github.com/用户名/仓库名/commits/分支名，如https://github.com/lxl80/blog/commits/gh-pages
  • 若是发现提交最新的提交时间/标识不一致，经过如下命令便可解决:
git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github上最新的提交标识

参照

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程