博客-VuePress版

常用资料

Github

基本结构

└─ xkdip                    组织名,总目录
   ├─ www.xkyii.cn          静态网站(公开项目)
   │  └─ CNAME              对应的域名
   ├─ xkyii.cn              网站源码(私有项目)
   │  ├─ .github            github配置目录
   │  │  └─ workflow        github action配置目录
   │  │     └─ deploy.yml   github action部署配置
   │  ├─ docs               文档目录
   │  │  └─ .vuepress       vuepress配置目录
   │  ├─ asset.xkyii.cn     资源链接目录(链接到asset.xkyii.cn项目)
   │  └─ asset              资源链接目录(链接到asset项目)
   ├─ asset.xkyii.cn        资源(公开项目,主要是作为图床)
   └─ asset                 资源(私有项目,素材库)

网站源码

基本结构中所说的xkii.cn,是一个私有项目,托管在Github,目前采用的是VuePress来生成静态网站,所有的文档都是Markdown格式.

之所以用两个项目把源码和网站分离,主要是有部分文档还是草稿,有部分不便公开,比如公司的项目文档.

我习惯于在develop分支上写写文档做些记录,定期合并到main分支,提交main分支的时候触发Github Action,将可公开的部分自动构建静态网站,并提交到公开项目www.xkyii.cn项目中,可以看到,名为github-actions[bot]的提交者提交的都是自动构建的内容.

静态网站

基本结构中所说的www.xkyii.cn,名为鱼猫小栈,是我的技术博客,分享一些搬砖写Bug方面的心得.

素材管理

基本结构中的asset,这是一个私有项目(目录),目录名和位置随意,只需要做个硬链接到xkyii.cn/asset/目录即可.

以下为个人的操作习惯,仅供参考:

采用Billfish来管理,不会破环目录结构,可以管理包括图片在内的很多常用格式的文件.
使用VsCode来撰写文档
- 使用Paste Image插件来保存截图
- 经过简单的配置,可以做到: 截图 -> 保存到asset/image/xxx.png -> 生成![img](../aaset/image/xxx.png)文本
- 由于xkyii.cn/asset是个链接目录,实际上是保存到了素材库

图床方案

基本结构中的asset.xkyii.cn,稍作调整就可以作为图床.提交到此项目的图片即可通过外网访问(TBD: 示例).

xkyii.cn私有项目内一般不包含图片,文档中都是以外链的方式来展示图片,这里有几个考虑:

项目中包含的图片量大以后,容量和速度会受到限制,Github单个Repo是1G的容量,Gitee似乎是500M.
由于科学的原因,很多时候pull/push到Github会非常慢,提交图片时卡住是常有的事.单独提交文档,至少保证主体完整.

前面有说到,截图可以很快进入到素材管理,但这只是一个本地化的操作,如何让它进入asset图床呢?

再梳理一下过程:

撰写Markdown文档
截图,通过插件保存到素材库(asset)
分析可公开的文档,找到其中的图片链接,进一步找到对应素材库的文件
将上一步找到的文件复制一份到asset.xkyii.cn项目
生成静态网站时,将相对链接转换为图床链接
提交asset.xkyii.cn,使图片可被外网访问

只需要补上步骤3和4,就可以完成整个过程.经过一段时间的考虑,排除node,dotnet的单独方案,决定暂时还是以VuePress主题功能的方式提供.以后如果需要单独的版本,再移植一份就是了.

附件流程

附件进入asset项目
- 可以使用billfish做附件管理
- 附件尽量小(10m以内)
- 视情况上传到github(总量1G以内)s://www.xkyii.cn
- TBD 选择一个网盘存储
- TBD 定期同步到U盘,需要找一个文件夹同步的工具
通过markdown文档识别需要公开的附件
- 遍里项目内的所有文档
- 分析frontmatter中的标记
- 分析markdown文本中的图片,文件等链接
将需要公开的附件复制到asset.xkyii.cn项目中
- 经过上一步的分析,找到匹配的附件
- 复制到公开项目中
- 可选自动提交
构建静态网页时,将相对目录转换为链接
- 这一步需要在构建脚本中来做
- 分析markdown文本,找到需要替换的图片,文件等链接
- 根据frontmatter中的标记,替换掉链接
- 链接需要与公开项目一致

常用资料​

基本结构​

网站源码​

静态网站​

素材管理​

图床方案​

附件流程​