我的博客配置

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

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

WorkflowGitHub 推出的自动化流,可以简单的理解能在收到pushpull 等请求后会自动执行一段或多段代码(类似执行dockerbuild

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

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/[email protected]
with:
node-version: ${{ env.NODE_VERSION }}
- name: Clone blog # Clone blog 最新的数据,并且拉取 submodules 数据
uses: actions/[email protected]
with:
token: ${{ secrets.PAT }}
repository: kur4ge/blog
submodules: true
fetch-depth: 1
- uses: actions/[email protected] # 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

其中需要配置 PATPersonal 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 来修改jscss的地址。

简洁

因为图片资源使用了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 + / 进入源码模式进行精细的编辑(能双栏同时滚动就更好了)。

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

图像设置

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

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

Keep learning,keep sharing!

作者

Kur4ge

发布于

2021-10-23

更新于

2022-03-25

许可协议

评论