博客-VuePress版
常用资料
基本结构
└─ 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
-> 生成
文本 - 由于
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
中的标记,替换掉链接 - 链接需要与公开项目一致