最近一直在想如何利用腾讯云COS 简化静态博客的搭建过程。搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面。功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法。
本文使用到工具
一颗能够写markdown的聪明大脑 🧠
本文方法的优点
不需要安装 node,谁都可以一键自动搭建;
本地不需要全局安装 doscify;
不需要维护两份代码;
若在写作过程中不小心把文件全删了,还可以恢复回来;
一边写作一边刷新页面即可实时在线上看到结果。
下面,就让我来给大家瞅瞅,我是如何做到一键搭建云上静态博客。
前期准备工作
第一步
首先,你要在腾讯云对象存储控制台创建一个存储桶。这里作为例子,我创建一个名为 docsify 的存储桶。地域可以就近选择,访问权限要选公有读私有写。
第二步
打开 腾讯云COS 的静态网站功能。
第三步
打开腾讯云 COS 的默认 CDN 加速,源站类型选择静态网站源站。
一键搭建博客
下载 COSBrowser 客户端,用腾讯云账号登录,并进入刚刚创建的那个存储桶。
打开客户端,并点击腾讯云账号登录。
进入刚刚创建的存储桶。
点击上传按钮,选择链接文件上传,并将下列 url 文件资源复制到输入框中,然后点击上传。
http://cos5.cloud.tencent.com/cosbrowser/web/docsify/vue.csshttp://cos5.cloud.tencent.com/cosbrowser/web/docsify/docsify.min.jshttp://cos5.cloud.tencent.com/cosbrowser/web/docsify/index.htmlhttp://cos5.cloud.tencent.com/cosbrowser/web/docsify/README.md
复制
开始写文档
上一步上传成功后,可以看到当前目录下创建的几个文件。
vue.css博客依赖的样式文件,不需要管
docsify.min.js博客依赖的脚本文件,不需要管
index.html博客的入口文件
README.md会做为主页内容渲染
直接在 COSBrowser 客户端编辑README.md就能更新主页内容,当然也可以添加更多页面。
多页文档
假设你存储桶的目录结构如下:
.├──`index.html`├──`README.md`└── docs ├──`README.md`└──`guide.md`
复制
那么对应的访问页面将是:
README.md=>http://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/#/docs/README.md=>http://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/#/docsdocs/guide.md=>http://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/#/docs/guide
复制
定制侧边栏
为了获得侧边栏,您需要创建自己的_sidebar.md。您可以在 COSBrowser 新建_sidebar.md文件。默认情况下侧边栏会通过该文件自动生成。
首先配置loadSidebar选项,具体配置规则见配置项#loadSidebar。
编辑index.html文件:
window.$docsify= { ...,loadSidebar:true}
复制
然后编辑_sidebar.md文件
* [首页](docs/)* [指南](docs/guide)
复制
再刷新线上页面,即可看到侧边栏。
线上实时预览
在上述操作后,直接在浏览器打开 http://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/就能在线上看到文档。
注意这里能够进行实时预览的链接为静态网站访问链接,不是加速域名链接。
每次编辑完后刷新浏览器页面就能实时看到更新后的文档内容。
但如果想要更新 CDN 缓存,则需要去CDN 控制台对该 url 进行刷新。
知识补充
1、COSBrowser 如何进行文件恢复(找回历史文件)?
COSBrowser 客户端编辑窗口有一个小小的【时钟】按钮,点击该按钮可打开编辑器历史。但是该功能仅帮您保存最近 100 次所有文档编辑的记录。
若需要 腾讯云COS 帮您自动保存副本,则可以开启存储桶的版本控制功能。
这样,您就可以在历史版本中下载该文件的历史版本并进行恢复了。
2、如何把截图上传到 COSBrowser?
您可以使用其他工具的快捷键在屏幕里截图,截好的图会自动存在剪辑版中。
当您在 COSBrowser 客户端用快捷键 CTRL+V 即可将截图上传到当前目录下。
3、如何在 .md 文档中引用图片?
您可以通过绝对路径或相对路径引用图片。
// 绝对路径引用图片![图片](https://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/docs/images/test.png)// 相对路径引用图片![图片](./images/test.png)
复制
4、如何为上传的图片加上 COS 数据处理的一些功能(如:水印)
如果是要为图片带上水印,可以直接在绝对路径/相对路径上加上 COS 数据处理的水印参数。参考文档
// 绝对路径引用图片![图片](https://docsify-1252452803.cos-website.ap-guangzhou.myqcloud.com/docs/images/test.png?watermark/2/text/d29uZGVyc3dhbmc)// 相对路径引用图片![图片](./images/test.png?watermark/2/text/d29uZGVyc3dhbmc)
复制
5、腾讯云 COS 最近有什么特惠活动?
新用户专享存储包低至1元,还有更多好礼等你来揭晓!
https://cloud.tencent.com/act/pro/cos?fromSource=gwzcw.7119104.7119104.7119104&utm_medium=cpc&utm_id=gwzcw.7119104.7119104.7119104