写 Blog 的大坑及教训

本文最后更新于:September 3, 2020 pm

拆了石膏后,终于可以双手打字,这几天写了些 blog,也算是对这个荒废夏天的一些挽救吧。前天才发现 Hexo 的渲染器做的不好,英文的 「'」在实际中显示为 「’」,Tim 教我装了另一个渲染器——hexo-renderer-markdown-it 来替换 hexo-renderer-markded,设置 typographer: false,可是没有改变。

升级 Hexo

我决定升级 Hexo 及配套环境,直接在官网找 Git(portable 版) 和 Node.js 进行覆盖安装(没有上网环境的下载「淘宝」镜像包),一路点默认的选项以免安装出错。

用 npm 指令升级 Hexo 倒不麻烦,在 官网 找到命令,官网的档并不好,我按照网上教程来,总结在这。提示 npm = $

  1. 全局升级 hexo-cli

    npm install hexo-cli -g
  2. 检查插件升级,查看安装插件

    npm install -g npm-check
    npm-check
  3. 升级插件

    npm install -g npm-upgrade
    npm-upgrade
  4. 更新全局包

    npm update -g
  5. 更新生产环境依赖包

    npm update --save
  6. 查看 Hexo 版本

    $ hexo v

后面就有一长串安装成功的版本信息,

在升级插件的过程中会有提示 Yes or No,只需连续按回车键。安装中没有进度条,等待的过程比较焦急,光标若是在闪烁且没有指令出来就是正在加载……升级到最新的 5.1.1(GitHub 上最新版)。渲染问题仍未解决,后来我找到使用 \' 这个反斜杠转义来解决。

升级 Melody 主题

之前(并不是这个)的 Melody 也可以升级,进入官方文档(Hexo 版本 >= 5.0)只需要键入

npm install hexo-theme-melody

即可 npm「一键」升级。半夜升级完,我没再测试,第二天发三星 T7 移动硬盘文章才发现遇到大问题,Git 提示:err: Error: Spawn failed。什么,产卵失败?!当时不够耐心,没有搜索关键词「Spawn failed」以至于好久没找到解决方法,又重新装了可执行文件版 Git,未果。暂时搁置,等到晚上再次尝试,决定重装 Hexo!

首先创建一个文件夹放在喜欢的位置,我犯了错误,直接在桌面开始新建,后面移动更改了路径,为了避免未知错误,务必从一而终安装在同一个目录。

先检查下当前版本号

$ git version
$ node -v
$ npm -v

准备好开始安装 Hexo

npm install -g hexo-cli

安装较漫耐心等待,进行初始化博客

hexo init blog

之后会出现 _config.yml(俗称站点配置),package.json,source(资源文件夹)等等,除了 _posts 文件,其他下划线 _ 开头的不会被编译打包到 public 文件夹。再输入

hexo new test_my_site

hexo g

hexo s 

打开浏览器输入 http://localhost:4000 就能打开默认主题 landscape

核心的三条命令:

hexo g = hexo generate 生成
hexo s = hexo server 启动服务预览
hexo d = hexo deploy 部署

核心命令的作用是新建博客文章、生成网页、本地预览。在每个步骤间穿插 hexo clean (清除缓存)确保不会出错,还有可能用到的命令:

hexo server -p 1xxx (更改端口)
hexo server -i 192.168.x.x (自定义 IP)

连接 Github Error

没有注册账号的可以搜下相关教程,一个同名仓库只能托管一个静态站点(相当于一个 Blog),按理说重装 Hexo 不需要重新配置 SSH key,但我还是重置了,给的 key 是同一个,以前有 SSH key 就直接输入

cat ~/.ssh/id_rsa.pub

第一次的话先将 Git 和 GitHub 账号绑定,查看本机密钥

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 注册邮箱"

再生成 SSH 密钥

ssh-keygen -t rsa -C "GitHub 注册邮箱"

接着三个回车,不需要设置密码,在 .ssh 文件夹的 id_rsa.pub 文件复制全部内容,打开 GitHub_Settings_keys,点 New SSH key,Title 随便写,然后在 Git Bash 检测 SSH key 是否设置成功,输入 ssh -T git@github.com,原理是公钥放在 GitHub,私钥放在电脑里。GitHub 每次都要验证是不是你,为了方便,采用 SSH,所以需要私钥跟 GitHub 公钥配对,然而我就遇到了无法配对的情况,这是第二个大坑!

「ssh -T git@github.com ssh: connect to host github. com port 22: Connection timed out」显示超时,GitHub 被污染严重,国内用户常常头疼……

后来找到的解决方法:

  1. 打开 _config.yml 配置文件

  2. 拉到最下,改成

deploy:

type: 'git'

repo: git@github.com:yourname/yourname.github.io.git

branch: master

其实这个问题很简单,但是我没有仔细 Google,或者说以为问题不是这样解决的,浪费了大量时间,以后遇到问题应该什么方法都试一下,反正已经出错了也不怕再糟糕。

然后绑定自己的顶级域名 具体操作 不赘述,不想花钱买也可以用 GitHub 的。

Fatal

想试下广受好评的 NexT 主题,直接 npm install hexo-theme-next,我打开 themes 没有看到文件夹以为安装失败,随后才知道,Hexo 5.0 之后更换了安装方式。主题文件夹位于 node_modules,安装前还是要阅读主题说明文档(论看资料的重要性),在接下来的步骤我居然又遇到了「Spawn failed」问题!再次搜索找到使用 git reset --hard commitId 的方法,这个 commitId 让我搞不懂,在高人指点下才知道这是一串 GitHub 上 commit 的 sha 码,但是回滚无效(写这篇 blog 时候看到 git push -f 有效。未验证)就此陷入死循环,再次搁置,看看教学视频缓解下急躁的心情。半夜在 Hexo 博客群友的再次提醒下 hexo init test 检查,还是配置文件问题,发现

deploy:

type: 'git'

repo: git@github.com:yourname/yourname.github.io.git

branch: master

里面居然有个中文?!去掉后万事大吉,天哪,真是太为难我。

新主题

熬到很晚,睡了一觉,起床已经是我最爱的九月了!之前的一波三折消耗我的耐心,决定再换个新主题,看了一圈,喜欢卡片式设计看到这个主题 Fluid,虽然没有液体的感觉,但是够简洁,之前就注意过,最近才更新,就你了。虽然没有 npm 安装,但是压缩包解压到 themes 不会出错,在安装过程中又报错,我心里咯噔一下,但是经过之前的波折,平稳许多,根据报错提示,是 Melody 和 NexT 主题插件加载失败错误,搜索后:

查看插件

npm list

有一大串,找到 Melody 和 NexT 主题插件的名称,复制,卸载

npm uninstall hexo- pluginname

还需要删除相关配置和文件:

  • 配置文件中 Plugins 模块对应的插件设置
  • node_modules/ 目录下对应的插件文件

然后又遇到了 Big Trouble!进入 blog 点击文章出现下载文件而不是进入文章的情况。这下搜索没辙,只好请教高手,在 public 生成的文件居然都不带 .html。问了一下午,在 Fluid 作者之一的 张凯强 处得到准确的解决方法。原来我的站点配置是:

permalink: :year/:month/:day/:title/

要改成

permalink: /:year/:month/:day/:title/

原来 :year 的冒号前没有「/」,接着在每篇文章的 permalink 的结尾加上一个斜杠,问题解决!你说奇妙不奇妙。一切都是 Hexo 5.0 的 破坏性升级 啊!

至此我终于把 blog 新主题成功部署,真的很累,没有创作欲望了。作者还告诉我一些不曾注意的细节,在配置文件里如有空格或是英文都需要加上引号,若配置未生效还要检查站点配置,因为覆盖安装,主题的优先级大于站点配置,但是有些站点配置并未修改。还有标题旁边那个回形针🖇是叫「锚点」,不喜欢也可以关闭。当我解决问题后,Tim 也想起来他也遇到过升级 Hexo 5.0 打开博客就是下载,都需要经历这个过程吧,考验我的耐心和阅读能力。

总结

做什么事都不能心急,一目十行,特别是关于前端代码这种我不擅长的事,需要:

  1. 好的提问和搜索能力
  2. 英语阅读能力
  3. 坚韧性💪

感谢在我焦急的时候给予帮助的人们🙏

P.S. 已经连续熬夜一个月,该早点洗洗睡了,我又不是程序员……


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!