使用Github搭建Hexo技术博客托管在GitHub Page

作者: 指尖的跳跃 | 来源:发表于2016-08-14 22:40 被阅读350次

使用Github搭建Hexo技术博客

主题优化

主题配置介绍

我这里只讲自己在使用的 yelle 主题，你可以参考下，可能还有一些改动我后续会自己在慢慢改，但是大体基本也就这样了。

从中我们也可以看出，对于主题来讲，大部分可以配置的地方其实都是在这里的，所以对于主题的使用者来讲，懂这里很重要。

基本上主题的配置文件都是有内容改，但是下面这几点我觉得特别重要：
duoshuo，如果你是打算采用多说评论系统的话，你需要设置这里，但是我个人对多说没好印象
youyan，有言也是国内实用比较多的评论系统之一，个人感觉相对比较稳定
open_in_new，我个人觉得这个东西就应该是 true，不是用新标签的都是坏人
baidu_tongji，我个人使用的是百度统计，具体百度统计的使用可以查看百度统计官网：http://tongji.baidu.com

我的 yelle 主题配置

# Theme Version | 当前版本
Yelee: "3.5"

# >>> Basic Setup | 基础设置 <<<

# Header | 主菜单
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
  主页: /
  所有文章: /archives/
 #随笔: /tags/随笔
  标签云: /tags/
  关于我: /about/

# Link to your avatar | 填写头像地址
avatar: /img/avatar.png

# Small icon of Your site | 站点小图标地址
favicon: /favicon.png

# Internationalization | 主题语言
## Change Language in SITE's _config.yml | 在站点配置中切换语言
## https://hexo.io/docs/internationalization.html
## Available Languages: en, zh-Hans, zh-Hant-TW, zh-Hant-HK

# Subdirectory | 子目录
## If your site' url is 'http://yoursite.com/blog', set root_url as '/blog/'
## 网站若存放在子目录，请按上面格式填写
## https://hexo.io/docs/configuration.html#URL
root_url: 

# Year of Site Creation | 网站成立年份
since: 2015

# Social info. Bar | 社交信息展示
## Keep "mailto:" in Email | 设置 Email 时保留 "mailto:"
## Encrypt email 加密邮件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安装对应插件
## https://github.com/hexojs/hexo-generator-feed

subnav:
  Email: ""
  #新浪微博: "sina weibo"
  GitHub: ""
  #V2EX: "#"
  RSS: "/atom.xml"
  #知乎: "zhihu"
  #豆瓣: "douban"
  #简书: "jianshu"
  #SegmentFault: ""
  #博客园: "cnblogs"
  CSDN: ""
  #Coding: ""
  #网易云音乐: ""
  #虾米音乐: "xiami"
  #bilibili: ""
  #AcFun: ""
  #niconico: ""
  #Quora: ""
  #Facebook: "#"
  #Google: "#"
  #Twitter: "#"
  #LinkedIn: "#"
  #QQ: "#"
  微信: "weixin"
  #PayPal: "#"
  #StackOverflow: "#"
  #CodePen: ""
  #Plunker: ""
  #Instagram: "#"
  #LOFTER: ""
  #Flickr: "#"
  #reddit: ""
  #Medium: ""
  #TiddlyWiki: ""
  #Tumblr: ""
  #_500px: ""

# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统，其他保持禁用。

preload_comment: true
## false: 当点击评论条等区域时再加载评论模块
## false: load comment's section until u click/hover on the bar/icon

show_count: false
## 是否在主页文章标题旁显示评论数（多说、Disqus）
## Add comment count after article title

disqus: 
  #on: true
  shortname: 
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if 
  # you have set "disqus_shortname" in your site's "_config.yml" 

duoshuo: 
  #on: true
  domain: 
  # 是否开启多说评论，http://duoshuo.com/create-site/
  # 使用上面网址登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分
  # http://<要填的部分>.duoshuo.com (domain只填上<>里的内容，不要填整个网址)

youyan:
  #on: true
  id: 
  # 是否开启友言评论，http://www.uyan.cc/index.php
  # id 中填写你的友言用户数字ID，注册后进入后台管理即可查看
  # 友言服务在 Web 环境下运行，普通本地环境无法查看，请部署后在线上测试。

# >>> Style Customisation 样式自定义 <<<

# Background | 背景
## "5": show images form bg-1.jpg to bg-5.jpg in `/yelee/source/background/`
## "5": 显示`/yelee/source/background/`文件夹中 bg-1.jpg 到 bg-5.jpg 这5张图片
## "0": white-gray background | 淳朴灰白背景
background_image: 5

# Base Font Size | 字号调节
base_font_size: 16  #px, 16 - 24

## General Color Scheme | 主题配色方案 
## 可用值 Value: yilia
color_scheme: 

highlight_style:
  on: true
  inline_code: 3  # Value: 0 - 9 可选
  code_block: 2  # Value: 0 - 4 
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 通过 inline_code 切换内置文本高亮样式
  # 通过 code_block 切换内置代码高亮配色主题

blockquote_style:
  on: true
  blockquote: 1  # Value: 0 - 7 可选
  # 自定义文章「引用部分」的样式

# Headings Style | 标题风格
## 0-Yelee, 1-Yilia, 2-GitHub
heading_style: 0 # Value: 0 - 2

## List style type (ul) | 无序列表项标记样式
list_style: 0  # value: 0 - 12 可选

# 左边栏宽度 px
left_col_width: 300

# Copyright info. of post | 文末版权信息
copyright: true

# Table of contents | 文章目录
toc:
  on: true
  list_number: true # 目录序号
  max_depth: 3  # 1 - 6 (h1-h6) 目录最大级数
  nowrap: false # Keep title on same line | 目录标题不换行

# 是否开启主页及加载头像时的动画效果
# Animation in Homepage and Loading avatar
animate: true

# Load jQuery UI to style tooltips
# 工具提示框样式美化
jquery_ui: false

# Max width of right cloumn | 限制右侧内容的宽带 
limit_article_width: 
  on: false
  max_width: 60 # em

# >>> Small features | 小功能设置 <<<

# 是否开启边栏多标签切换
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情链接
friends:
  GitHub: https://pages.github.com/
#friends: false

#是否开启“关于我”。
aboutme: 专注于技术,专注于开发
#aboutme: true

# Open link in a new tab | 是否在新窗口打开链接
## `global` 0: Set separately, 1: Open all in new 2: Open all in current
## `global` 0: 分开设置, 1: 全部在新标签打开, 2: 全部在"当前"标签打开
open_in_new:
  global: 0 # 0-2
  title: false # article title in homepage 主页文章标题
  post: false # link within post/page 正文中的链接
  tags: false # 标签
  categories: false # 分类
  article_nav: false # 导航
  archives: true # 归档
  mini_archives: true # 迷你归档
  menu: false # 边栏菜单
  friends: true  # 友情链接
  socail: true # 社交图标

# Customize feed link 自定义订阅地址
rss: /atom.xml

# Update Reminder for IE6/7/8
# 针对 IE6/7/8 的升级浏览器提示
ie_updater:
  on: true
  link: //outdatedbrowser.com/
  ## http://browsehappy.com/
  ## http://outdatedbrowser.com/

# Tab Title Change | 标签页标题切换
tab_title_change: 
  #on: false
  left_tab_title: '(つェ⊂) 我藏好了哦~ '
  return_tab_title: '(*´∇｀*) 被你发现啦~ '

# >>> Vendors | 第三方工具 & 服务 <<<

# Local Site Search | 本地站内搜索
## Insatall below plugin to take effect | 使用搜索需先安装对应插件
## https://github.com/PaicHyperionDev/hexo-generator-search
search: 
  on: true
  onload: false
  ## true: get search.xml file when the page has loaded
  ## false: get the file when search box gets focus

# images viewer | 图片浏览器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 数学公式支持
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否开启分享
share: 
  on: true
  baidu: true
  addthis: false
  addthis_pubid: ""
  ## Go to www.addthis.com/dashboard to get your pubid (in src of Code)
  ## and customize AddThis share buttons

# 百度、谷歌站长验证。填写 HTML 标签 content
# Site Verification for Google and Baidu. HTML label content.
baidu_site: 
google_site: 

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X
google_analytics: 

# 百度统计 http://sitecenter.baidu.com/sc-web/
# 查看代码，填入 //hm.baidu.com/hm.js? 之后的内容
baidu_tongji: 

# 不蒜子网站计数设置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: true
  site_visit: 本站到访数
  page_visit: 本页阅读量

# GitHub Repo Widget
# https://github.com/hustcc/GitHub-Repo-Widget.js
github_widget: false

# Progress Bar | 页面加载进度条
# Demo: http://github.hubspot.com/pace/docs/welcome/
# type: barber-shop|big-counter|bounce|center-atom|center-circle|
#       center-radar|center-simple|corner-indicator|flash|flat-top|
#       loading-bar|mac-osx|minimal
# color: black|blue|green|orange|pink|purple|red|silver|white|yellow|
progressBar:
  on: true
  type: "minimal"  # Keep Quotes | 保留引号避免出错
  color: blue

CDN:
  jquery: //cdn.bootcss.com/jquery/2.2.4/jquery.min.js
  require: //cdn.bootcss.com/require.js/2.2.0/require.min.js
  fontawesome: //cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css
  fancybox_js: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js
  fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
  animate_css: //cdn.bootcss.com/animate.css/3.5.1/animate.min.css
  jquery_ui_js: //cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js
  jquery_ui_css: //cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css
  pace_js: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  clipboard: //cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js
  mathjax: //cdn.bootcss.com/mathjax/2.6.1/MathJax.js
  scrollreveal: //cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js

常用页面添加

404、关于我、标签页

还是以上一篇文章我们讲解的项目根目录上：E:\blog_space\hexo，在该目录启动 Git Bash：
新增一个 404 页面：hexo new page 404
新增一个 about 页面：hexo new page about
新增一个 tag 标签云页面：hexo new page tags
新增一个 robot.txt 文件，把该文件放在：E:\blog_space\hexo\source 目录下，如果你没有该文件可以到我的项目上找：https://github.com/chenjh0611/chenjh0611.github.io
robot 文件内容：

User-Agent: *
Allow: /
Disallow: /background
Disallow: /css
Disallow: /fancybox
Disallow: /font-awesome
Disallow: /img
Disallow: /js
Sitemap: http://code.skyheng.com/sitemap.xml
Sitemap: http://code.skyheng.com/baidusitemap.xml

在md文件的Front-matter区域添将comments设置为flase的话，将不会展示评论界面。

设置分类

在我们编辑文章的时候，直接在categories:项填写属于哪个分类，但如果分类是中文的时候，路径也会包含中文。比如分类我们设置的是：
categories: 编程那在生成页面后，分类列表就会出现编程这个选项，他的访问路径是：*/categories/编程
如果我们想要把路径名和分类名分别设置，需要怎么办呢？
打开根目录下（并非主题目录）的配置文件_config.yml（别打开错了），找到如下位置做更改（设置种类）：

# Category & Tag
default_category: uncategorized
category_map:
    编程: programming
    Hexo：Hexo
    生活: life
    其他: other
tag_map:

在这里category_map:是设置分类的地方，每行一个分类，冒号前面是分类名称，后面是访问路径。可以提前在这里设置好一些分类，当编辑的文章填写了对应的分类名时，就会自动的按照对应的路径来访问。

置顶文章方法

参考：
1. 解决Hexo置顶问题
2. 解决Hexo博客文章置顶问题
编辑这个文件：node_modules/hexo-generator-index/lib/generator.js在生成文章之前进行文章top值排序。
覆盖原文件内容，采用下面内容：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后在文章头部的：Front-matter位置加上一个：top: 1000的内容。数值越大，越靠前

另外一种解决方案：

hexo博客优化之文章置顶+置顶标签
文章中卸载hexo-generator-index使用cnpm install --save hexo-generator-index-pin-top插件来实现，安装这个插件然后在需要置顶的文章的Front-matter中加上top: true即可，也可以是数值，数值越大，越靠前

字数统计和阅读时长

Next 是已经集成了这个功能，所以还是得需要咱们自己完成，首先看一下官网的使用帮助hexo-wordcount.

集成步骤

先安装插件hexo-wordcount、执行cnpm install --save hexo-wordcount安装
文件配置、在yelee/layout/_partial/post/word.ejs下创建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然后在 themes/yelee/layout/_partial/article.ejs文件中<%- partial('post/title', {class_name: 'article-title'}) %>后面添加如下代码

<% if(theme.word_count && !post.no_word_count){ %>
   <%- partial('post/word') %>
<% } %>

在<div class="article-info article-info-post">后添加如下代码

<% if(theme.word_count && !post.no_word_count){ %>
  <br>
  <br>
<% } %>

在主题_config.yml中配置word_count是否需要添加字数统计功能控制的flag、在md文件的Front-matter区域添加no_word_count为true即配置文章不需要显示字数统计功能

article.ejs文件中代码块示例

<% if (post.link || post.title){ %>
  <header class="article-header">
    <%- partial('post/title', {class_name: 'article-title'}) %>
    <% if(theme.word_count && !post.no_word_count){ %>
       <%- partial('post/word') %>
    <% } %>
  </header>
  <% if (!index){ %>
  <div class="article-info article-info-post">
    <% if(theme.word_count && !post.no_word_count){ %>
      <br>
      <br>
    <% } %>
    <%- partial('post/category') %>
    <%- partial('post/tag') %>
    <div class="clearfix"></div>
  </div>
  <% } %>
<% } %>

网易云音乐

集成起来就很简单了，MarkDown 是支持 h5 代码的，所以打开网易云,输入你想要的歌曲，点击对应歌曲的生成外链播放器。前提是有版权哈，然后拷贝相应的代码即可。
外链
拷贝代码
效果请点击关于我

鼠标点击效果

废话不多说，直接看如何集成。拷贝需要的文件、进入到下位子的Github，拷贝文件。

文件夹目录
拷贝resources下的所有文件到您对应的目录。
打开themes/yelee/layout/_partial/after-footer.ejs文件，添加刚刚添加文件的配置。

<% if (theme.background_animation){ %>
    <script type="text/javascript" src="/resources/love.js"></script>
    <script type="text/javascript" src="/resources/float.js"></script>
    <script type="text/javascript" src="/resources/typewriter.js"></script>
    <script type="text/javascript" color=0,104,183 opacity=1 zindex=-1 count=50 src="/resources/particle.js"></script>
<% } %>

快速实现博客压缩

项目压缩也叫代码丑化, 分别对 html、css、js、images进行优化，即把重复的代码合并，把多余的空格去掉，用算法把 images 进行压缩。压缩后的博客，加载速度会有较大的提升，自然能留住更多游客。
蛮多朋友使用了gulp对博客进行压缩，这也是一个办法，但在社区逛了下，找到了一个比较好用的模块hexo-all-minifier，这个模块集成了对 html、css、js、image 的优化。安装上此模块后，只要在根目录下的_config.yml文件中加上如下字段就可对博客所有内容进行压缩。

html_minifier:
  enable: true
  ignore_error: false
  exclude:

css_minifier:
  enable: true
  exclude:
    - '*.min.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

文章链接唯一化

也许你会数次更改文章题目或者变更文章发布时间，在默认设置下，文章链接都会改变，不利于搜索引擎收录，也不利于分享。唯一永久链接才是更好的选择。

hexo-abbrlink介绍：https://post.zz173.com/detail/hexo-abbrlink.html、GitHub地址：hexo-abbrlink
安装：cnpm install hexo-abbrlink --save
在站点配置文件中查找代码permalink，将其更改为：permalink: posts/:abbrlink/ # posts/可自行更换

这里有个知识点：

百度蜘蛛抓取网页的规则: 对于蜘蛛说网页权重越高、信用度越高抓取越频繁，例如网站的首页和内页。蜘蛛先抓取网站的首页，因为首页权重更高，并且大部分的链接都是指向首页。然后通过首页抓取网站的内页，并不是所有内页蜘蛛都会去抓取。
搜索引擎认为对于一般的中小型站点，3层足够承受所有的内容了，所以蜘蛛经常抓取的内容是前三层，而超过三层的内容蜘蛛认为那些内容并不重要，所以不经常爬取。出于这个原因所以permalink后面跟着的最好不要超过2个斜杠。

然后在站点配置文件中添加如下代码:

# abbrlink config
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

可选择模式：

crc16 & hex
crc16 & dec
crc32 & hex
crc32 & dec

示例：
生成的链接如下所示：

crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html

Yelog—对Yelee主题的改进

由于Yelee主题存在代码块上下出现空格的情况以及主题布局尺寸固定的情况，Yelog主题对Yelee主题进行了改进，github地址如下：
https://github.com/yelog/hexo-theme-yelog

使用Yilia主题需要

在查看所有文章的时候需要
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
meta: false
pages: false
posts:
  title: true
  date: true
  path: true
  text: false
  raw: false
  content: false
  slug: false
  updated: false
  comments: false
  link: false
  permalink: false
  excerpt: false
  categories: false
  tags: true

显示pdf的支持

安装：cnpm install --save hexo-pdf github地址：hexo-pdf
使用示例：{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

插件推荐

插件的基本使用命令

插件官网：https://hexo.io/plugins/
安装插件：npm install 插件名 --save
卸载插件：npm uninstall 插件名
更新插件和博客框架（需要在 E:\blog_space\hexo 目录下）：npm update
它实质上是通过项目根目录下 package.json 文件更新各大组件

必备插件

支持RSS：cnpm install hexo-generator-feed --save
生成站点地图：cnpm install hexo-generator-sitemap --save
生成百度站点地图：cnpm install hexo-generator-baidu-sitemap --save
HTML 压缩：cnpm install hexo-html-minifier --save
JavaScript 压缩：cnpm install hexo-uglify --save
CSS 压缩插件：cnpm install hexo-clean-css --save
SEO优化：cnpm install hexo-generator-seo-friendly-sitemap
站内搜索：hexo-generator-search插件为 Hexo3 提供搜索功能。安装： cnpm install hexo-generator-search --save

其他插件支持

结束语

真心希望这是 Hexo 最后一篇，因为我们只是要安心写东西而已，不需要太多折腾。

参考资料

系列博文整理

整理了下hexo系列的文章，发现这位博主写系列博客感觉还是很棒的：