Hexo 搭建

官方参考链接

以下均是在ubuntu环境，验证可行

安装步骤

  • 下载nodejs

官网下载压缩包,一般为node-xxxx-linux-x64.tar.xz 格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 解压
tar xf node-xxxx-linux-x64.tar.xz

# 创建Hexo文件夹
cd ~
mkdir Hexo

# 重命名文件夹为node,移动到Hexo目录
mv node-xxxx-linux-x64 Hexo/node

# 创建软链接
sudo ln -s ~/Hexo/node/bin/node /usr/bin/node
sudo ln -s ~/Hexo/node/bin/npm /usr/bin/npm
sudo ln -s ~/Hexo/node/bin/npx /usr/bin/npx

# end 创建后会发现，可以直接使用 npm 指令

  • 安装 hexo
1
2
3
4
5
6
7
8
9
# 在 Hexo目录打开终端执行
npm install -g hexo-cli

# 创建文件夹
mkdir hexo
hexo init <hexo>
cd <hexo>
npm install

  • hexo启动、编译
1
2
3
4
5
6
7
8
# 清除缓存
hexo clean
# 编译
hexo g
# 启动
hexo s

# 根据提示可以访问demo页
  • 设置端口转发

/etc/nginx/conf.d/default.conf中修改

1
2
3
4
5
6
7

// 修改端口号
server_name  localhost:4000;

// location 增加 指定反向代理
proxy_pass   http://127.0.0.1:4000;

设置完后，可以不带端口访问

  • 主题更改

下载后主题，如 butterfly 移入themes文件夹
_config.yml中修改

1
theme 后修改主题 名（butterfly）
  • Front-matter语法

Hexo会把markdown文档解析成网页，Front-matter 是md文件头，用于生成后的网页的一些配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法 解释
title 【必需】頁面標題
date 【必需】頁面創建日期
type 【必需】標籤、分類和友情鏈接三個頁面需要配置
published 【可选】false代表不显示到主页，默认显示
sticky 【可选】文章置顶功能 数值越大越靠前
description 【可選】頁面描述
keywords 【可選】頁面關鍵字
top_img 【可選】頁面頂部圖片
mathjax 【可選】顯示mathjax(當設置mathjax的per_page: false時，才需要配置，默認 false)
katex 【可選】顯示katex(當設置katex的per_page: false時，才需要配置，默認 false)
aside 【可選】顯示側邊欄 (默認 true)
aplayer 【可選】在需要的頁面加載aplayer的js和css,請參考文章下面的音樂 配置
highlight_shrink 【可選】配置代碼框是否展開(true/false)(默認為設置中highlight_shrink的配置)
layout 【布局 config.default_layout
updated 更新日期 文件更新日期
tags 标签（不适用于分页）
categories 分类（不适用于分页）
comments 开启文章的评论功能 true
permalink 文章的永久链接，永久链接应该以 / 或 .html 结尾
excerpt 纯文本的页面摘要。使用 该插件 来格式化文本
  • 关闭终端后也能运行程序
1
setsid hexo s

过程问题

  • 问题1
1
extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

原因没有pug和stylus渲染器

1
2
3
4
5

npm install hexo-renderer-pug hexo-renderer-stylus --save
npm install hexo-deployer-git --save 

##待测试 yarn add hexo-deployer-git
  • 问题2
1
2
3

**extends includes/layout.pug block content include includes/recent-posts.pug include includes/partial
**

未安装以下模块，报错内容先不装

1
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive
  • 问题3
1
2
err: Error: ENOSPC: System limit for number of file watchers reached, watch '/home/axj/Hexo/hexo/source/'

系统构建文件数量受限

1
2
echo fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf 
sudo sysctl -p

关于Hexo使用

1
2
3
4
5
# 站内跳转 

{% post_link 文章文件名（不要后缀） 文章标题（可选） %}
#例：
post_link （文件名）{% post_link Hello_World %}

评论系统

** Valine 系统 （暂去除）**

1
2
3
4
5
6
7
8
9
10
11
12
13
# 评论系统增加
comments:
  use: Valine 
# 申请Leancloud 后，替换自己APPid和 appkey
valine:
  appId: xxxxxx # leancloud application app id
  appKey: xxxxxxx # leancloud application app key
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

** twikoo 系统 私有部署**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 安装docker
sudo apt  install docker.io


# docker 安装
sudo docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8098:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo
docker run -p 8098:8080 -v /root/twikoo/data:/app/data -d imaegoo/twikoo
docker rm fe1a86072293
docker ps -l


# config 文件中修改
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: http://XXXXX 服务器ip
  region:
  visitor: false
  option:

部署 twikoo 发生的问题
1、CORS 问题
原因是：https 不能加载http资源
解决方法：
重新申请 子域名ssl证书，然后部署在Nginx.conf
注意：需要服务器管理界面添加域名解析

未来版本

搜索系统

注意：搜索功能也需要申请APPkey

1
2
3
4
5
6
npm install hexo-algoliasearch --save
yaml 修改:
algolia_search:
  enable: true
  hits:
    per_page: 6

豆瓣插件

1
2
3
4
5
6
7
8
9
10
11
12
npm install hexo-butterfly-douban --save
# _config.yml 增加
douban:
  user: 267540748
  builtin: true
  book:
    title: '风停在窗边嘱咐你要热爱这个世界'
    quote: '读完时间已久远，在此时只是作为归纳。'
  movie:
    title: '下雨天打孩子 闲着也是闲着'
    quote: '看完时间已久远，在此时只是作为归纳。'
  timeout: 10000

user: 你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。
builtin: 是否将生成页面的功能嵌入 hexo s 和 hexo g 中，默认是 false ，另一可选项为 true 。
title: 该页面的标题。
quote: 写在页面开头的一段话,支持html语法。
timeout: 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

  • 使用
1
2
axj@HNcs-axj:~/Hexo/hexo$ hexo new page books
axj@HNcs-axj:~/Hexo/hexo$ hexo new page movies

在source创建md后，需要在前面增加type: “books”或者type: “movies”（空格）

加载本地html

参考链接

可以使用Hexo的插件来实现聊天功能。例如，可以使用Hexo-Chat插件，它可以帮助您在Hexo中添加聊天功能。此外，还可以使用Hexo-Chat-Widget插件，它可以帮助您在butterfly主题中添加聊天功能。

增加音乐播放器

参考链接

仅使用meting

1
2
npm install hexo-tag-aplayer -s

config 中增加

1
2
aplayer:
  meting: true

有关

的选项列表如下:

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease , tencent , kugou , xiami , baidu
type 必须值 song , playlist , album , search , artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式： all , one , none
order list 列表播放模式： list , random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none , metadata , auto
theme #ad7a86 播放器风格色彩设置

示例参考：

1
2
<!-- {% meting "185697" "netease" "song" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%} -->

使用 aplayer插件
config配置

1
2
3
4
5
6
aplayer:
  cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  # 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
  meting: true       # MetingJS 支持
  meting_cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js # 引用 Meting.js 外部 CDN 地址 (默认不开启)

aplayer: 固定参数，必填
title : 曲目标题
author: 曲目作者
url: 音乐文件 URL 地址
picture_url: (可选) 音乐对应的图片地址
narrow: （可选）播放器袖珍风格
autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
width:xxx: (可选) 播放器宽度 (默认: 100%)
lrc:xxx: （可选）歌词文件 URL 地址

示例参考：

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
# 单曲
{% aplayer "Lovelx" "Jay" "/mp3/huahai.mp3" "autoplay" %}
# 歌单
{% aplayerlist %}
{
    "narrow": false,
    "autoplay": false,
    "mode": "random",//（可选）'random', 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3,
    "mutex": true,
    "theme": "#e6d0b2",
    "preload": "metadata",
    "listmaxheight": "513px",
    "music": [
        {
            "title": "前前前世",
            "author": "RADWIMPS",
            "url": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3",
            "pic": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg",
            "lrc": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc"
        },
        {
            "title": "光るなら",
            "author": "Goose house",
            "url": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3",
            "pic": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg",
            "lrc": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc"
        }
    ]
}
{% endaplayerlist %}

文章跳转

1
2
3
{% post_link 文章文件名（不要后缀） 文章标题（可选） %}


其他

待更新