hexo 快速开始
hexo 是常用的静态网页构建工具,支持markdown,拥有丰富的插件。常用于构建个人博客。
环境
OS
window 10 1809
node
10.13.0
npm
6.6.0
PowerShell
5.1.17763.134
hexo
3.8.0
hexo-cli
1.1.0
开始构建
shift+右键
启动 PowerShell
,创建 hexo 目录(构建器项目)
1 |
|
进入目录
1 |
|
全局安装 hexo-cli
,如果还没有安装nodejs和git,请参考hexo文档,此处不再重复记录
1 |
|
初始化 hexo
1 |
|
安装依赖包
1 |
|
生成静态资源
1 |
|
本地启动sever测试
1 |
|
浏览器访问 localhost:4000
可以看到一个简单的个人博客系统已经完成了!
参考 hexo docs
更换主题
这里以 Next v6.0.x 为例子
下载主题
1 |
|
修改主题,修改./_config.yml
中的theme
为next
注意区分./themes/next/_config.yml
为了方便区分,下面更换称呼
./_config.yml
称为系统配置
./themes/next/_config.yml
称为主题配置
1 |
|
保存
清理缓存
1 |
|
重新构建
1 |
|
本地启动
1 |
|
浏览器访问 localhost:4000
成功更换主题!
Hexo 优化
基本设置参考
title: xxx’s blog
author: xxx
language: zh-CN
timezone: Asia/Shanghai
主题优化
添加评论系统
此处使用 valine
参考 快速申请 申请
leancloud
账号,并获取APP ID
和APP Key
打开主题配置
./themes/next/_config.yml
定位到
valine
1
2
3
4enable: true
appid: <APP ID>
appkey: <APP Key>设置侧边栏
在主题配置中,找到
sidebar
例如修改显示方式
display
1
2
3
4
5#display: post 默认
#display: always 总是显示
display: hide 开始隐藏
#display: remove 不显示导航菜单
在主题配置中,找到
menu
注释
tags
等,读者可以自由选择1
2tags: /tags/ || tags
在根目录执行指令
1
2hexo new page "tags"
增加内容,关闭评论和指定页面类型
1
2
3comments: false
type: "tags"执行后,会创建文件夹
./source/tags/
,并在里面初始化tags
页面的md文件index.md
重新构建后,可以看到页面多了一个导航栏
tags
1
2
3hexo clean
hexo g
hexo server文章阅读数leancloud_visitors
在主题配置中,找到
leancloud_visitors
填写 AppID 和 AppKey
1
2
3appid: <APP ID>
appkey: <APP Key>社交
在主题配置中,找到
social
启用
social
添加相应的社交工具以及账号
Next主题开启字数统计及阅读时长
安装 hexo-symbols-count-time
1
2npm i hexo-symbols-count-time -D
hexo 配置文件增加
1
2
3
4
5
6symbols_count_time:
symbols: true # 文章字数
time: true # 阅读时长
total_symbols: true # 所有文章总字数
total_time: true # 所有文章阅读中时长Next 主题配置文件
1
2
3
4
5
6
7symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275永久连接
安装uuid
1
2npm install hexo-uuid --save
修改hexo配置文件
1
2permalink: :year:month:day:uuid/