Getting Started with Hexo
Getting Started with Hexo
Getting Started with Hexo
本篇文章记录Hexo 安装,部署以及日常使用的流程,最终实现: 通过cmd输入4行命令将本地md文件更新到网络上的个人博客
文章分为4大部分,包含:
- Common Commands & Debug: 使用频率最高,放在最开始
- Install: 安装环境,到本地成功打开 (如果你想从头建立自己的博客,你应该从这里开始)
- Remote Deployment : 远程部署至github
- Reference: 参考教程
Common Commands & Debug
更新博客
将md文件放倒 /hexo/source/_post目录 进入hexo目录打开Git Bash,输入以下命令
hexo clean # 删除public文件下静态文件
hexo g # 即hexo generate,根据source内的md文件生成静态文件
hexo s # 即hexo server,本地预览博客
hexo d # 即hexo deploy, 按照配置文件部署导远端Bugfix
md文件不要使用水平分割线: 水平分割线会导致 hexo generate时报错
Error: Spawn failed
##进入站点根目录
cd /usr/local/src/hexo/hanyubolg/
##删除git提交内容文件夹
rm -rf .deploy_git/
##执行
git config --global core.autocrlf false
##最后
hexo clean && hexo g && hexo dHexo cdn.jsdelivr.net 接口404
- mermaid插件不生效 问题: 此前安装使用mermaid插件,博客上的流程图都正常显示,突然有一天直接显示白色源码 排查手段: 新建了一个hexo博客,确认OK,通过更换文件夹,发现问题出现在hexo\themes\matery\source\libs中 解决: 我直接复制粘贴libs文件夹,显示OK了
- 腾讯云托管无法访问博客”flask+uwsgi+nginx” 腾讯云托管无法识别+号,修改标题删除+号即可
Install
Hexo安装
系统信息: win10系统,已安装git
environment
Hexo 依赖 nodejs及其中的软件包管理器npm
- 直接在官网下载nodejs,安装
Npm8.19版本存在冲突会导致执行界面报错, 实测8.5版本OK
install hexo
npm install -g hexo-cli # 安装hexo
hexo -v # 测试是否安装成功Initialize hexo
mkdir xxx\xxx\hexo # 在安装路径上创建一个新文件夹用于放置hexo文件
hexo init
npm install # 更新nodejs的模块
hexo s此时进入 localhost:4000 查看本地博客显示
安装主题
在网络上找到需要主题的链接, hexo根目录下使用git clone
git clone https://github.com/blinkfox/hexo-theme-matery themes/matery打开_config.yml,修改主题配置
theme: matery更新博客,查看效果
功能优化
matary主题代码块显示bug
matary代码内存在代码块UI显示错乱的bug,可以通过修改hexo _config.yml进行解决
search功能无法使用, search.xml接口无响应
原生的salary主题未附带搜索插件, 手动安装即可,参考文档: 为 hexo 博客添加本地搜索功能
- 安装 hexo-generator-search插件
npm install hexo-generator-search --save- 根目录_config.yml新增相关配置
search:
path: search.xml
field: postHexo博客中无法显示图片
Typora中使用相对路径显示正常的图片,Hexo编译后无法显示,安装hexo-renderer-marked插件进行解决,缺点是Typora里面会显示错误
参考博客 : hexo博客如何插入图片 - 知乎 (zhihu.com)
插件安装配置
git bush插件安装
npm install hexo-renderer-markedconfig.yml修改配置
# 修改此属性
post_asset_folder: true
# 新增此属性
marked:
prependRoot: true
postAsset: true插件使用
hexo new md文档时会另外生成一个同名文件夹 ,里面放图片, 如 script_write_flow.png
 # Typora内会无法正常显示,但是Hexo会显示正常格式插入的图片无法使用此方式
Categories&Tags功能实现
参照主题官方文档 , 设置Categories,Tags文件夹下index.md文档信息
文档信息中填写Categories分类,及多条相关Tags标签
- 尤其需要注意的是, “:” 后边必须添加一个空格
categories: Advancement
tags: ["Blog","Software"]重新部署hexo时,此条检查即可
hexo matary主题支持mermaid
下载支持插件
npm install --save hexo-filter-mermaid-diagrams修改主题 _config.yml,打开mermaid
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default truematary lib已经含有mermaid文件,如果你的主题没有,参考这个安装hexo渲染mermaid
hexo三连查看显示效果
hexo上对mermaid代码格式要求比较高,如果显示不正常在Typora打开源码模式查看修改
hexo支持访问次数计数
matery支持使用不蒜子进行访问计数,直接在配置文件打开即可
busuanziStatistics:
enable: true
totalTraffic: true # 总访问量
totalNumberOfvisitors: true # 总人次不蒜子的底层原理是, 将页面使用的域名注册到第3方服务器,使用接口进行累计计数.所以在本地查看的时候,访问数会特别夸张,但是部署后就会正常显示.而且更换域名的时候会导致重新计数 针对更换域名的情况,目前不蒜子不支持初始化修改访问数,可以通过修改js代码修改访问次数达到效果 参照博客: JQuery实现“不蒜子”初始化首次数据 - 国际哥的独立博客 (shaoguoji.cn)
文章链接转静态短地址
Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，这里使用用hexo-abbrlink 生成静态文章链接
安装命令
npm install hexo-abbrlink --save修改根目录config文件
permalink: :year/:month:day:abbrlink.html # 修改
abbrlink: #添加
alg: crc16 #算法选项：crc16丨crc32
rep: dec #输出进制：dec为十进制，hex为十六进制个性化
查看主题文件夹内的README,进行修改配置;你可以像我一样,维护一个个性化文档,可用于重新部署
SEO 优化
参照: hexo-seo优化技巧 | 岛 (gitee.io)
注意,: 添加html的方式进行验证时, 需要修改的文件是使用主题目录下的 head.ejs
Remote Deployment
三大git平台均可部署Hexo,由于gitee需要人工审核,gitlab操作较为复杂,最后选择github进行搭建
github创建仓库
- 登录github页面 -> New Repository -> 创建仓库 ,Repository name设置为 ${userName}.github.io,其他默认 -> 复制SSH 链接
值得注意的是, 使用Github的Https容易出现网络连接异常”Spawn Fail”,所有优先使用SSH链接
github获取 Access Token
Github目前连接仓库开始使用Private Access Token 作为凭证,提前创建一个全权限,永久有效的Token方便连接使用
- 创建token页面入口
- 点击github头像 -> Setting -> Developers settings -> Personal access tokens -> generate new token
- 创建token
- Note: token名
- Expiration: 到期日 ,个人可直接无限期
- scope: 权限范围, 个人可直接全部勾选
- 配置以上信息 -> generate token -> 获取 token信息,保存到个人长期文件**(和密码一样重要)**
安装git插件
npm install hexo-deployer-git --save配置hexo
hexo目录打开_config.yml, 修改deploy的配置
deploy:
type: git
repo: ${github拿到的SSH链接}
branch: 你要推送到仓库的分支（默认为master）远程部署
- hexo d 部署到github -> 命令运行过程中会提醒输入Access Token,填入github 拿到的token即可 -> web登录 ${userName}.github.io查看效果