概述
什么是 Hexo？
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
准备环境
NodeJs安装
从官网https://nodejs.org/en/ 下载，直接安装即可，测试一下
node -v
# v11.15.0
npm -v
# 6.7.0
image
npm修改源
获取npm源
npm get registry
修改npm源
npm config set registry http://registry.npm.taobao.org/
如果想重置回去
npm config set registry https://registry.npmjs.org/
安装Git
从官网https://git-scm.com/download/win 下载，直接安装即可
安装hexo
npm install -g hexo-cli
建站部署
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
# 初始化博客文件夹
hexo init <folder>
# 进入博客目录
cd <folder>
# 安装
npm install
新建完成后，指定文件夹的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
博客结构
_config.yml
网站的 配置 信息，您可以在此配置大部分的参数。
package.json
应用程序的信息。
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "4.1.1"
},
"dependencies": {
"hexo": "^4.0.0",
"hexo-deployer-git": "^2.1.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^2.2.0",
"hexo-generator-index-pin-top": "^0.2.2",
"hexo-generator-searchdb": "^1.2.0",
"hexo-generator-tag": "^1.0.0",
"hexo-helper-live2d": "^3.1.1",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-marked": "^2.0.0",
"hexo-renderer-stylus": "^1.1.0",
"hexo-server": "^1.0.0",
"hexo-symbols-count-time": "^0.7.0",
"hexo-tag-aplayer": "^3.0.4",
"hexo-tag-cloud": "^2.1.1",
"live2d-widget-model-shizuku": "^1.0.5"
}
}
scaffolds
模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题来生成静态页面。
本地预览
# 编译项目，输入命令：
hexo g
# 运行项目，输入命令：
hexo s
在浏览器地址栏输入 http://localhost:4000/ 就能看到效果啦
部署到Gitee
安装插件
npm install hexo-deployer-git --save
修改站点配置文件
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://gitee.com/valten/blog
root: /blog/
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@gitee.com:valten/blog.git
branch: prod
部署
hexo clean && hexo g && hexo d
测试
浏览器地址输入 https://gitee.com/valten/blog
部署到Gihub
安装插件
npm install hexo-deployer-git --save
修改站点配置文件
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://valten-hyl.github.io
root: /
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:valten-hyl/valten-hyl.github.io.git
branch: master
部署
hexo clean && hexo g && hexo d
测试
浏览器地址输入 https://valten-hyl.github.io
最后我还是选择了Gitee。
为什么使用Gitee而不使用GitHub
1、GitHub Pages访问龟速不稳定；
2、GitHub私有仓库收费，而Gitee私有仓库免费；
配置优化
分类和标签
定义分类页
hexo new page categories
---
title: 分类
date: 2019-12-14 10:56:27
type: "categories"
---
定义分类页
hexo new page tags
---
title: 标签
date: 2019-12-14 10:56:27
type: "tags"
---
文章添加分类和标签属性
---
title: SpringBoot+Mybatis 通过databaseIdProvider支持多数据库
date: 2019-12-14 16:42:51
tags:
- Spring Boot
- Mybatis
- databaseIdProvider
- 多数据库
categories:
- [Java,Spring Boot] # 多级标签
- Mybatis
---
修改主题配置文件，显示分类和标签菜单
# External url should start with http:// or https://
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
#about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
关于
hexo new page about
修改主题配置文件，显示关于
# External url should start with http:// or https://
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
编辑about目录下的index.md。
公益404
hexo new page commonweal
修改主题配置文件，#commonweal: /404/ || heartbeat改成commonweal: /404.html || heartbeat。
# External url should start with http:// or https://
menu:
home: / || home
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
commonweal: /404.html || heartbeat
附上index.md
---
title: 404 Not Found：该页无法显示
date: 2019-12-14 17:40:17
permalink: /404
---
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
homePageName="返回宝贝回家" homePageUrl="https://valten.gitee.io/blog">
</script>
</body>
</html>
阅读全文按钮
在文章中想要预览的文字后加``，这在之后的内容就会隐藏起来，点击Read More就会显示全文。
添加图片
---
title: Hello World
tags:
- Hello
- World
categories:
- Hello
photos:
- "http://q2gep6iwb.bkt.clouddn.com/blog/20191213/7Jk7p7nSUWpC.jpg"
---
文章置顶
移除默认安装的插件：
npm uninstall hexo-generator-index --save
安装新插件:
npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：top: true
如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：
# Post a.md
title: a
top: 1
# Post b.md
title: b
top: 10
文章 b 便会显示在文章 a 的前面。
添加萌宠看板娘
安装插件
npm install hexo-helper-live2d --save
安装想要的模型
npm install live2d-widget-model-shizuku --save
站点配置文件添加以下配置
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true # 开启live2d
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
# 选择哪种模型 https://huaji8.top/post/live2d-plugin-2.0/
# shizuku、wanko、hibiki、z16、haru、Epsilon2.1、koharu、haruto、
# npm install live2d-widget-model-wanko --save
use: live2d-widget-model-shizuku
display: #放置位置和大小
position: left
width: 150
height: 300
mobile:
show: false # 是否在手机端显示
修改站点基本信息
# Site
title: 青衫不改 # 标题
subtitle: 小白の博客 # 副标题
description: 浮生若梦，为欢几何 # 描述
keywords: 'Hexo, NexT' # 网站默认关键词
author: valten
language: en
timezone: ''
文章永久链接
修改站点配置文件
#permalink: :year/:month/:day/:title/
permalink: :category/:title/
更换主题
# 下载主题
git clone https://github.com/theme-next/hexo-theme-next.git themes/next
修改站点配置文件
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 值为themes目录下主题文件夹的名称
查看效果
hexo clean && hexo g && hexo s
社交链接
social:
GitHub: https://github.com/valten-hyl || github
E-Mail: mailto:valtenhyl@163.com || envelope
Weibo: https://weibo.com/3114281855 || weibo
简书: https://www.jianshu.com/u/9f816d1869d4 || book
掘金: https://juejin.im/user/5baa5f9d5188255c5d569951 || ils
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
#RSS: /atom.xml || rss
social_icons:
enable: true # 是否在社交链接标签上显示图标
icons_only: true # 只显示图标
transition: false # 是否显示过渡效果
友情链接
# Blog rolls
links_settings:
icon: link # 链接图标
title: 友情链接 # 链接文字
# Available values: block | inline
layout: inline # 链接样式
links:
圣豪Boy: https://xshcloudy.gitee.io/blog/
BootCDN: https://www.bootcdn.cn/
易百教程: https://www.yiibai.com/
代码高亮
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: default
图片浏览放大
cd themes/next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
修改主题配置文件
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true
站点访问统计
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
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
评论系统
Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。
登录 Leancloud 官网，注册之后创建一个应用 ，【设置】->【应用Keys】，根据显示的内容修改主题配置文件
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine: # 评论
enable: true
appid: jflkasjdklfjlajsdlkfklsd-sdfasdf # Your leancloud application appid
appkey: ahskfdhlkasdkfjkalsdflasdf # Your leancloud application appkey
notify: true # 评论回复邮件提醒, See: https://github.com/xCss/Valine/wiki
verify: false # 验证码服务 Verification code
placeholder: 留言区 # 留言区 Comment box placeholder
avatar: mm # 头像配置 Gravatar style
guest_info: nick,mail,link # 回复填写的信息 Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
本地搜索
npm install hexo-generator-searchdb --save
修改站点配置文件
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 10000
修改主题配置文件，开启本地搜索
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
文字数量和阅读时长
npm install hexo-symbols-count-time --save
修改主题配置文件
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 4
wpm: 275
开启RRS订阅
npm install hexo-generator-feed --save
站点配置文件添加以下配置
# RSS订阅
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
主题配置文件
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/valten-hyl || github
E-Mail: mailto:valtenhyl@163.com || envelope
Weibo: https://weibo.com/3114281855 || weibo
简书: https://www.jianshu.com/u/9f816d1869d4 || book
掘金: https://juejin.im/user/5baa5f9d5188255c5d569951 || ils
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
RSS: /atom.xml || rss
标签云配色
# TagCloud settings for tags page.
tagcloud:
# All values below are same as default, change them by yourself.
min: 12 # Minimun font size in px
max: 31 # Maxium font size in px
start: "#381096" # Start color (hex, rgba, hsla or color keywords)
end: "#922a4b" # End color (hex, rgba, hsla or color keywords)
amount: 200 # Amount of tags, change it if you have more than 200 tags
禁止页面评论
在不需要评论的页面或者文章Front-matter（文件最上方以—分隔的区域）加上comments: false
---
title: categories
date: 2019-12-14 17:22:21
type: "categories"
comments: false
---
AddThis分享
首先在AddThis官网注册账号，选择并配置分享按钮，激活，获取pubid，修改主题配置文件
# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id: ra-2341234445555
Fork me on GitHub
修改主题配置文件
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/valten-hyl
title: Follow me on GitHub
隐藏强力驱动和主题信息
powered:
# Hexo link (Powered by Hexo).
enable: false
# Version info of Hexo after Hexo link (vX.X.X).
version: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false
在线聊天
首先到DaoVoice上注册一个账号,注册完成后会得到一个app_id，修改主题配置文件
# DaoVoice
# Online contact
daovoice: true
daovoice_app_id: 123sfa # 这里填你刚才获得的 app_id
打开themes/next/layout/_partials/head/head.swig，在文件中添加
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/e30c3408.js","daovoice")
daovoice('init', {
app_id: "{{ theme.daovoice_app_id }}"
});
daovoice('update');
</script>
{% endif %}
嵌入歌单
新建歌单页面
---
title: palylist
date: 2019-12-15 01:04:41
type: "playlist"
comments: false
---
安装播放器
npm install hexo-tag-aplayer --save
修改站点配置文件
其中id是歌单生成的外链的id
# metingjs
metingjs:
server: netease
id: 3111577471 # 歌单id 8537501
type: playlist
theme: '#2980b9'
loop: all
autoplay: false
order: random
修改模板
打开themes/next/layout/page.swig，在文件中加入以下代码
{% elif page.type === 'playlist' %}
{{ page.content }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js style="margin-top: 1.5rem; width: auto; height: auto;" server="{{ config.metingjs.server }}" type="{{ config.metingjs.type }}" id="{{ config.metingjs.id }}" theme="{{ config.metingjs.theme }}" loop="{{ config.metingjs.loop }}" autoplay="{{ config.metingjs.autoplay }}" order="{{ config.metingjs.order }}" storageName="aplayer-setting" lrctype=0 />
{% elif page.type === 'schedule' %}
动态标签云
安装插件
npm install hexo-tag-cloud --save
修改站点配置文件
# hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica
textColor: '#192e4d'
textHeight: 25
outlineColor: '#5f7a74'
maxSpeed: 0.5 # [0.01, 1]
修改页面模板
打开themes/next/layout/page.swig，找到class="tag-cloud"，在里面添加以下代码
# hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica
textColor: '#192e4d'
textHeight: 25
outlineColor: '#5f7a74'
maxSpeed: 0.5 # [0.01, 1]
添加背景图片
打开themes/next/source/css/_common/scaffolding/base.styl
body {
background: $body-bg-color;
color: $text-color;
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
// 背景图片
background: url(http://q2gep6iwb.bkt.clouddn.com/blog/20191215/s6j9RkCgHaW4.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
+tablet-mobile() {
// Remove the padding of body when the sidebar is open.
padding-left: 0 !important;
padding-right: 0 !important;
}
}
// 修改主体透明度
.main-inner {
background: #0a1627;
opacity: 0.9;
}
// 修改菜单栏透明度
.header-inner {
opacity: 0.8;
}
动态背景
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
修改主题配置文件
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
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
命令
常用命令：
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy # 将.deploy目录部署到GitHub
常用复合命令：
hexo d -g
hexo s -g
hexo clean && hexo g && hexo s
hexo clean && hexo g && hexo d
简写：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
参考：
https://www.jianshu.com/p/6f77c96b7eff
https://blog.csdn.net/u012294515/article/details/83094693
https://blog.csdn.net/loze/article/details/94206726
网友评论