Hexo一鍵部署到阿里雲OSS並設置瀏覽器快取
自建部落格地址：//bytelife.net，歡迎訪問！ 本文為部落格自動同步文章，為了更好的閱讀體驗，建議您移步至我的部落格👇
本文作者： Jeffrey
本文鏈接： //bytelife.net/articles/52761.html
版權聲明： 本部落格所有文章除特別聲明外，均採用 BY-NC-SA 許可協議。轉載請註明出處！
現在用Hexo來搭建靜態站點的人越來越多了，很多人會選擇試用Github Pages服務來部署自己的靜態站，但Github Pages中國訪問速度實在無法接受，本文介紹一下如何一鍵使用阿里雲OSS對象存儲服務部署Hexo站點，同時解決一個瀏覽器快取的坑。
加速方案
- Netlify：與Github配合使用很方便，但中國訪問速度不佳，需要搭配中國CDN使用
- Vercel：與Netlify類似，中國訪問速度不錯，域名沒有備案的話是個不錯的選擇
- 對象存儲：使用阿里雲OSS或類似的對象存儲服務，中國訪問速度不錯，也可搭配中國CDN使用，速度最好，但要求你的域名有備案號
- 境內對象存儲+境外Vercel/Netlify：我所採用的方案，應該是最佳的方案了
創建Bucket
首先要做的事情就是去阿里雲(//aliyun.com)創建一個Bucket:
- Bucket名稱：隨便起，只要不重複就行
- 地域：按你的需求，阿里雲的節點中國訪問速度都可以，如果你不打算使用CDN服務的話，可以選擇華東節點，全國訪問速度都能兼顧。如果使用CDN服務的話，那就沒區別了，選哪都行。
- 存儲類型：一般選擇標準存儲就可以了，當然如果訪問量很小的話，選擇低頻訪問存儲也可以，可以省一點錢。
- 同城冗餘存儲：不需要
- 版本控制：不需要
- 讀寫許可權：這裡要注意，我們選擇公共讀，切記不能選擇私有，一方面如果不開啟CDN的話，私有許可權無法在公網訪問。另一方面，如果開啟CDN，阿里雲的CDN私有回源功能與OSS的靜態頁面功能衝突（別問我是怎麼知道的，都是坑）
- 服務端加密方式：無
- 實時日誌查詢：看需求，有免費7天的實時日誌查詢，但有900GB/天的限制
- 定時備份：不開通
開啟靜態頁面功能
進入Bucket的配置頁面，選擇「基礎設置-靜態頁面」：
按照圖中的內容進行配置：
- 默認首頁：index.html
- 默認404頁：404.html（按照你實際的404頁面地址填寫）
- 子目錄首頁：開通，這裡由於Hexo的分類、標籤等頁面，都是子目錄的形式（例如：/tags/），如果不開通這個功能，不會自動定位到對應目錄的index.html
- 文件404規則：Index
創建AccessKey並授權
其實現在就可以在阿里雲的管理頁面上傳文件部署網站了，但實在是太麻煩，我們希望的是一個自動化的方案。這裡我們需要創建一個API的授權AccessKey：
阿里雲現在開啟了子賬戶授權的功能，因此我們可以選擇跳轉到子賬戶管理的頁面：
首先創建一個子賬戶：
這裡注意，由於我們這個賬戶是給API使用的，所以必須開啟編程訪問許可權：
返回以後，點擊剛創建的賬戶右側的「添加許可權」：
這裡搜索「OSS」，選擇添加AliyunOSSFullAccess許可權：
返回列表，點擊剛創建的賬戶名稱，創建一個AccessKey，這裡要注意，創建完AccessKey後，會顯示一個AccessKey和一個SecretKey，一定要保存好，只會顯示一次：
安裝一鍵部署腳本
我編寫了一個可以一鍵部署Hexo到阿里雲OSS的hexo插件，並支援配置瀏覽器快取HTTP響應頭。
源碼地址：//github.com/huzhanfei/hexo-deployer-ali-oss-extend
使用很簡單，在hexo項目下執行安裝命令：
npm i hexo-deployer-ali-oss-extend
在hexo項目配置文件_config.yml中添加如下配置：
deploy:
- type: ali-oss
region: "<您的oss 區域程式碼>"
accessKeyId: "<您的oss accessKeyId>"
accessKeySecret: "<您的oss accessKeySecret>"
bucket: "<您的bucket name>"
cacheControl:
images: "<圖片文件HTTP響應頭Cache-Control>，留空為no-cache"
css: "<CSS文件HTTP響應頭Cache-Control>，留空為no-cache"
js: "<JS文件HTTP響應頭Cache-Control>，留空為no-cache"
html: "<HTML文件HTTP響應頭Cache-Control>，留空為no-cache"
other: "<其它文件HTTP響應頭Cache-Control>，留空為no-cache"
其中區域程式碼，可以在OSS的Bucket概覽當中找到，如下圖所示：
另外，這裡增加Cache-Control功能，是由於OSS對象存儲並沒有針對常見的網頁文件（如css、js、圖片等）進行默認HTTP響應頭的設置，這些不常更新的文件不快取，會導致流量大量浪費，後面如果使用CDN的時候，CDN獲取不到快取配置也會進行不斷的回源，產生回源流量浪費。
配置就這麼簡單，然後執行部署命令：
hexo d
即可將項目部署到OSS中，默認情況下將文件上傳到bucket的根目錄下，如果需要部署到其他目錄，請在deploy下添加remotePath選項進行指定
remotePath: "<您要部署的目錄>"
當然，如果你使用了GitHub的Actions功能，可以配置自動執行hexo d，提交源碼的時候自動執行部署腳本，簡直不要太方便，具體配置方式不是本文討論的重點內容，可自行研究。
配置自定義域名
其實做到這一步，就已經可以訪問你的網站了，可以在Bucket概覽頁面找到你的訪問域名，當然我們大概率需要使用自己的域名訪問，如果你的域名已經進行了備案，可以添加自定義域名。
可以在「傳輸管理-域名管理」中配置域名：
點擊「綁定域名」，在如圖所示的內容中填入自己的域名，如果你的域名解析伺服器是阿里雲的話，可以點擊「自動添加CNAME記錄」快速設置域名解析：
如果你的域名不在阿里雲解析的話，請根據頁面提示手動設置域名解析。
後話
到此，就可以通過你的域名訪問站點了，你也可以上傳SSL證書以開啟HTTPS訪問。
當然，如果你有更高的要求，也可以選擇更多的優化：
- 開啟CDN服務：開啟CDN服務後，相當於在全國多地部署你了的鏡像站，以獲取更快的訪問速度，同時可以通過CDN服務開啟圖片壓縮、頁面優化等等功能
- 分區域解析：設置DNS解析將中國解析到阿里雲OSS或CDN，國外解析到Netlify、Vercel甚至直接解析到GitHub Pages服務
