一天时间,搭了个专属知识库,部署上线了,手把手教,不信你学不会(上)

自动开了这个号以后,陆陆续续写了很多干货文章,一方面是可以帮助自己梳理思路,另一方面也方便日后查找相关内容。

但是,我想检索某个关键词是在之前哪篇文章写过的,就有点捉急了。CSDN 还好,可以检索到相关标题,知乎的检索就太差了,连标题都无法精准。

于是,一个需求出现了:把之前所有写过的文章扒下来,做成一个自己的知识库?然后,发布出去,方便自己,也共享他人。

如何实现?经过一番调研,最终确定了如下方案:

  • 本地搭建:Typro + PicGo + 图床;
  • 部署上线:Docsify + GitHub Pages 等托管平台。

本文将记录整个实现过程,以及踩过的坑,文章略长,全程干货,希望给有类似需求的小伙伴一点帮助。

1. 本地知识库搭建

由于平时的文章都是用在线的 Markdown 工具编写,本地 Markdown 编辑器自然首推 Typora。

1.1 Typora 安装和使用

首先,前往官网上找到对应你系统的版本: typora官方中文站。

Typora 的部分功能需要付费使用,如果你不想付费,可以采用 Windows 版破解补丁。

有需要的小伙伴,后台回复 typora 自取。

Typora 的界面简洁明了,你可以专注于你的文本而不是复杂的排版,相信你编写 Markdown 文本一定非常愉快。

关于 MarkDown 中的图片,一般都是 ![](https://url.url),我们需要首先保存到本地,为此可以先在 Typora 中进行一番设置:依次点击 文件 -> 偏好设置 -> 图像,选择 复制图片到./assets文件夹,就可以自动将图片保存到当前文件夹下的 ./assets 目录下。

20241003131846435

右上角支持知识库检索,实时渲染生成文章目录大纲:

20241003131846129

如果你只是需要一个本地知识库,Typora 就完全可以满足所需,下面的内容可以不用看啦。


但是,如果你还想把知识库部署上线,接下来就会遇到一个问题:图片安放在哪?

1.2 图床选择和使用

互联网上的图片一般都会存放在专属服务器上,尤其是当你的图片数量规模变大以后,你在网页上看到的任何一张图片,背后其实就是一条 url。

图床 就是专门用来存放图片的,不过目前市面上可以选择的 图床 可太多了,到底该选择哪一个呢?

网上看了很多小伙伴的解决方案,下面我将先介绍下实测用过的一些图床,以及踩过的坑,最后给出我最终的选择:

  • Gitee 图床:个人仓库最大支持 500M,现在不可以使用了,因为 Gitee 的图片开启了防盗链,无法在你的网页中加载进来。
  • GitHub 图床:除了国内访问速度是个问题外,非常完美,而且个人仓库最大支持 1G 容量。访问慢的问题可以通过镜像的方式解决。但后面遇到的一个问题是:PicGo 上自动上传时,如果是同名文件就会上传失败,难以实现自动化。这个问题的解决方案是:在 PicGo 中设置上传时自动以时间戳命名,不过这样会产生大量重复图片,1G 空间怕是很快就爆了。
  • 七牛云等云存储平台:七牛云虽然有 10G 免费空间,但需要有在国内备案的域名,必须要买域名+服务器,否则一个月之后就无法使用它的测试域名。
  • 个人开发者的图床:都有一些限制,没找到合适的😂
    • https://tu.my/:可以手动上传,单次上传不超过100张。
    • https://imgchr.com/:每小时限制 8 张。
  • 国内云厂商的对象存储:阿里云/腾讯云等免费试用后需要付费;
  • 国外云厂商的对象存储
    • Google 云的对象存储:免费空间 5 G,每月 1G 的出站流量;
    • Oracle 云的对象存储:免费空间 20 G,每月限制 50000次 API 调用,需要把桶设置为公共的,才可以访问;而且同名文件会自动替换,上传速度很快;访问速度也还可以,部分有延时。
    • Cloudflare R2对象存储:免费空间 10 G,上传等 A 类操作每月100万次,下载等 B 类操作每月1000万次,需要绑定一张外币信用卡。

对比来看,还是 Oracle 云的对象存储免费空间更大,而 Cloudflare R2 的调用次数更加慷慨,最终先选择了 Oracle 云的对象存储作为我的图床。

当然,在正式使用之前,你还需要验证下选择的图床得到的 url 是否开启了防盗链。

怎么验证?

给大家分享一个最简单的方式:如下图所示,随便找一个在线的 markdown 编辑器,然后按照图片格式输入,看看能否在右侧渲染出来:

20241003131847444

选择好图床后,最好是配合 PicGo 来使用,接下来我们一起看下这款 Typora 排版工具的完美搭档。

1.3 PicGo 安装和使用

PicGo 是一个开源的图床工具,加上插件,可以完美适配各种图床。大家可以前往官方仓库的 Releases 中下载:https://github.com/Molunerfinn/PicGo/releases。

界面非常简单,你只需要根据你选择的图床进行适配就可以了,下面介绍几个常见图床的使用:

1.3.1 GitHub 图床

首先,需要在你的 GitHub 上新建一个仓库,分支名在 GitHub 上新建仓库时默认为 main,必要时调整为你新建的分支名。

20241003131847739

下面的 设定 Token 在哪获取?

在你的 GitHub 主页依次选择【Settings】-最下方的【Developer settings】-【Personal access tokens】-【Generate new token】,填好名称,过期时间最长可以选择一年,然后点击【Generate token】生成一个 Token。

20241003131848339

Token 只会显示一次,先保存下来,再配置到 PicGo 中。

最后的设置自定义域名,其作用是加速 GitHub 图片的访问,在图片上传后,PicGo 会按照(自定义域名+储存路径+图片名)的方式生成访问链接,返回给你。

我们来总结下上面几个字段的填法:

  • 设定仓库名:按照 用户名/项目名 的格式填写
  • 设定分支名:main or master
  • 设定Token:粘贴上面生成的 Token
  • 指定存储路径:想要储存的路径,如 imgs,会在你项目下创建一个名为 imgs 的文件夹,图片将会储存在此文件夹中。
  • 设定自定义域名:有两种方式可以实现加速。
    • 使用 jsDelivr 加速:设置为 https://cdn.jsdelivr.net/gh/用户名/项目名,上传完毕后,通过 https://cdn.jsdelivr.net/gh/用户名/项目名/图片名 访问上传的图片。
    • 使用镜像加速:设置为 https://mirror.ghproxy.com/https://raw.githubusercontent.com/用户名/项目名/master/

1.3.1 Gitee 图床(不推荐)

PicGo 本身不支持 Gitee 图床,因此需要在 PicGo 中安装插件。搜索框中搜一下 gitee,然后任选一个即可。

20241003131848272

要注意的是:插件安装需要依赖 node.js 环境,这个需要前往 node.js 官网,下载对应操作系统的进行安装。Windows 的比较简单,下载完成之后双击安装包,即可进行安装。安装完成之后,打开 cmd 输入 node -v 验证一下,输出版本号就是安装成功。

安装完成后,在图床设置中就可以看到 gitee 的选项,配置和上面的 GitHub 图床类似,不再赘述了。

20241003131849346

不过,因为 Gitee 的图片开启了防盗链,所以 Gitee 图床还是放弃使用吧。

1.3.3 自定义图床

如果你的图床不在 PicGo 官方支持之列,那么就需要安装另外一个插件。

20241003131849721

什么插件?

插件设置那里搜索 web-uploader 进行安装即可,安装完成后,在图床设置中就可以看到 自定义Web图床 的选项,根据你图床提供的 API 进行填写即可。

20241003131850481

1.3.4 图床测试

最后,设定好之后,来到上传区,选择你的图床,上传一张图片,测试一下是否能上传成功。

20241003131851574

1.3.5 PicGo 集成到 Typora

PicGo 的图床准备好之后,我们需要在 Typora 中进行一番设置:依次点击 文件 -> 偏好设置 -> 图像,找到最下面的 上传服务,选择 PicGo(app),路径选择你的安装地址,最后点击验证图片上传选项,验证一下能否上传正常。

20241003131851277

如果上传失败了怎么办?

PicGo 的上传日志一般保存在:C:Users12243AppDataRoamingpicgopicgo.log,可以前往查看具体的报错信息。

然后,我们到上面的 插入图片时...,选择 上传图片,这样你每次在文档中插入图片,它会自动给上传到图床,然后返回一个 url 插入到文档中,非常方便。

当然,也可以在你的文档中,依次选择 格式 -> 图像 -> 上传所有本地图片,就会把文档中所有图片一键上传到图床。

至此,你的本地知识库基本就搭建完成了,后续往里增加内容将会变得 so easy~

20241003131852838

写在最后

至此,这篇长文第一部分就完成了,下篇我们将继续分享:如何将你的本地知识库部署上线~ 

 

阅读剩余
THE END