乐趣区

关于云存储:Docsify腾讯云对象存储-COS一键搭建云上静态博客

jiezi

最近始终在想如何利用 COS 简化动态博客的搭建过程。搜了很多的动态博客搭建过程，发现大部分的动态博客都要通过编译能力生成动态页面。功夫不负有心人，终于让我找到了一个超简洁博客的搭建办法。

成果预览

http://docsify-1252452803.file.myqcloud.com/

本文应用到工具

  1. 腾讯云对象存储
  2. COSBrowser 客户端
  3. Docsify
  4. 一颗可能写 markdown 的聪慧大脑 ????

本文办法的长处

  1. 不须要装置 node，谁都能够一键主动搭建；
  2. 本地不须要全局装置 doscify；
  3. 不须要保护两份代码；
  4. 若在写作过程中不小心把文件全删了，还能够复原回来；
  5. 一边写作一边刷新页面即可实时在线上看到后果。

上面，就让我来给大家瞅瞅，我是如何做到一键搭建云上动态博客。

后期筹备工作

第一步

首先，你要在腾讯云对象存储控制台创立一个存储桶。这里作为例子，我创立一个名为 docsify 的存储桶。地区能够就近抉择，拜访权限要选私有读公有写。

第二步

关上 COS 的动态网站性能。

第三步

关上 COS 的默认 CDN 减速，源站类型抉择 动态网站源站。

一键搭建博客

下载 COSBrowser 客户端，用腾讯云账号登录，并进入刚刚创立的那个存储桶。

  1. 关上客户端，并点击腾讯云账号登录。
  2. 进入刚刚创立的存储桶。
  3. 点击上传按钮，抉择链接文件上传，并将下列 url 文件资源复制到输入框中，而后点击上传。

开始写文档

上一步上传胜利后，能够看到当前目录下创立的几个文件。

  • vue.css 博客依赖的款式文件，不须要管
  • docsify.min.js 博客依赖的脚本文件，不须要管
  • index.html 博客的入口文件
  • README.md 会做为主页内容渲染

间接在 COSBrowser 客户端编辑 README.md 就能更新主页内容，当然也能够增加更多页面。

多页文档

假如你存储桶的目录构造如下：

那么对应的拜访页面将是：

定制侧边栏

为了取得侧边栏，您须要创立本人的_sidebar.md。您能够在 COSBrowser 新建 _sidebar.md 文件。默认状况下侧边栏会通过该文件主动生成。

首先配置 loadSidebar 选项，具体配置规定见配置项 #loadSidebar。

编辑 index.html 文件：

而后编辑 _sidebar.md 文件

再刷新线上页面，即可看到侧边栏。

线上实时预览

在上述操作后，间接在浏览器关上 http://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/ 就能在线上看到文档。

留神这里可能进行实时预览的链接为 动态网站拜访链接，不是减速域名链接。

每次编辑完后刷新浏览器页面就能实时看到更新后的文档内容。

但如果想要更新 CDN 缓存，则须要去 CDN 控制台 对该 url 进行刷新。

常识补充

1、COSBrowser 如何进行文件复原（找回历史文件）？

COSBrowser 客户端编辑窗口有一个小小的【时钟】按钮，点击该按钮可关上编辑器历史。然而该性能仅帮您保留最近 100 次所有文档编辑的记录。

若须要 COS 帮您主动保留正本，则能够开启存储桶的版本控制性能。

这样，您就能够在历史版本中下载该文件的历史版本并进行复原了。

2、如何把截图上传到 COSBrowser？

您能够应用其余工具的快捷键在屏幕里截图，截好的图会主动存在剪辑版中。

当您在 COSBrowser 客户端用快捷键 CTRL+V 即可将截图上传到当前目录下。

3、如何在 .md 文档中援用图片？

您能够通过绝对路径或相对路径援用图片。

4、如何为上传的图片加上 COS 数据处理的一些性能（如：水印）

如果是要为图片带上水印，能够间接在绝对路径 / 相对路径上加上 COS 数据处理的水印参数。参考文档

退出移动版