hexo搭建教程

发表于 | 更新于 | 分类于 ， | 评论数： | 阅读次数：
本文字数： 64k | 阅读时长 ≈ 58 分钟

hexo blog 搭建教程

什么是 Hexo

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

hexo 安装

在安装前，您必须检查电脑中是否已安装 Node.js 和 Git。如果已经安装，那么可以使用npm安装 hexo。

1
npm install -g hexo-cli

build site

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

1
2
3
hexo init <folder>
cd <folder>
npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • scaffolds: 模版文件夹。
  • source: 资源文件夹是存放用户资源的地方
  • package.json: 应用程序的信息
  • _config.yml: 网站的配置信息.

具体的 config.yml 配置可以查看 官方配置doc

命令

new

1
hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

generate

1
hexo generate | hexo g

生成静态文件。

选项 描述
-d, –deploy 文件生成后立即部署网站
-w, –watch 监视文件变动

publish

1
hexo publish [layout] <filename>

发表草稿。

server

1
hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/

选项 描述
-p, –port 重设端口
-s, –static 只使用静态文件
-l, –log 启动日记记录，使用覆盖记录格式
-g, –generate 启动服务器之前预先生成静态文件

deploy

1
hexo deploy

部署网站。

参数 描述
-g, –generate 部署之前预先生成静态文件

clean

1
hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

更多命令见 官方文档doc

NEXT 主题

reward 打赏

1
2
3
4
5
reward:
  enable: true
  comment: 坚持分享，您的支持将鼓励我继续创作！
  wechatpay:
  alipay:

书签

1
2
3
bookmark:
  enable: true
  save: auto

安装插件

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark

阅读进度条

1
2
3
4
reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

安装插件

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

页面 loading

1
2
pace: true
pace_theme: pace-theme-center-circle

安装插件

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

支持数学公式

1
2
math:
  enable: true

valine 评论系统 & leanvisitor 文章访问数

1
2
3
4
5
6
7
8
9
10
11
valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid:  # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitor: true # lean visitor 功能

文章阅读排行

hexo n page top 新建页面，会生成 top 目录，编辑其中自动生成的 index.md 文件，将其中的代码替换如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="post-rank"></div>

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.10.0/dist/av-min.js"></script>
<script>
  var APP_ID = ******;  //输入个人LeanCloud账号AppID
  var APP_KEY = ******;  //输入个人LeanCloud账号AppKey
  AV.init({
    appId: APP_ID,
    appKey: APP_KEY
  });

  var query = new AV.Query('Counter');//表名
  query.descending('time'); //结果按阅读次数降序排序
  query.limit(10);  //最终只返回10条结果
  query.find().then( response => {
    var content = response.reduce( (accum, {attributes}) => {
      accum += `<p><div class="prefix">热度 ${attributes.time} ℃</div><div><a href="${attributes.url}">${attributes.title}</a></div></p>`
      return accum;
    },"")
    document.querySelector("#post-rank").innerHTML = content;
  })
  .catch( error => {
    console.log(error);
  });
</script>

<style type="text/css">
  #post-rank {
    text-align: center;
  }
  #post-rank .prefix {
    color: #ff4d4f;
  }
</style>

并将其中的 leancloud_appid、leancloud_appkey 替换为你的。

编辑主题配置文件 themes\next_config.yml，添加 top

1
2
3
menu:
  home: / || home
  top: /top/ || signal

新增菜单栏的显示名称 hexo/theme/next/languages/zh-CN.yml，同样新增 top 对应的中文：

1
2
3
menu:
  home: 首页
  top: 阅读排行

版权声明

1
2
3
4
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true

友情链接

1
2
3
4
5
6
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  XXX: XXX

设置动态title

在 /themes/next/source/js/src 目录下新建 dytitle.js 。添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = ' 页面崩溃啦 ~ | cwyaml！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' 噫又好了~ ' + OriginTitile;
         titleTime = setTimeout(function () {
             document.title = OriginTitile;
         }, 2000);
     }
 });

更改 /themes/next/layout/_layout.swig ,在 </body> 之前添加：

1
2
<!--卖萌-->
<script type="text/javascript" src="/js/src/dytitle.js"></script>

动态背景-3d

1
2
3
4
5
6
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

安装插件

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-three source/lib/three

动态背景-canvas_nest

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

安装插件

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

文章末尾添加“本文结束”标记

在/themes/next/layout/_macro中新建passage-end-tag.swig文件，添加代码至该文件中：

1
2
3
4
5
<div>
    {% if theme.passage_end_tag.enabled %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

打开/themes/next/layout/_macro/post.swig文件，在post-body后，post-footer前，添加下面内容：

1
2
3
4
5
6
7
8
    {#####################}
    {### END POST BODY ###}
    {#####################}
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

打开主题配置文件（_config.yml),在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

添加页面点击出现爱心的效果

在/themes/next/source/js/src下新建文件clicklove.js，接着把该链接下的代码拷贝粘贴到clicklove.js文件中。代码如下：

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在/themes/next/layout/_layout.swig文件末尾添加：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

访客总数统计

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

文章底部的带#号的标签改为字体图标

修改 themes/next/layout/_macro/post.swig 搜索 rel="tag"># ，将 # 换成<i class="fa fa-tag"></i>.

本地搜索

安装 package

1
npm install hexo-generator-searchdb --save

配置

1
2
3
4
5
6
7
8
9
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false

备案

1
2
3
4
# icp 备案
beian:
  enable: true
  icp:

在themes/next/layout/_partials/footer.swig 文件中，author 下面添加:

1
2
3
<div style="width:300px;margin:0 auto; padding:5px 0;">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="???" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">公网安备案号</p></a>
</div>

个人头像

1
2
3
4
5
6
7
8
9
10
11
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: http://pic.victorchu.info/victor-blog-head.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

wordCount 和阅读时长

安装 package

1
npm install hexo-symbols-count-time --save

配置

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

开启 SEO 优化

Next 提供了 seo 优化选项，在主题配置文件_config.yml中有个选项是seo，设置成true即开启了 seo 优化。

百度收录博客

打开百度站长平台，注册登陆后，在用户中心 > 站点管理下添加网站。根据提示输入站点地址等信息.在选择完网站的类型之后需要验证网站的所有权，有三种验证方式，文件验证、html 标签验证、cname 解析验证。详情见官网描述。

生成 sitemap 站点地图

站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知 Google 等搜索引擎。搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站。

先安装谷歌和百度的插件，如下：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在博客根目录的_config.yml中改url为你的站点地址：

1
2
3
4
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://luanzhuxian.github.io/
root: /

在博客根目录的_config.yml中添加如下代码：

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

之后重新打包hexo g，若在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度专用的 sitemap 文件。

之后就可以将生成的 sitemap 文件提交给百度，可加快爬虫抓取速度。还是在百度站长平台，找到网站支持 > 数据引入 > 链接提交。这里我们可以看到有两种提交方式，自动提交和手动提交，自动提交又分为主动推送、自动推送和 sitemap。从效率上来说：主动推送>自动推送>sitemap。

安装插件：

1
npm install hexo-baidu-url-submit --save

根目录配置文件_config.ym新增字段：

1
2
3
4
5
6
baidu_url_submit:
  count: 100 # 提交最新的一个链接
  host: xxx.github.io # 在百度站长平台中注册的域名
  token: xxxxxx # 秘钥，百度站长平台 > 推送接口 > 接口调用地址中token字段
  path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里
  xz_appid: xxxxxx # 你的熊掌号 appid

其次，记得查看_config.ym文件中url， 必须是百度站长平台注册的域名（包含www）：

1
2
3
4
# URL
url: https://xxx.github.io/
root: /
permalink: post/:abbrlink.html

最后，根目录配置文件新增 deploy：

1
2
deploy:
  type: baidu_url_submitter

以后每次执行hexo deploy，链接就会被推送给百度了。

hexo 默认的链接是 http://xxx.yy.com/2018/07/14/hello-world 这种类型的，这源于站点目录下的配置 _config.yml 里的配置 :permalink: :year/:month/:day/:title/，这种默认配置的缺点就是一般文件名是中文，导致 url 链接里有中文出现，这会造成很多问题，如使用gitment，也不利于 SEO，另外年月日都会有分隔符。

hexo-abbrlink这个插件，猜测是根据时间点算出的最终链接，这样就确保了博文链接的唯一化，只要不修改 md 文件的abbrlink的值， url 就永久不会改变。如此 md 文件名和文件内容也可以随便改了。后面的层级更短，这样也有利于 SEO 优化。

安装

1
npm install hexo-abbrlink --save

站点配置文件里:

1
2
3
4
permalink: post/:abbrlink.html
abbrlink:
 alg: crc32  # 算法：crc16(default) and crc32
 rep: hex    # 进制：dec(default) and hex

生成页面

1
2
# 注意一定要clean
hexo clean && hexo g

hexo-autonofollow

nofollow 标签是由谷歌领头创新的一个反垃圾链接的标签，并被百度、yahoo 等各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。
这里推荐 hexo-autonofollow 插件来解决。

安装：

1
npm install hexo-autonofollow  --save

在站点配置文件中添加以下代码：

1
2
3
4
5
nofollow:
  enable: true
  exclude: # 例外的链接，可将友情链接放置此处
  - exclude1.com
  - exclude2.com

hexo-renderer-pandoc

1
2
npm install hexo-renderer-pandoc --save
npm uninstall hexo-renderer-marked --save

hexo-filter-mermaid-diagrams

项目地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 1. 安装package
npm install hexo-filter-mermaid-diagrams --save

# 2. config
-------------------------------------------------------------
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true
-------------------------------------------------------------

# 3. include mermaid.js
## 在 themes/next/layout/_partials/footer.swig 末尾添加
--------------------------------------------------------------
{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
{% endif %}
---------------------------------------------------------------

hexo-deployer-git

  • 安装package
1
npm install hexo-deployer-git --save
  • 修改配置
1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]
参数 描述
repo 库（Repository）地址
branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测。
message 自定义提交信息

hexo-deployer-rsync

  • 安装package
1
npm install hexo-deployer-rsync --save
  • 修改配置。
1
2
3
4
5
6
7
8
9
deploy:
  type: rsync
  host: <host>
  user: <user>
  root: <root>
  port: [port]
  delete: [true|false]
  verbose: [true|false]
  ignore_errors: [true|false]
参数 描述 默认值
host 远程主机的地址
user 使用者名称
root 远程主机的根目录
port 端口 22
delete 删除远程主机上的旧文件 true
verbose 显示调试信息 true
ignore_errors 忽略错误 false

七牛云部署方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 在下载的qshell压缩包里选择和自己的系统选择相应的程序,不用安装,直接加到系统环境变量中即可.
wget -c http://devtools.qiniu.com/qshell-v2.1.8.zip

# ak和sk密钥可在七牛的”密钥管理”查看
qshell account ak sk

# 使用qupload批量上传文件到七牛
## 在需要上传的根目录下，添加文件 update.conf
{
   "src_dir"            :   "这里填写public在本地的绝对路径",
   "bucket"             :   "这里填写七牛存储空间名，刚才我新建的叫做myblog",
   "zone"               :   "nb",
   "ignore_dir"         :   false,
   "overwrite"          :   true,
   "check_exists"       :   false,
   "rescan_local"       :   true,
   "check_hash"         :   true,
   "up_host"            :   "http://upload.qiniu.com"
}
# up_host建议使用http://upload.qiniu.com. nb代表的是华东区。

# 10代表的是上传线程数
qshell qupload update.conf -c 10

七牛是采用CDN缓存加速的,这里有个问题就是我们更新了文件但是七牛缓存使得我们看到的文件并不是最新的,所以我们得主动刷新七牛的缓存.

  • cdnrefresh
  • API cache-refresh

参考资料:

  • hexo 官方文档
-------------本文结束感谢您的阅读-------------
坚持分享，您的支持将鼓励我继续创作！
0%