最近一直在想如何利用 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 文件資源復制到輸入框中,然后點擊上傳。
開始寫文檔
上一步上傳成功后,可以看到當前目錄下創建的幾個文件。
1、vue.css 博客依賴的樣式文件,不需要管
2、docsify.min.js 博客依賴的腳本文件,不需要管
3、index.html 博客的入口文件
4、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 數據處理的水印參數。