Hexo
Blog, Hexo, Note
Source
Edit
History

使用 Hexo 搭建博客

使用Hexo搭建博客

[TOC]

安装

GIT

  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core
  • Linux (Arch 系列)：sudo pacman -S git

Node.js

HEXO

1
$ npm install -g hexo-cli

配置

建立网站

创建博客文件夹

1
mkdir <blog_name>

在此文件夹初始化

1
hexo init <blog_name>

###　配置 Hexo

网站

1
2
3
4
5
6
7
8
# Site
title:            
subtitle: 
description: 
keywords:
author: 
language: 
timezone:
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站关键词
author 作者名字
language 网站使用的语言
timezone 网站时区：详见时区列表

URL

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 
root: 
permalink: :year/:month/:day/:title/
permalink_defaults:
参数 描述
url 网址
root 网站根目录
permalink 文章的永久链接格式
permalink_defaults 永久链接中各部分的默认值

提醒

  1. 如果你的网站在子目录中，如：https://yoursite.com/blog ，就把你的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

  2. 不设置 URL，会回报以下错误

    $ hexo clean && hexo g && hexo s

    FATAL Cannot read property ‘replace’ of null

    TypeError: Cannot read property ‘replace’ of null

目录

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md
参数 描述
source_dir 资源文件夹
public_dir 公共文件夹
tag_dir 标签文件夹
archive_dir 归档文件夹
category_dir 分类文件夹
code_dir Include code 文件夹
i18n_dir 国际化文件夹
skip_render 跳过文件的渲染

文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
参数 描述
new_post_name 新文章的文件名称
default_layout 预设布局
auto_spacing 在中文和英文之间加入空格
titlecase 把标题转换为 title case
external_link 在新标签中打开链接
filename_case 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts 显示草稿
post_asset_folder 启动 Asset 文件夹
relative_link 把链接改为与根目录的相对位址
future 显示未来的文章
highlight 代码块的设置

部署

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 
  repo:

基本功能

1
2
3
4
5
6
7
#打开 Git bash
#清除生成的网页文件
hexo clean
#生成网页文件
hexo g
#上次网页文件到 Github page
hexo d

常用页面添加

  • 新增一个 404 页面：hexo new page 404

  • 新增一个 about 页面：hexo new page about

  • 新增一个分类页面：hexo new page categories

  • 新增一个 tag 标签云页面：hexo new page tags

    在 source/tags/index.md 编辑:

    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2018-03-05 11:11:11
    type: "tags"
    ---

插件使用

插件官网：https://hexo.io/plugins/

基本命令

  • 安装插件：npm install 插件名 --save

  • 卸载插件：npm uninstall 插件名 --save

  • 更新插件和博客框架（需要在 hexo 目录下）：

    1
    npm update
    • 实质是通过根目录下 package.json 文件更新各大组件

必备插件

  • 支持RSS：npm install hexo-generator-feed --save

  • 文章加密：npm install hexo-blog-encrypt

  • 本地搜索支持，需要主题有对应的设置：npm install hexo-generator-search --save

  • TOC设置npm install hexo-renderer-markdown-it-plus

  • HTML 压缩：npm install hexo-html-minifier --save

  • JavaScript 压缩：npm install hexo-uglify --save

  • CSS 压缩插件：npm install hexo-clean-css --save

  • 图片懒加载法案一：npm install hexo-lazyload-image --save

    选择性

  • SEO优化：npm install hexo-generator-seo-friendly-sitemap --save
  • 生成站点地图：npm install hexo-generator-sitemap --save
  • 生成百度站点地图：npm install hexo-generator-baidu-sitemap --save
  • 图片懒加载方案二：npm install hexo-renderer-marked-lazy --save
    • 可能会导致无法显示外链图片

功能实现

版权声明

打开 Next 主题目录下的 _config.yml 文件，post_copyright 设置 enable: true。

打赏功能

  1. 打开 Next 主题目录下的 _config.yml 文件，设置如下：
1
2
3
4
5
# Reward
reward_comment: Donate comment here
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
bitcoin: /images/bitcoin.png
  1. 将二维码图片放置在主题目录下的 .\source\images目录下。

RSS订阅

在 hexo 的 _config.yml 添加：

1
2
3
4
5
6
7
8
9
10
#RSS 订阅插件
plugin:
- hexo-generator-feed
#RSS 插件配置
feed:
  type: rss2
  path: atom.xml #atom.xml或者rss.xml，放根目录下
  limit: 20
  hub:
  content: true

目录功能

参考文章

  • 安装hexo-renderer-markdown-it-plus
1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save
  • 站点配置文件_config.yml
1
2
3
4
5
6
7
8
9
10
markdown_it_plus:
     highlight: true
     html: true
     xhtmlOut: true
     breaks: true
     langPrefix:
     linkify: true
     typographer:
     quotes: “”‘’
     pre_class: highlight
  • 在文档任意位置输入：@[TOC]，即可生成目录和锚点

图片懒加载

安装 Hexo-lazyload-image 插件

修改 _config.yml 文件，设置懒加载用图

1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: # eg. ./images/loading.png

本地搜索

安装 hexo-generator-search 插件

站点 _config.yml 添加:

1
2
3
search:
  path: search.xml
  field: post
  • path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
  • field - the search scope you want to search, you can chose:
    • post (Default) - will only covers all the posts of your blog. 只索引文章(post)
    • page - will only covers all the pages of your blog. 只索引页面
    • all - will covers all the posts and pages of your blog. 全部索引

在线管理

无法直接在 Github pages 等托管中工作，需要搭配服务器使用

安装 hexo-admin 插件

在 hexo 的 _config.yml 添加

1
2
3
4
admin:
  username: myfavoritename #登录名
  password_hash: xxxxx #密码对应的md5 hash值
  secret: a secret something #用于保证cookie安全

域名/admin，进入后台

本地文件夹

用于插入本地图片/音乐/视频

  • 配置文件_config.yml 的post_asset_folder设置为true

  • Hexo 目录下执行npm install hexo-asset-link --save

  • 再运行hexo n "xxxx"来生成md文件时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹，用来放入图片

  • 插入图片格式： 

    • 1
      2
      ![Alt Text](./2019-02-14-Test-Post/Test-Image.png "Title Text")
      ![Alt Text](2019-02-14-Test-Post/Test-Image.png "Title Text")
    • 1
      <img src="图片所在目录/图片名.jpg" />

点击特效

点击红心特效：

  1. 在/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);
  1. 在\themes\next\layout\_layout.swig文件末尾添加：
1
2
\<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

插入多媒体

  • 插入视频

    • 同网易云音乐，生成iframe类型外链播放器来引用。

  • 插入音乐

    • 网易云音乐网页端，生成外链播放器，将代码复制到博文任意位置
1
2
#本文的范例
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1859310&auto=1&height=66"></iframe>

  • 插入图片

    • 博文中引用外链图片 ![标题，可选](图片链接)

Gitment评论系统

Hexo-Next 添加 Gitment 评论系统

Hexo博客Next主题添加Gitment评论系统坑点

Live2D 模型

hexo-helper-live2d

  1. 安装插件

npm install --save hexo-helper-live2d

  1. 安装模型

npm install live2d-widget-model-hijiki

  1. 配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hijiki
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: false
  1. 补充

live2D 模型预览

文章摘要

  • 正文使用 <!--more-->截断，首页摘要只显示该标记之前的内容，包括图片。

  • YAML 添加 photos 属性，用于摘要显示图片。

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 
    date: 
    tags: 
    categories: 
    photos:
        - "https://xxx.jpg"
    ---

PDF 插件

  1. 安装
    npm install --save hexo-pdf
1
2
3
4
5
6
7
8
安装
npm install --save hexo-pdf

使用
网络引用：
{% pdf http://xxx.pdf %}
本地文件夹：
{% pdf  test.pdf %}

HTML5 音乐播放器 aplayer

项目地址

1
2
3
4
5
6
7
8
#安装
npm install hexo-tag-aplayer --save

#需要音乐的地方插入
{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

#本地文件夹开启情况下
{% aplayer "Black Flies" "Ben Howard" "Black Flies - Ben Howard.mp3" "http://p1.music.126.net/GIM5l9xNmtudCJ72afnzeQ==/18494885093016151.jpg" %}

HTML5 视频播放器 dplayer

项目地址

1
2
3
4
5
6
7
8
9
10
#安装
npm install hexo-tag-dplayer --save

#插入视频

#网络地址
{% dplayer "url=http://home.ustc.edu.cn/~mmmwhy/GEM.mp4" "pic=http://home.ustc.edu.cn/~mmmwhy/GEM.jpg" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

#本地文件夹功能开启情况下
{% dplayer "url=广州沙面.20190405.540P.简化.mp4"  "pic=广州沙面.20190405.540P.简化.png" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

我的博客

网站

  • Theme: Next
  • Tags
  • Categories
  • RSS
  • 本地搜索文章
  • hexo-admin 后台管理

文章功能

  • TOC设置
  • 加密模块
  • 图片懒加载（非必要不安装）
  • 本地图片
  • Aplayer 本地多媒体播放

其他

  • SNS: Github, E-mail
  • 公益404
  • Donate
  • Gitment评论系统
  • 点击红心特效

参考链接

Easy Hexo

使用 Github 空间搭建 Hexo 技术博客

Hexo-lazyload-image图片懒加载

使用Encrypt插件给Hexo博客文章加密

hexo之加密插件hexo-blog-encrypt

Hexo 主题 —— NexT 设置

Hexo Next如何在文章摘要展示图片

如何为 Hexo 博文加入图片

Hexo博客yilia主题首页添加helper-live2d模型插件

GitHub中Hexo next主题下搭建的博客中增加PDF插件