hexo-deployer-cos-cdn 插件安裝使用指南

本文來自 悟塵紀，獲取更新內容可查看原文：https://www.lixl.cn/2020/0209...

Hexo部署插件，支持將靜態博客發佈到騰訊雲、阿里雲對象存儲中，並同步刷新被更新文件的CDN緩存。

詳見博文：hexo-deployer-cos-cdn 插件安裝使用指南。按量付費，通常訪問量不高的話，體驗期事後一個月也花不了幾塊錢。

特色

1. 全站 CDN 加速，速度超快，成本幾乎爲零。
2. 支持同時使用阿里雲和騰訊雲對象存儲服務。
3. 支持將網站和圖片發佈到各自的 bucket 中。
4. 每次上傳時會對比本地與雲端文件MD5值，只發布變動內容。
5. 支持同步部署到到多個博客託管服務，如 COS + Github Pages
6. 支持將 Markdown 源文件中圖片路徑替換爲 CDN 地址，便於直接粘貼/導入到第三方平臺。
7. 支持自動清理遠程 bucket 中的多餘文件，默認不啓用。

理想的 Markdown 博文寫做及發佈體驗

1. Ctrl + v 一鍵粘貼包括多張圖片和文本組成的混合內容並實時預覽，內容編輯所見即所得。
2. hexo g -d 一鍵發佈到多個託管平臺（如Github+COS）。
3. 自建的博客平臺擁有超快的訪問速度且幾乎零成本。
4. 直接粘貼/導入 Markdown 博文到第三方平臺（如知乎、簡書、CSDN）。

推薦使用 Typora + 本插件 實現如上體驗。Typora 配置參照下圖：

通過以上配置之後，在 Typora 中編輯 MarkDown 文檔時，截圖後直接 Ctrl + v 便可粘貼並實時預覽。尤爲是一鍵粘貼包括多張圖片及文本的混合內容，並保留原格式很是方便。hexo d 部署之後，網站及圖片會自動上傳到雲對象存儲中。

安裝

npm install hexo-deployer-cos-cdn --save

配置

最簡單配置

deploy:
  type: cos-cdn
  cloud: tencent
  bucket: blog-1234567890
  region: ap-shanghai
  secretId: AKIDIgxxxxxxxxxxxxxxxxxxxx0SepjX
  secretKey: qXPCbxxxxxxxxxxxxxxxxxxxxsJZfdR

如上配置，圖片和文件將發佈到 騰訊雲的 同一個 bucket 中，默認開啓CDN加速，CDN加速域名爲 _config.yml 中配置的 url，圖片上傳後，Markdown 源文件中圖片依然是相對路徑。

網站與圖片放在不一樣的bucket中

deploy:
  type: cos-cdn
  cloud: tencent
  bucket: blog-1234567890
  region: ap-shanghai
  secretId: AKIDIgxxxxxxxxxxxxxxxxxxxx0SepjX
  secretKey: qXPCbxxxxxxxxxxxxxxxxxxxxsJZfdR
  imageConfig:
    cloud: aliyun
    cdnUrl: https://pic.lixl.cn
    bucket: lxl80
    region: oss-cn-beijing
    folder: static
    cdnEnable: false
    deleteExtraFiles: false #謹慎開啓
    secretId: AKIDIgxxxxxxxxxxxxxxxxxxxx0SepjX
    secretKey: qXPCbxxxxxxxxxxxxxxxxxxxxsJZfdR

如上配置，文件將發佈到 騰訊雲 的 bucket 中，圖片發佈到阿里雲的 bucket 中。圖片使用單獨的 CDN 加速域名。圖片cdn沒有開啓CDN換新及刪除多餘文件功能。

免備案部署

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos-cdn
    cloud: tencent
    bucket: blog-1234567890
    region: ap-shanghai
    cdnEnable: true
    deleteExtraFiles: true
    updatePosts: true
    secretId: AKIDIgxxxxxxxxxxxxxxxxxxxx0SepjX
    secretKey: qXPCbxxxxxxxxxxxxxxxxxxxxsJZfdR
    imageConfig:
      cloud: aliyun
      cdnUrl: https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/static
      bucket: lxl80
      region: oss-cn-beijing
      folder: static
      cdnEnable: false
      deleteExtraFiles: true #謹慎開啓
      secretId: AKIDIgxxxxxxxxxxxxxxxxxxxx0SepjX
      secretKey: qXPCbxxxxxxxxxxxxxxxxxxxxsJZfdR

如上配置，須要安裝 hexo-deployer-git 插件。會同步將網站發佈到 Github Pages 及 雲對象存儲 中；若是 bucket 中有多餘文件會刪除；圖片上傳成功後，會將 Markdown 源文件中圖片路徑替換爲 CDN 地址。

若是嫌 Github Pages 國內訪問致使html頁面加載太慢，能夠經過 netlify 來提速。在 netlify 中基於 git 建立站點，關聯 github 倉庫，之後經過 hexo g -d一鍵部署時，netlify 中的內容也會自動更新。示例站點: https://netlify.lixl.cn/

也可使用免費的 jsDelivr CDN 來加速，如上面示例的 cdnUrl 配置成了 jsDelivr CDN 加速地址，這樣配置的話，圖片在阿里雲OSS中只保存備份，用戶訪問的是基於免費的 jsDelivr CDN 來加速 Github 圖牀的效果，全球訪問速度都很快，還省去了佔網站流量大頭的圖片流量 CDN 加速成本。 詳情可參見博文：使用Typora + PicGo 圖牀 + jsDelivr CDN實現高效 Markdown 創做。

補充： jsDelivr 是惟一具備中國政府頒發的有效ICP許可證的全球公共CDN，其直接在中國大陸設有數百個節點。

參數說明

• type： 固定填: cos-cdn
• cloud： 指定雲服務商，目前支持阿里雲 aliyun 和騰訊雲 tencent
• bucket 和 region： 以騰訊云爲例，進入控制檯 - 對象存儲 - 存儲桶列表 頁面，存儲桶名稱即: bucket ，所屬地域代號即: region，參照下圖紅框圈住的部分:

• secretId 和 secretKey：以騰訊云爲例，進入控制檯 - 訪問管理 - 訪問祕鑰 - API祕鑰管理，參照下圖紅框圈住的部分:

• cdnEnable: 是否啓用CDN加速，默認爲 true，若是爲 false ，將不會刷新 CDN 緩存。
• deleteExtraFiles: 是否刪除雲端多餘文件(本地不包含的文件)，默認爲 false，請謹慎選擇。
• updatePosts：是否更新 Markdown 源文中的圖片地址爲CDN路徑。默認爲 false ，若是設置爲 true ，以後再次修改 imageConfig.cdnUrl時，須要手動將 Markdown 源文中的圖片地址批量替換爲相對路徑，不然不生效。
• imageConfig.cdnUrl： 用於存儲圖片的 bucket 綁定的 CDN 加速域名。對費用敏感的話，能夠參考與其它部署插件共存的配置示例，採用 jsDelivr CDN 節省流量成本。
• imageConfig.folder：本地博客 hexo/source/ 目錄內，用戶存放本地圖片文件的目錄。

注意事項

1. 使用雲對象存儲及 CDN 服務，網站須要先備案。
2. 超出免費額度要付費，記得開啓防盜鏈。
3. 更新 CDN 緩存須要受權，若是使用子帳號，請同時賦予該帳號此權限。
4. 若是想將 markdown 源文直接導入/粘貼到第三方平臺，記得在圖片 CDN 防盜鏈配置中增長白名單。

License

MIT

參考

• hexo-deployer-cos-enhanced
• openapi-core-nodejs-sdk
• oss-js-sdk