Getting Started with Hexo

Blog Software
Advancement
Publish Date:   2022-05-30
Word Count:   1.9k

Getting Started with Hexo

本篇文章记录Hexo 安装,部署以及日常使用的流程,最终实现: 通过cmd输入4行命令将本地md文件更新到网络上的个人博客

文章分为4大部分,包含:

  1. Common Commands & Debug: 使用频率最高,放在最开始
  2. Install: 安装环境,到本地成功打开 (如果你想从头建立自己的博客,你应该从这里开始)
  3. Remote Deployment : 远程部署至github
  4. 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

  1. md文件不要使用水平分割线: 水平分割线会导致 hexo generate时报错

  2. 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 d

  3. Hexo cdn.jsdelivr.net 接口404

​ Hexo cdn.jsdelivr.net 失效_

  1. mermaid插件不生效

    问题: 此前安装使用mermaid插件,博客上的流程图都正常显示,突然有一天直接显示白色源码

    排查手段: 新建了一个hexo博客,确认OK,通过更换文件夹,发现问题出现在hexo\themes\matery\source\libs中

    解决: 我直接复制粘贴libs文件夹,显示OK了

  2. 腾讯云托管无法访问博客”flask+uwsgi+nginx”

    腾讯云托管无法识别+号,修改标题删除+号即可

Install

Hexo安装

系统信息: win10系统,已安装git

  1. environment

    Hexo 依赖 nodejs及其中的软件包管理器npm

    • 直接在官网下载nodejs,安装

    Npm8.19版本存在冲突会导致执行界面报错, 实测8.5版本OK

  2. install hexo

    npm  install -g hexo-cli    # 安装hexo
hexo -v               # 测试是否安装成功

  3. Initialize hexo

    mkdir xxx\xxx\hexo      # 在安装路径上创建一个新文件夹用于放置hexo文件
hexo init             
npm install           # 更新nodejs的模块
hexo s

    此时进入 localhost:4000 查看本地博客显示

安装主题

  1. 在网络上找到需要主题的链接, hexo根目录下使用git clone

    git clone https://github.com/blinkfox/hexo-theme-matery themes/matery

  2. 打开_config.yml,修改主题配置

    theme: matery

  3. 更新博客,查看效果

功能优化

  1. matary主题代码块显示bug

    matary代码内存在代码块UI显示错乱的bug,可以通过修改hexo _config.yml进行解决

  2. search功能无法使用, search.xml接口无响应

    原生的salary主题未附带搜索插件, 手动安装即可,参考文档: 为 hexo 博客添加本地搜索功能

    1. 安装 hexo-generator-search插件
    npm install hexo-generator-search --save
    1. 根目录_config.yml新增相关配置
    search:
  path: search.xml
  field: post

  3. Hexo博客中无法显示图片

    Typora中使用相对路径显示正常的图片,Hexo编译后无法显示,安装hexo-renderer-marked插件进行解决,缺点是Typora里面会显示错误

    参考博客 : hexo博客如何插入图片 - 知乎 (zhihu.com)

    1. 插件安装配置

      1. git bush插件安装 

        npm install hexo-renderer-marked

      2. config.yml修改配置

        # 修改此属性
post_asset_folder: true
# 新增此属性
marked:
  prependRoot: true
  postAsset: true

    2. 插件使用

      hexo new md文档时会另外生成一个同名文件夹 ,里面放图片, 如 script_write_flow.png

      ![script_write_flow](script_write_flow.png)   # Typora内会无法正常显示,但是Hexo会显示正常

      格式插入的图片无法使用此方式

  4. Categories&Tags功能实现

    1. 参照主题官方文档 , 设置Categories,Tags文件夹下index.md文档信息

    2. 文档信息中填写Categories分类,及多条相关Tags标签

      • 尤其需要注意的是, “:” 后边必须添加一个空格
      categories: Advancement
tags: ["Blog","Software"]

      重新部署hexo时,此条检查即可

  5. hexo matary主题支持mermaid

    1. 下载支持插件

      npm install --save hexo-filter-mermaid-diagrams

    2. 修改主题 _config.yml,打开mermaid

      mermaid: ## mermaid url https://github.com/knsv/mermaid
 enable: true  # default true

      matary lib已经含有mermaid文件,如果你的主题没有,参考这个安装hexo渲染mermaid

    3. hexo三连查看显示效果

      hexo上对mermaid代码格式要求比较高,如果显示不正常在Typora打开源码模式查看修改

  6. hexo支持访问次数计数

    matery支持使用不蒜子进行访问计数,直接在配置文件打开即可

    busuanziStatistics:
  enable: true
  totalTraffic: true # 总访问量
  totalNumberOfvisitors: true # 总人次

    不蒜子的底层原理是, 将页面使用的域名注册到第3方服务器,使用接口进行累计计数.所以在本地查看的时候,访问数会特别夸张,但是部署后就会正常显示.而且更换域名的时候会导致重新计数

    针对更换域名的情况,目前不蒜子不支持初始化修改访问数,可以通过修改js代码修改访问次数达到效果

    参照博客: JQuery实现“不蒜子”初始化首次数据 - 国际哥的独立博客 (shaoguoji.cn)

  7. 文章链接转静态短地址

    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进行搭建

  1. github创建仓库

    • 登录github页面 -> New Repository -> 创建仓库 ,Repository name设置为 ${userName}.github.io,其他默认 -> 复制SSH 链接

    值得注意的是, 使用Github的Https容易出现网络连接异常”Spawn Fail”,所有优先使用SSH链接

  2. github获取 Access Token

    Github目前连接仓库开始使用Private Access Token 作为凭证,提前创建一个全权限,永久有效的Token方便连接使用

    1. 创建token页面入口

      • 点击github头像 -> Setting -> Developers settings -> Personal access tokens -> generate new token

    2. 创建token

      1. Note: token名
      2. Expiration: 到期日 ,个人可直接无限期
      3. scope: 权限范围, 个人可直接全部勾选
      • 配置以上信息 -> generate token -> 获取 token信息,保存到个人长期文件**(和密码一样重要)**

  3. 安装git插件

    npm install hexo-deployer-git --save

  4. 配置hexo

    hexo目录打开_config.yml, 修改deploy的配置

    deploy:
  type: git
  repo: ${github拿到的SSH链接}
  branch: 你要推送到仓库的分支（默认为master）

  5. 远程部署

    • hexo d 部署到github -> 命令运行过程中会提醒输入Access Token,填入github 拿到的token即可 -> web登录 ${userName}.github.io查看效果

Reference

​ 程序羊视频教程

​ Hexo官网教程

​ 基于Hexo的matery主题搭建博客并深度优化 - SegmentFault 思否(非常优秀的主题优化文章)

Author: Feny Lau
Link: http://www.feny.space/2022/053047257.html
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Feny Lau !
Blog Software
  TOC