发表更新破事水11 分钟读完 (大约1696个字)

我的博客配置

启

果然，第一篇肯定要讲一讲自己是如何配置的我的博客。

从 WordPress 研究到ZBlog，最后还是选了老朋友 Hexo （毕竟可以GitHub Page）

主题选择

主题想着比较清爽，看的舒服就好了。这里选择了 hexo-theme-icarus。

基础配置

由于需要自动化部署，配置、文章、资源数据都需要在存放在GitHub仓库中。

一共使用四个仓库,分别存放配置、样式、文章/资源数据，这些通过git submodule将他们关联起来，还需要一个仓库专门用来存放GitHub Page的数据。

1
2
3
4
git init
git remote add origin https://github.com/kur4ge/blog.git
git submodule add https://github.com/kur4ge/blog-posts source/_posts
git submodule add https://github.com/kur4ge/hexo-theme-icarus.git themes/icarus

为了保证每次部署的统一，我fork一份主题（当然也可以使用npm install的方案）

因为配置中存了accesskey 所以权限是设为私有了：）

优化

自动部署 x Workflow

Workflow 是 GitHub 推出的自动化流，可以简单的理解能在收到push，pull 等请求后会自动执行一段或多段代码（类似执行docker的build）

通过简单的配置，就可以自动化的在云端生成并部署博客，这是我的配置：

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
42
43
44
45
46
47
# This is a basic workflow to help you get started with Actions
name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]	# 只用 main 被 push 才触发

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
env:
  NODE_VERSION: '14.18.1'                # set this to the node version to use

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest	# 初始镜像 FROM ubuntu:latest (bushi)

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - name: Use Node.js ${{ env.NODE_VERSION }}	# 构建初始化 node 环境
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: Clone blog						  # Clone blog 最新的数据，并且拉取 submodules 数据
        uses: actions/checkout@v2
        with:
          token: ${{ secrets.PAT }}
          repository: kur4ge/blog
          submodules: true 
          fetch-depth: 1
      - uses: actions/cache@v2					  # cache node_modules 如果 package-lock.json 没变的话可以大大加速
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-lock.json') }}
      - name: npm install						  # 安装依赖
        run: |
          npm i hexo-cli && npm i
      - name: Generate and deploy				   # 生成并部署
        env:
          GITHUB_TOKEN: ${{ secrets.PAT }}
        run: |
          ./node_modules/.bin/hexo g -d

其中需要配置 PAT 在 Personal access tokens 生成一个，并配置到 settings/secrets/actions 即可。

整体耗时如下，可以看出使用了Cache服务，整体能在一分钟内完成部署，效率还是很快的~

近几次速度

部署各阶段耗时

加速，还是加速！

服务是部署在GitHub Page上的，美中不足是带宽比较小。为了阅读体验使用CDN来加速资源加载。

Cloudflare

本来打算使用阿里云DNS可以控制内外域名解析，使用Gitee作为国内节点（可惜 Gitee 要收费），Github作为国外节点。最后决定使用 Cloudflare 做全站的加速。

阿里云OSS

既然要用CDN，那就要把所有的外部资源统统整上CDN。（反正流量也不大，花不了多少钱。
这里使用了 hexo-deployer-cos-cdn 进行魔改，可以自定义跳过部分文件，让CDN仅作为附件的纯净CDN。

相应使用CDN也需要调整图片路径，这里使用了魔改后的 hexo-asset-path ，与自己编写的 hexo-dom-modify 来修改js、css的地址。

简洁

因为图片资源使用了CDN，所以不想图片数据也上传到Github Page中，所以我写了一个部署中间件，hexo-delete-sth，可以在部署的流程中，指定删除文件。避免空目录和你不想要的文件进入第二次部署上传。

所以，这是我的最后部署配置

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
42
deploy:
  - type: delete-sth
    deleteFiles: # 这两个文件是 icarus 主题带的
      - img/logo.svg
      - img/razor-*-black.svg
  - type: cos-cdn	# 上传CDN
    cloud: aliyun
    cdnUrl: https://****.aliyuncs.com
    bucket: ****
    region: ****
    cdnEnable: false
    secretId: ****
    secretKey: ****
    disallowFiles:
      - *.html
      - atom.xml
      - content.json
      - manifest.json
      - sitemap.xml
      - CNAME
      - robots.txt
  - type: delete-sth	# 删除已经上传的图片资源
    deleteFiles:
      - 20*.png
      - 20*.jpg
      - 20*.jpg
      - 20*.gif
      - 20*.ico
      - 20*.svg
      - about/*.png
      - css/*
      - js/*
    deleteEmptyFolder: true
  - type: git			# GitHub Page 部署
    repo: 
      url: https://github.com/****
      branch: page
      token: $GITHUB_TOKEN
    branch: page
    token: $GITHUB_TOKEN
    name: ****
    email: ****@***.***

公式SSR

可能很少写公式，但是这功能我觉得很重要。hexo-filter-mathjax-ssr。它可以在渲染时把公式转为svg格式，这样就不需要前端加载mathjax组件；也不会让读者看到转瞬即逝的丑陋代码，并且也能在Typora中带来统一的体验。
给个渲染例子：

行内 x = {-b \pm \sqrt{b^2-4ac} \over 2a} 的渲染！

A= \begin{bmatrix} {a_{11}}&{a_{12}}&{\cdots}&{a_{1n}}\\ {a_{21}}&{a_{22}}&{\cdots}&{a_{2n}}\\ {\vdots}&{\vdots}&{\ddots}&{\vdots}\\ {a_{m1}}&{a_{m2}}&{\cdots}&{a_{mn}}\\ \end{bmatrix}
独立居中！

Loading

如果你网速比较慢，你可以看到一直可爱的小水母（其实是乌贼），他的原图如下，但是蓝色加载动画在纯白背景中显得非常的突兀（这不得魔改一把？）

原始的Loading

通过简单的PS技巧修改而成（手有PS走遍天下都不怕）。

图层

也将他的大小压到了 28KB

写作

最后来说说协作体验，能坚持博客，一定要写的舒服！

虽然Markdown只要用个记事本就可以完成撰写，但是图片等附件还是需要你慢慢的拖和改。
经过摸索，我使用Typora

可以在普通模式中像飞书文档一样编写，也可以通过CTRL + / 进入源码模式进行精细的编辑（能双栏同时滚动就更好了）。

并没有做过多的配置，就配置了一项

图像设置

这样就可以使用剪贴板来粘贴图片，再配合上Hexo的post_asset_folder: true 既能在Typora中正常浏览，渲染也不会出现问题。

终

第一篇比较正式的博文，拖了好久终于写完了，感谢阅读~

Keep learning，keep sharing！

我的博客配置

https://blog.kur4ge.com/2021/10/my-blog/

作者

Kur4ge

发布于

2021-10-23

更新于

2022-03-25

许可协议

#

评论

关注我

链接

分类

最新文章

归档

标签

Chromium1
DNS1
Hexo1
Network1
WireGuard2
bangumi1
flexget1
homelab1
plex1
tutorial1
×