hexo start

发表于 分类于 本文字数： 3.2k 阅读时长 ≈ 6 分钟

重搭缘由

过去三年一直在想如何走和别人不一样的路。
别人搭建的是个人博客，我选择基于docsify搭建知识库，主要当时我更需要的是知识整合。
但处在现在这个时间节点（大四上半段即将结束），因为不读研（意味着在校生活临近尾声），不久后就会有更多的个人空间（工作or生活），需求自然从整合转移到了记录（with a little 分享）。

倒不是说谁对谁错，就是单纯年龄大了(bushi)。
知识库的历史文章也会慢慢整理出来，不过不会太快（回头看那些文章多少有点食之无味弃之可惜🤣）。

技术选择

博客框架

市面上的博客框架真的是百花齐放啊（眼睛都看花了）。
简单做了下对比，基于我的主要需求（轻量+插件、静态优先、社区完善or使用熟悉的编程语言）

框架 特点 为什么不选
Hexo 用户群体大，社区活跃，nodejs开发 /
Hugo go开发，速度快，rss可由theme完全控制，markip hook等功能只支持goldmark（goldmark对latex支持差） 待文章数量到达200+会尝试
Solo 官方社区可和个人博客联动，java开发 优先采用静态框架（Typecho、Halo等亦同）
Pelican python开发，jinja2模板，多种语言 速度慢，插件丰富度待考量
WordPress 历史上最久的一个（貌似） 过于臃肿，且是动态框架
Jekyll ruby开发，github支持友好 语言不熟悉，功能相对少，社区活跃度待考虑

托管平台

这块其实可选项不算太多
最著名的github pages本体在国内受限，gitee等平台我不太喜欢。
上次使用的netlify和vercel，不稳定是很大问题（前者偶尔可以访问，后者被墙），且页面加载速度一般。
最近tencent新搬上来一个edgeone pages，具体表现暂不清楚。
但是我选择cloudflare pages（之前需要申请，现在全部用户可用🥰）。

搭建过程

demo

参考hexo的start先在本地跑起来
demo版本push到github后，参考cf pages的start创建一个project（先抢一个pages域名先😋）
由于cf移除了对hexo的官方支持，需要选择框架为None，进行手动构建
build command如下，理论上最好用&&连接，但是这里是个简单逻辑（无所谓啦）

1
npm install -g hexo; npm install; hexo clean; hexo generate

我参考的文章缺少了npm install，导致报错无public目录

为了git仓库整体的优雅性，我把node_modules、public等都ignore了

cf pages部署成功后给出的外链访问一下，看到hexo的默认主题就代表成功了（空白是错误的哦，F12会发现404的）

theme

原本想懒得折腾就选了个star数较多的NexT
结果手动改过的父config[1]存在一些问题

  • hexo server启动失败
    关键报错信息为You can't use port 4000
    排查下端口占用情况netstat -ant |grep 4000，发现命令无返回（说明无进程占用4000端口）
    那…只能重启下vscode（怀疑是抽风了🤣）

  • hexo server启动成功但页面空白
    关键报错信息（warning）为No layout: index.html
    切回theme: landscape（需要先定位原因），无warning且页面正常显示（证明只是theme字段的问题）
    切回theme: hexo-theme-next，通过hexo generate查看具体缺失文件

    1
    2
    3
    4
    5
    WARN  No layout: uncategorized/hello-world/index.html
    WARN  No layout: archives/index.html
    WARN  No layout: archives/2024/index.html
    WARN  No layout: archives/2024/12/index.html
    WARN  No layout: index.html

    想了五分钟后，破案了，应该配置为theme: next

  • 用git clone的方法会带来subgit结构（这并不好👿）
    改用npm install，配置依旧保持theme: next
    但前面提到node_modules被ignore了，如果需要修改子config[2]将会很头疼

    这时候发现我对hexo的theme理解有出入，一直以为theme应该就是类css，即theme不应该管理插件配置（除非涉及到插件的css配置🤔？），不过手动管理下倒也能做到区分

    几种解决方案

    1. 将npm install的node_modules/hexo-theme-next/手动移动到themes/下，但这会带来一次奇怪的commit，然后npm uninstall hexo-theme-next让package干净点
    2. 恢复为使用git clone
      先查看下文件树的区别diff <(ls -a themes/next/) <(ls -a node_modules/hexo-theme-next/) 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      3,9d2
      < .editorconfig
      < .git/
      < .gitattributes
      < .githooks/
      < .github/
      < .gitignore
      < .stylelintrc
      12d4
      < crowdin.yml
      14d5
      < eslint.config.js
      20d10
      < renovate.json
      23d12
      < test/
      删除这些不必要的东西后，再次检查二者大小（还是不完全相同，但估计是文件内容存在区别，不好直接修改）

    虽然但是，方案一和二好像没区别🤔？而且如果要更新next的新版本将会导致子config[2:1]的冲突

    1. 吃完饭后突然发现一个优雅解法，即不使用themes目录，而是基于子config[2:2]新建主题config文件[3]（和父config[1:1]同级）。其实hexo本身给出了此参考做法，表现为hexo init folder后folder下就含有主题config文件[3:1]（默认主题theme: landscape）。很妙🥳

plugin

  • 字数统计
  • （本地）全文搜索
    需要在主题config[3:2]中打开local_search（即enable: true）
  • RSS
    主题config[3:3]中打开图标RSS: /atom.xml || fa fa-rss（我喜欢放在social的位置）
  • emoji支持，需要切换渲染引擎和添加插件
    1
    2
    3
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-markdown-it --save
    npm install markdown-it-emoji --save

严格来说，以下部分不属于plugin

  • 启用目录，在主题config[3:4]中去找关键词menu，value代表相对public的路径
    其中tags和categories对应的index.md默认是不存在，本地调试显示为Cannot Get /xxx/（即404），生产部署会表现为回退到home页
    需要使用hexo new page xxx来产生对应的index.md，并在index.md的顶部添加type: xxx
  • 启用阅读全文，主题config[3:5]中默认已经启用（关键词read_more_btn），需要手动在markdown文件中自认为合适的地方添加标记<!--more-->

  1. 即/_config.yml ↩︎ ↩︎

  2. 即/xxx/{next,theme-next,hexo-theme-next}/_config.yml ↩︎ ↩︎ ↩︎

  3. 即/_config.{next,landscape}.yml ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎