最近一直在想如何利用 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 資料處理的水印引數。