擁抱騰訊雲服務:Github Actions+COS,快速搭建你的Wiki文檔

雲存儲小天使 發佈 2020-01-16T18:31:01+00:00

想要一個自己的靜態站點,沒有伺服器 ? 想要所寫即所得的方式,書寫自己的文檔? 想要一推到代碼倉庫,就自動完成站點部署?  Github Page貌似已經滿足了,但是訪問慢,有沒更快的雲服務可用?

想要一個自己的靜態站點,沒有伺服器 ?

想要所寫即所得的方式,書寫自己的文檔?

想要一推到代碼倉庫,就自動完成站點部署?

  Github Page貌似已經滿足了,但是訪問慢,有沒更快的雲服務可用?

  不清楚上面的問題,是否在大家的日常中出現,但這些問題以前確實困擾著我,也相信困擾了很多同學,於是,有了本文。先讓看客們瞅瞅成品http://cos.galen-yip.com (請複製到瀏覽器打開)。

  如何用騰訊雲COS對象存儲快速搭建一個在國內就能快速訪問的Wiki文檔站點?

  下面給熟悉或者不熟悉騰訊雲對象存儲COS的同學普及下COS靜態網站這個最實用的功能。


準備工具

本文會用到Docsify+Github(可選)+Github Actions(可選)+騰訊雲對象存儲COS

下面分別介紹需要用到的幾個工具:

  • Docsify

  按Docsify官網的說法,這是「一個神奇的文檔網站生成工具」。他會動態的把你的Markdown轉換成html,這點真是不要太方便,不止產品同學喜歡,身為研發同學也愛得不行。當然,選擇它還有原因,就是 [ 好看 ],簡潔舒服。

  • Github

  這個就不介紹了,全球最大的 x 友交流社區。

  • Github Actions

  Github 的持續集成服務,詳細內容:https://dwz.cn/XB4jDdIz(手動複製到瀏覽器打開)

  • 騰訊雲對象存儲COS

  今天的主角,簡單說,可以認為它是一個容量不限的存儲空間。今兒要用到他的靜態網站功能,即免伺服器,把你用Docsify寫的Markdown文件,以靜態頁面的方式,提供了一個頁面地址供你進行訪問。


實操開始

一、安裝 Docsify ,用 Markdown 書寫 wiki

// 安裝、初始化,以及預覽
// 前提條件是本地安裝了Node/Npm,以及 npm 
npm i docsify-cli -g
docsify init ./cos-website-demo  
docsify serve cos-website-demo

  之後修改目錄下的cos-website-demo/README.md即可實時更新。

  如果以上的操作沒法完成,可以參考官網中手動初始化的方式:https://docsify.js.org/#/zh-cn/quickstart

(請手動複製到瀏覽器打開)

  而我們只需要做 3 步:

  ① 修改 index.html 中的'name';

  ② 編輯 _sidebar.md 修改成你需要的左側菜單;

  ③ 修改具體的'md'文件即可;

二、Github Actions + COS自動部署

2.1、思路 ( 不關心者可直接跳到 2.2 )

  我們使用Github進行代碼管理,當完成文檔書寫後,如果在代碼提交時,即可自動部署,那滋味想想可真是舒服。

  這自然想到了Github自帶的CI服務Github Actions。思路比較簡單,在代碼提交時去做一些事情,比如這裡是在代碼提交時,觸發Action去把文檔部署到 COS。

  那Github Actions如何上傳文檔到 COS ?去調用一個複雜的腳本,寫一段代碼來上傳?方案可行,但蠻麻煩的。有沒簡單點的辦法呢,比如就調用命令行?剛好,COS側官方提供了coscmd的命令行工具,上傳文件調用類似'coscmd upload ./a.jpg a.jpg' 即可完成對 a.jpg 的上傳。

  但在 Orange-ci 中無法直接調用 coscmd,需要以插件的形式來調用。那剩下的就是配置好COS,寫好ci的yml 文件即可。

  那剩下的就是配置好 COS 以及 Github Actions 即可。

2.2、配置 COS 靜態網站功能

  首先,登錄 COS 控制台,創建好一個公有讀私有寫的存儲桶。比如我創建了地域為廣州, 名稱為 cos-website-demo-1251496585 的存儲桶(註:詳細的靜態網站配置請點擊查看底部相關文檔)。

  然後,點擊存儲桶名稱,進入存儲桶詳情,點擊【基礎配置】,滾動到下方,找到【靜態網站】,直接開啟即可( 強制HTTPS別開啟 )。

  圖中訪問節點:https://cos-website-demo-125149

6585.cos-website.ap-guangzhou.myqcloud.com即COS為你提供的靜態站點地址,但因為新建的存儲桶中目前沒有任何內容,因此還需配合後續操作。

2.3、串聯 Github、Github Actions、COS

  首先開通 Github Actions,因為目前Github Actions還處於測試階段,需要到這裡進行申請:https://dwz.cn/mqDs2mmn(手動複製到瀏覽器打開)。

  開通後,可以在Github倉庫看到 Actions 這一欄。

  其次,把騰訊雲的個人帳號 API 密鑰,配置到 Github 平台上,用於之後 Github Actions 發起到 COS的請求。

點擊【Settings】->【Secrets】後添加密鑰信息,騰訊雲帳號的SECRET_ID、SECRET_KEY可在騰訊雲控制台獲取。

  然後,在本地Docsify生成的目錄中,根目錄下創建.github/workflows 目錄,然後創建main.yml 文件,在裡面寫上傳文件到COS的邏輯。

  值得注意的是,前面我們在Secrets里配置了騰訊雲的密鑰信息,正是在這裡使用。把密鑰存在Github中,通過env來注入變量。

  其中,有 2 個地方需要修改下:

  ① 存儲桶名稱改為剛剛創建的,可在 COS 控制台獲取;

  ② 存儲桶的地域修改為剛選擇的,如果你也創建的是廣州,則無需修改;

2.4、提交Git,驗收成果。

  賢者的時刻到了,鍵盤敲下git push,聽著enter鍵清脆的迴響,碼農的快樂往往就是這麼樸實無華且枯燥。

  在Github Actions的頁面中靜待一會,提示構建成功則可以去驗收我們的站點。

  打開 2.2 中 COS 訪問節點處給出的 URL 地址,我的是:

https://cos-website-demo-1251496585.cos-website.ap-guangzhou.myqcloud.com (你需要改為你的存儲桶名稱及地域)。

  到此,我們基本完成了任務,一個外網可訪問的文檔頁面就有了,如果有修改,只需要推送到git即可等待它自動部署。

2.5、使用自定義域名

  賢者們不難發現,我們最終得到COS提供的域名:

htttp://xxxx.cos-website.ap-guangzhou.myqcloud.com開頭給的示例地址卻是:http://cos.galen-yip.com。

  這裡 COS 提供了綁定自定義域名的功能,打開存儲桶詳情,進到【域名管理】,找到下方的【自定義源站域名】,在此添加自己的域名(因為前面存儲桶選擇的國內大陸地域,所以要求域名必須已備案,如果是選擇的海外,則無要求)。

  源站類型選擇靜態網站,添加完域名後,在域名的DNS廠商處添加上域名的CNAME記錄,指向原本COS提供的靜態站點域名 :

http://xxxx.cos-website.ap-guangzhou.myqcloud.com。

配置完畢,等候DNS生效即可。

  至此,則可以通過我們自己的域名來訪問文檔站點,如:http://cos.galen-yip.com


  由於cos暫不支持HTTPS證書的託管,因此通過自定義域名沒法用https訪問,但下方提供了2種方式:

  1、頁面加速

  如果你的站點訪問量較大,希望做訪問加速,或者你希望使用 https 的方式來訪問。那這裡可以結合「騰訊雲CDN」來使用,這一塊COS已經集成進來,提供了簡單的方式來幫你設置。

  同樣是上圖,打開存儲桶詳情,進到【域名管理】,找到下方的【自定義加速域名】,點擊添加域名,加速地域選擇國內,源站類型選擇 靜態網站類型,點擊保存。

  然後在域名的DNS廠商處添加上域名的CNAME記錄,指向圖中CNAME的域名http://xxx.cdn.dnsv1.com。等待5分鐘CDN進行配置下發,至此,即完成了CDN的接入。

  如果你需要使用 https 訪問,則可進到CDN控制台,找到你剛添加的域名,進入域名詳情,點擊【高級配置】,找到【HTTPS配置】進行相關的操作即可。(騰訊雲目前還能申請免費的 HTTPS 證書)

  2、自動刷新CDN

  再細心的賢者們,會發現,如果接入了CDN,CDN是會有緩存的,那提交Git後的自動部署到COS,通過添加的域名訪問站點的話,會始終命中CDN緩存,除非CDN默認的緩存過期了(默認30天)。

  那怎麼讓COS讓文件的更新反饋到CDN節點上呢?這裡可以使用「雲服務SCF」,這裡就不做額外的講解了。

關鍵字: