Skip to main content

博客-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/目录即可.

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

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

图床方案

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

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

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

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

再梳理一下过程:

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

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

附件流程

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