Only My Markdown

发表于2022-02-23更新于2022-03-15字数统计1.6k阅读次数

banner：https://www.pixiv.net/artworks/90496169

前言

上学期小新的HDMI接口突然坏了，我想着用 USB Hub顶用一下就算了。寒假里直接狗东返厂换了一块主板——收到返件的时候我内心是什么慌张的——发现没有被调包成爱国者主板[1]后，才稍稍有些放心。测试了一下后顺带重装了系统。众所周知，重装系统后的环境搭建十分烦人，特别是对于Hexo这种框架。但不可否认的是，已经拥有和想要有一个博客的人似乎很多，不管出于什么原因[2]，但是很多时候我们都想偷个懒，光是写博客已经绞尽脑汁了，搭建一个博客并个性化，这种复杂度足以使一位211大学的高材生专注于集训[3]而拖延。

那么用上CI后，这种情况是否会有所改观？本文以Hexo的Stun为例，记录了从0开始搭建一个博客并魔改上CI自动部署的内容。
注意：阅读以下文本需要相关基础。

环境要求

理论上只需要Git，开发时可能需要其他工具，如node。

先前准备

按照网上一大堆的教程装好Hexo和主题，粗略配置即可，不再赘述。新建一篇post并启动server以验证安装是否成功。

删减文件夹并编写action脚本

经过一番折腾我们的文件夹结构可能会像这样（省略了node_modules）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── .github
│   └── dependabot.yml
├── .gitignore
├── _config.landscape.yml
├── _config.yml
├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
    ├── .gitkeep
    └── stun

如果有CI的话，用不到这么多一堆文件夹。把多余的文件都删掉，变成：

1
2
3
4
5
6
7
8
9
├── _config.yml            # Hexo 站点配置
├── package-lock.json
├── package.json           # 项目清单
├── source                 # blog 数据文件夹
│   └── _posts
│       └── hello-world.md
└── themes
    └── stun
        └── _config.yml    # 主题配置

为了下一步编写CI脚本更方便，博主把themes\stun\_config.yml文件移到了source\_posts\_data文件夹下，并更名为stun.yml，由于博主本人在配置主题时改动了原始主题的翻译文件，拷贝一份修改好的themes/stun/languages/zh-CN.yml到当前Hexo项目目录备用。最后结果长这样：

1
2
3
4
5
6
7
8
9
├── _config.yml
├── package-lock.json
├── package.json
├── source
│   └── _posts
│       ├── _data
│       │   └── stun.yml
│       └── hello-world.md
└── zh-CN.yml

新增.github\workflows\publish.yml，写一个自动安装hexo并生成网页发布的脚本：

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
on:
  push:

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: "0"

      - uses: actions/setup-node@v2
        with:
          node-version: "16"

      - run: npm install

      - run: git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun # 安装主题

      - run: mv source/_data/sutn.yml themes/stun/_config.yml -f # 还原主题配置文件
      - run: mv zh-CN.yml themes/stun/languages/zh-CN.yml -f # 还原主题翻译文件

      - run: npm run build # 生成静态网页

      - name: Deploy # 自动部署
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.DEPLOY_KEY }} # 此处的DEPLOY_KEY需要申请token，详见action说明
          external_repository: xizeyoupan/xizeyoupan.github.io
          publish_branch: master
          publish_dir: ./public

把这个Hexo项目上传到github，理论上就能自动部署了。
如果要在本地预览，还需要一个小脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import os
import shutil

import subprocess

CURRENT_PATH = os.path.dirname(os.path.abspath(__file__))

if not os.path.exists(os.path.join(CURRENT_PATH, 'themes', 'stun')):
    out = subprocess.check_output('git clone https://github.com/xizeyoupan/hexo-theme-stun.git themes/stun',
                                  cwd=CURRENT_PATH, shell=True)
    print(out.decode('utf-8'))
    out = subprocess.check_output('npm install', cwd=CURRENT_PATH, shell=True)
    print(out.decode('utf-8'))


shutil.copyfile(os.path.join(CURRENT_PATH, 'source/_data/sutn.yml'),
                os.path.join(CURRENT_PATH, 'themes/stun/_config.yml'))
shutil.copyfile(os.path.join(CURRENT_PATH, 'zh-CN.yml'),
                os.path.join(CURRENT_PATH, 'themes/stun/languages/zh-CN.yml'))

try:
    subprocess.call('npm run server', cwd=CURRENT_PATH, shell=True)
except KeyboardInterrupt:
    os.remove(os.path.join(CURRENT_PATH, 'db.json'))

进阶

安装插件

如果你对主题提供的功能不满意，往往可以自己添加恰当的插件，在Hexo项目目录用npm安装，配置可以写在站点配置的_config.yml中。
以下是我个人安装的一些插件：

  • hexo-filter-mathjax ：如果你不想用一些renderer操纵数学公式，用这个。
  • hexo-generator-feed ：生成RSS。
  • hexo-generator-sitemap ：生成sitemap。
  • hexo-helper-live2d ：live2d插件，虽然archived了但是能用就行。

修改代码

如果你对主题仍不满意或想要的功能没有插件支持，可以考虑fork一份并自行修改相关代码。如果你的功能非常完善，还可以提一个PR。

添加音乐播放器

MetingJS是由大佬们搞的一个音乐播放前端插件。
想要在每个页面都添加一个迷你播放器，可以添加themes/stun/layout/_partials/widgets/MetingJS.pug，内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
link(
    rel="stylesheet" 
    href="https://unpkg.com/aplayer/dist/APlayer.min.css"
) 
script(src="https://unpkg.com/aplayer/dist/APlayer.min.js")
script(src="https://unpkg.com/meting@2/dist/Meting.min.js")

meting-js(
    server="netease"
    type="playlist"
    id="歌单id"
    fixed="true"
)

接着修改themes/stun/layout/_partials/head/head.pug，在最后插入include ../widgets/MetingJS.pug即可。

进阶的进阶

提个PR

如果主题或者框架有问题，可以尝试自行修改。比如本人在此主题使用中确实发现有问题，于是就提了个PR。虽然但这个问题严格来说不是bug，但在性能开销不大的前提下还是选择质量比较好。

自动图片压缩

本博客使用ucloud存储图片，同时在相应目录source/assets下本地也存有一份。当图片很大时，需要进行压缩。不然非常影响浏览体验，如下图。

大概只有博主这么耐心的人才会耐着性子等15秒来加载一张不是lazy-load的图片——抛开美观不谈[4]，让这种图片在首页加载着实让人心急。我们当然可以手动压缩然后上传到COS，当然也可以用类似picgo的插件[5]，但过程比较繁琐。所以这里我们用squoosh/cli，配合脚本来实现自动压缩并上传。那么我们在写md时遇到把图片等资源文件放到source\assets目录下，由于hexo会把source文件夹下的内容放到网站主目录，引用链接时只需要去掉相对目录的source就行了。由于代码太烂这里就不放了。

总结

所以江南哥和小晗的blog啥时候能搭完呢？

3.15更新

哈哈晗哥博客搭完了捏😋

  1. ↩︎

  2. 在此澄清一下，博主对于这种行为深恶痛绝。 ↩︎

  3. ↩︎

  4. 抛开xx不谈 ↩︎

  5. 具体看这里 ↩︎