博客折腾记

记录博客修修补补的故事

210123: 博客进入 beta 0.3 时代 我也想学习微信不写更新日志

beta 0.3

beta 0.2

长达 9 个月闲置之后,终于迎来一轮对博客的更新。

  • 本着闭环的原则,将评论系统从 Disqus 替换为基于 Github Issues 的 Gitalk。不过,依旧没有多少留言量。
  • 博客主题从 Next 切换到 fi3ework/hexo-theme-archer: 🏹 A smart and modern theme for Hexo.
  • 添加一个新的固定栏目 「每月分享」,目前正在持续探索具体形式中。
  • 除继续使用百度统计之外,加上 Google Analytics 进行数据分析。

beta 0.1

beta 0

早期对博客进行的相关修改有:

博客专栏

  • 【每周分享】:每周六更新,记录过去一周,我看到值得分享的内容
  • 【月读】:每月更新,推荐本月我阅读的一本书
  • 【数字生活】:我的数字生活实践
  • 【博客公告】:分享与这个博客维护相关的内容

博客记录

  • 本博客采用hexo搭建,使用Even主题
  • 托管:Coding Pages
  • 域名:腾讯云
  • 评论:Disqus
  • 统计:百度统计
  • 图床:七牛
  • 20151006:恢复订阅功能
  • 20160303:开启分类和请我喝一杯咖啡
  • 20160623:重新开启评论和百度统计,与自己和解
  • 20160624:更换主题大道至简Maupassant,增加favicon和apple-touch-icon
  • 20170104:放弃github+hexo,投入vps+wordpress怀抱,依旧使用maupassant主题
  • 20170722:主机系统升级失败,从备份中恢复博客,并采用 Twenty Twelve 主题
  • 20171005:重新投入hexo怀抱,并托管于Coding Pages
  • 20180101:开启功德箱
  • 20180501:PV: 657 | UV: 242
  • 20180528:使用 Travis CI 自动部署

除虫记录

Error: Cannot find module ‘node-sass-magic-importer’

ERROR in Cannot find module ‘node-sass’(已解决) - line - CSDN博客

1
cnpm install node-sass@latest

博客折腾记:hexo-leancloud-counter-security 与标题中的引号冲突

昨天按照 hexo-theme-next/LEANCLOUD-COUNTER-SECURITY.md at master · theme-next/hexo-theme-next 这个文档配置博客阅读次数时,遇到 hexo-leancloud-counter-security 插件的一个冲突。

完成配置使用 hexo -d 时,终端中出现下面的错误提示:

1
2
3
4
5
6
7
8
9
10
11
12
13
 ATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
SyntaxError: Unexpected token h in JSON at position 30
at JSON.parse (<anonymous>)
at /Users/didi/Documents/personal/xiang578.github.io/node_modules/hexo-leancloud-counter-security/index.js:92:42
at arrayEach (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_lodash@4.17.11@lodash/lodash.js:516:11)
at Function.forEach (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_lodash@4.17.11@lodash/lodash.js:9344:14)
at Hexo._callee$ (/Users/didi/Documents/personal/xiang578.github.io/node_modules/hexo-leancloud-counter-security/index.js:83:27)
at tryCatch (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_regenerator-runtime@0.11.1@regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_regenerator-runtime@0.11.1@regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_regenerator-runtime@0.11.1@regenerator-runtime/runtime.js:114:21)
at step (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_babel-runtime@6.26.0@babel-runtime/helpers/asyncToGenerator.js:17:30)
at /Users/didi/Documents/personal/xiang578.github.io/node_modules/_babel-runtime@6.26.0@babel-runtime/helpers/asyncToGenerator.js:28:13
at process._tickCallback (internal/process/next_tick.js:68:7)

看提示貌似是利用 Json 解析字符串的时候出现问题。打开 node_modules/hexo-leancloud-counter-security/index.js:92,对应出现一个解析 JSON的:

1
y = JSON.parse(memoData[memoIdx].substring(0, memoData[memoIdx].length - 1));

js 没有怎么接触过,不知道能不能单步调试之类的,只好祭出输出调试大法,加上两个输出:

1
2
3
console.log(memoIdx)
console.log(memoData[memoIdx])
y = JSON.parse(memoData[memoIdx].substring(0,memoData[memoIdx].length - 1));

然后再执行 hexo -d 命令,命令行输出为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
28
{"title":"System.out.println("hello world!");","url":"/post/hello-world.html"},
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
SyntaxError: Unexpected token h in JSON at position 30
at JSON.parse (<anonymous>)
at /Users/didi/Documents/personal/xiang578.github.io/node_modules/hexo-leancloud-counter-security/index.js:92:42
at arrayEach (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_lodash@4.17.11@lodash/lodash.js:516:11)
at Function.forEach (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_lodash@4.17.11@lodash/lodash.js:9344:14)
at Hexo._callee$ (/Users/didi/Documents/personal/xiang578.github.io/node_modules/hexo-leancloud-counter-security/index.js:83:27)
at tryCatch (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_regenerator-runtime@0.11.1@regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_regenerator-runtime@0.11.1@regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_regenerator-runtime@0.11.1@regenerator-runtime/runtime.js:114:21)
at step (/Users/didi/Documents/personal/xiang578.github.io/node_modules/_babel-runtime@6.26.0@babel-runtime/helpers/asyncToGenerator.js:17:30)
at /Users/didi/Documents/personal/xiang578.github.io/node_modules/_babel-runtime@6.26.0@babel-runtime/helpers/asyncToGenerator.js:28:13
at process._tickCallback (internal/process/next_tick.js:68:7)

JSON 在解析字符串{"title":"System.out.println("hello world!");","url":"/post/hello-world.html"} 时出现错误。对应的正是之前写的一篇名为 System.out.println("hello world!"); 的文章,由于 JSON 格式中字符串是需要用"" 修饰,导致JSON 中出现了一个 "title":"System.out.println("hello world!");" key-value 组合。然而实际上 JSON 只会将 "System.out.println("h 解析成 value,之后出现的 h 被当成非法字符报错。

定位问题之后,暂时修改文章的标题为 hello world! | 算法花园,绕过部署失败。


博客折腾记:使用 Travis CI 自动部署博客

已切换到 Github Action

之前一周在封闭接受公司培训,最重要的任务是熟悉「项目开发全流程」。其中有一点:服务的稳定性。不知道为什么,前几天自己的博客崩溃了,输入域名只能看到 404 页面。当时以为是 Travis CI 的原因,所以进行了全面的一次排查:

  • 问题出现在 Github Pages 的 Custom domain 设置中。
  • 具体表现:通过 Travis CI 推送博客静态文件到仓库中的 master 后,下图框中的域名就会变成空的,导致无法访问。
  • 解决方法:在源文件的 source 目录下创建一个 CNAME 文件,写上你自己的域名。

Travis CI

其实看一眼就应该知道,我的博客是基于 hexo 搭建的,文件托管在 github 仓库中。不过,按照之前的设想博客应该在 Coding 中也有一份备份。后来由于一些原因,在利用 hexo 生成静态文件之后,自动推送到 Coding 上的命令不起作用。自己也没有时间去排查问题,所以最近访问速度有点慢。

传统的 hexo 博客更新过程是:在完成写作之后,利用命令行调用 hexo g && hexo d 来生成静态博客文件以及并推送到远端的仓库中。这种方法会产生三个痛点:

  1. 每一次修改源文件后都需要重新生成一边静态文件,当大量修改时,步骤就变得繁琐且无趣。
  2. 生成静态文件依赖电脑中的 hexo 和 node.js 环境,不方便在外出时临时写或修改博客。
  3. 博客源文件没有自动的备份功能,不符合安全原则。

Travis CI 是一种持续集成开发所使用的工具,在写作过程中引入他可以解决上面我提到的痛点。Travis CI 具体的含义也不是很清楚,直接介绍我是怎么使用的。

博客依赖 3 个 git 仓库:

和大部分人一样,这个博客的静态文件保存在 github 的 xiang578.github.io 仓库 master 分支中。但是,我还创建了一个新的分支 hexo,用来保存博客源文件。每一次修改博客源文件之后,我不在本地生成静态文件,而是利用 git 命令,将所有的修改内容推送到仓库中的 hexo 分支。Travis CI 服务监听到新的 push 时,会根据你的配置将 git 仓库拉倒他的服务器上,编译源文件成为静态文件,并推送生成的文件到指定仓库的指定分支中。而且,如果编译静态文件失败,他也会通过邮件通知你结果。

编译成功截图

流程

  1. 将 github 上存放静态博客源文件的仓库拉下来,利用 git checkout -b hexo 创建并进入新的分支,删除分支内所有的文件。
  2. 将博客源文件复制到第一步中的文件夹中。
  3. 添加一个 .travis.yml 文件,文件内容可以参考下一节 Travis-ci 配置文件。
  4. https://travis-ci.org/ 提供免费的持续集成服务,可以通过 github 登入,直接选择需要管理相关的项目。
  5. 第一次将源文件上传到 github 时,可能会遇到问题。主题 themes/xxx 是通过 git clone 下载的,无法直接 push 包含嵌套关系的 git 库。删除 themes/xxx/.git 正确的姿势是,最开始就使用 git modules 引用依赖库。所幸还能编辑 .git/config,添加下面几行代码解决:
  6. 打开 themes 对应的 github 网页,你会看到主题链接到其他仓库(其中 @commitid 控制对应的版本)
  7. 完成这样的设置,修改主题文件后,需要先将修改 push 到主题的仓库,然后在博客文件夹下 push 修改到远端仓库(修改依赖的 commitid)。最终,才能再网页上看到修改效果。

Travis-ci 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
language: node_js
node_js:
- 9.11.1
cache:
directories:
- node_modules
before_install:
- export TZ='Asia/Shanghai'
- npm install hexo-cli -g
install:
- npm install
script:
- hexo clean
- hexo generate
after_script:
- git clone https://${GH_REF} .deploy_git # GH_REF是最下面配置的仓库地址
- cd .deploy_git
- git checkout master
- cd ../
- mv .deploy_git/.git/ ./public/
- cd ./public
- git config user.name "xiang578"
- git config user.email "xiang578@foxmail.com"
- git add .
# - git commit -m "Deploy at $(date +"%Y-%m-%d %T")"
- git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"`"
# Github Pages
- git push --force --quiet "https://${CI_TOKEN}@${GH_REF}" master:master
# Coding Pages
# - git push --force --quiet "https://xiang578:${Coding_TOKEN}@${CO_REF}" master:master

branches:
only:
- hexo

env:
global:
# Github Pages
- GH_REF: github.com/xiang578/xiang578.github.io
# Coding Pages
# - CO_REF: git.coding.net/xiang578/xiang578.git

hexo 两个错误

在这一次的过程中,又遇到两个本地编译 hexo 的错误,一同记录一下。错误表现如下:

1
2
3
4
5
6
7
8
9
ERROR Plugin load failed: hexo-renderer-sass
Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
...
ERROR Plugin load failed: hexo-renderer-scss
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.8.3
...

网上的建议是修改 npm 的源地址为淘宝的镜像,并且重新下载这两个包。

1
2
3
sudo npm config set registry https://registry.npm.taobao.org
npm install hexo-renderer-sass --save
npm install hexo-renderer-scss --save

Reference

ChangeLog

  • 180904:完成初稿

博客折腾记:使用 Travis CI 自动部署

前几天,看到其他人在 V2 上讨论利用 Docker 更新 hexo 博客。不过自己对使用 Docker 不是很感兴趣,倒是了解到 Travis CI 的作用。

参考使用 Travis 自动构建 Hexo 到 GitHub | Zthxxx’s Blog使用travis-ci自动部署Hexo到github和coding - 掘金这两篇文章,完成了博客自动部署的修改,也解决了一些,之前没有在意的问题,写下来备忘一下。

介绍一下与这个博客先关的 git 项目。博客相关的原始文件放在 xiang578/blog,主题文件放在 xiang578/hexo-theme-even: A super concise theme for Hexo(我对这个主题有一些修改,所以自己 fork 了一份,最后发布的文件放在xiang578/xiang578.github.io: Welcome to My blog!(实际上这也是一个备份,访问时的文件是从 coding 服务器上读取的)。

按照上面两篇博文配置好 Travis CI 之后,每次向存放博客原始文件的仓库 push 时,travis-ci.com 都会拉取代码进行 build ,成功之后会出现下图。

之前都是使用 git clone 下载主题的,如果把本机上的博客相关文件直接推送到 github 上会遇到问题。简单地说就是一个 git 文件夹包含了另外一个 git 文件夹。所以,需要使用 git modules 来解决。通过这种方法可以在 clone 主仓库时,会自动clone子仓库。

博客仓库中会链接到其他仓库,其中 @ 之后的那一串就是 commit 编号,主要是用来做版本控制的。

完成这样的设置,修改主题文件后,需要先将修改 push 到主题的仓库,然后在博客文件夹下 push 修改到远端仓库。最终,才能再网页上看到修改效果。


从零开始利用 hexo + Github/Coding 搭建个人博客

更新历史

  • 2015年8月15日:完成初稿
  • 2017年10月05日:添加新主题 Even 相关内容
  • 2017年10月11日:文章阅读次数统计
  • 2018年1月19日:修改页脚
  • 2018年3月26日:双更新
  • 20220226: 首页隐藏指定文章

前几天自己在电脑上装Linux时,不小心把博客的数据文件夹给删了。无奈重新安装,同时写下这篇备忘录以防万一。当然,经历这个失误,看来也要利用网盘对博客的一些文件进行备份。