如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

噠噠噠_發表於2018-05-16
Hexo阿里

轉載自 -> blog.vvvvvvvvvvvvvvv.com/2018/05/15/…

15v網技術部落格 是由 hexo 生成的靜態站點, 採用 hexo 主題 hexo-theme-next. 全站資源上傳至 阿里 OSS, 並由 CDN 加速訪問. 不用新開一臺伺服器託管該部落格, 也不用佔用15v網主伺服器的資源. HTTPS 證書由免費的 Let's Encrypt 簽發. 該站點只需要付費每個月的 CDN 流量費和 HTTPS 的請求費用.

相比較 github 的靜態託管, 阿里雲 CDN 託管的站點訪問速度可以算一個優勢吧.

Prerequisite

  1. 一個阿里雲賬號並且開通了物件儲存服務, CDN 服務
  2. 一個成功通過備案的域名

建立 OSS Bucket

點選這裡:

create a oss

填入必要的資訊:

  • 我這裡已經建立過命名為 15v-blog 的 bucket 所以提醒我重名.
  • 區域, 如果沒有特殊要求(需要和已有的伺服器同一區域, 以便於內網訪問)的話, 建立離你的地理位置比較近的區域, 上傳速度快一點, ?國內其實也沒有太大的區別.
  • 儲存型別為標準儲存, 因為部落格的資源需要經常被訪問
  • 讀寫許可權, 我的讀寫許可權為公共讀, 你可以配置為私有, 不過私有的訪問起來需要憑證, 麻煩點, 可以配置為公共讀, 然後設定 referer(在基礎設定 -> 防盜鏈) 來限制訪問, 一定不能設定為公共讀寫.
  • 填寫完成之後點選確定, 建立完成.

input information

配置 OSS 為靜態網站託管模式

填寫預設首頁為 index.html, 404 頁面按需配置

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

OSS 的概覽:

oss

配置 CDN

進入 CDN 控制檯點選這裡:

cdn

填寫資訊:

  • 加速域名, 填寫你需要加速的域名, 如 blog.vvvvvvvvvvvvvvv.com
  • 業務型別為圖片小檔案型別
  • 源站型別為 OSS, 選擇剛剛在上方建立的 OSS 的域名
  • 需要 HTTPS, 埠選擇 443 埠, 否則選擇 80 埠就可

選擇 443 埠之後會出現 回源預設不攜帶SNI資訊 什麼是 SNI?, 等會兒要配置 CDN 的 HTTPS 證書, 這裡可以忽略這個提示.

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

提交之後進入稽核階段並獲取阿里雲分配的 CNAME:

提交之後會進入稽核階段, 稍等一會兒(很快), 就會稽核通過.

稽核通過狀態為配置中, 稍等一會兒, 等待阿里雲系統分配 CNAME, 分配完成:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

配置 CNAME:

回到域名管理, 可以看到加速域名對應的 CNAME, 點選複製

cname

點選 CNAME 複製, 進入雲解析 DNS 配置域名解析, 點選這裡:

domain config

  • 記錄型別 必須指定為 CNAME
  • 主機記錄填寫要加速的域名, 我這裡就填了 blog
  • 解析線路預設就好
  • 記錄值填寫在 CDN 域名管理中分配的域名, 就是剛剛複製的域名
  • TTL 值, 為域名紀錄的最長快取時間, 預設的10分鐘也可

cname config

點選確認, 新增成功.

不需要 HTTPS, 關於阿里雲的配置這裡就結束了 -> goto HEXO 配置

配置 HTTPS, 需要給自己的加速域名申請一個 HTTPS 證書

DO 有很好的教程, 這裡就不重複了

回到 CDN -> 域名管理, 點選配置:

config

配置 HTTPS, 選擇開啟, 選擇自定義上傳證書, 給證書起個名字

將申請的 HTTPS 證書的公鑰和私鑰分別拷貝到對應的輸入框內

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

以 centos 7 + nginx 申請的 Let's Encrypt 為例

fulllchain.pem 為公鑰, privkey.pem 為私鑰.

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

下面還有是否強制 HTTP -> HTTPS. 15v網全站採用 HTTPS.

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

點選確定, HTTPS 證書將會很快生效.

HEXO 配置

npm install -g hexo
cd ~/loveTech
hexo init blog-15v-app
cd blog-15v-app
npm install
複製程式碼

新建完成後，指定資料夾的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
複製程式碼

更多的 hexo 配置請至 hexo 官網 hexo.io/zh-cn/docs/ 檢視

安裝主題 next

請至 github.com/theme-next/… 檢視如何安裝

修改 NEXT 原始碼以滿足要求

使用 hexo generate 命令生成靜態站點, 生成之後的目錄結構為:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

預設的訪問路徑為:

http://localhost:4000/2018/05/15/how-depoly-blog-to-alioss-and-use-cdn/

http://localhost:4000/archives/

也就是訪問的路徑都是不帶有 index.html 的, 但是 OSS 的訪問路徑必須為絕對路徑, 必須包含 index.html, 否則會導致一直訪問的都是 OSS 中配置的首頁, NEXT 主題的配置也沒有該配置項, 可以修改原始碼已滿足要求.

首先, 修改 archives 的訪問地址, 這個的配置在 NEXT 的配置檔案中 themes/next/_config.yml:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

你可以選擇直接修改, 或者是在自己的專案的配置檔案中覆蓋主題的配置檔案, 詳情請見 hexo.io/docs/config…, 中文的文件中沒有這一節哦.

第二步, 修改首頁部落格文的連結, 也就是這裡的連結:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

找到 theme/next/layout/_macro/post.swig, 在 a 連結的後面加上 index.html:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

第三部, 修改文章底部的連結:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

找到 theme/next/layout/post.swig, 在 a 連結的後面加上 index.html:

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

至此, 關於 HEXO 的配置也已經完畢, 接下來如何將生成的靜態站點上傳至 OSS

自動化指令碼上傳靜態站點至 OSS

hexo generate 可以將整個靜態網站生成在 public 下面

如何將 hexo 生成的部落格部署至阿里雲 OSS 並全站啟用 CDN 加速訪問 - 轉載

只需要將整個 public 目錄上傳至 OSS 即可, 但是要保持目錄結構.

看一下我寫的自動化指令碼

需要安裝模組 ali-oss

nodejs 版本需要 10.x+

const fs = require('fs')
const path = require('path')
const util = require('util')
const OSS = require('ali-oss').Wrapper

const promisifyReaddir = util.promisify(fs.readdir)
const promisifyStat = util.promisify(fs.stat)

// 阿里 OSS access key 擁有對 OSS 的全部許可權
const ALIOSSKEY = {
  key: '**********',
  secret: '***************'
}

const client = new OSS({
  // 請填寫你的 Bucket 對應的 region
  region: '*******',
  accessKeyId: ALIOSSKEY.key,
  accessKeySecret: ALIOSSKEY.secret,
  // 請填寫對應的 Bucket 名字
  bucket: '15v-blog'
})

const publicPath = path.resolve(__dirname, './public')

async function run(proPath = '') {
  const dir = await promisifyReaddir(`${publicPath}${proPath}`)

  for (let i = 0; i < dir.length; i++) {
    const stat = await promisifyStat(path.resolve(`${publicPath}${proPath}`, dir[i]))

    if (stat.isFile()) {
      const fileStream = fs.createReadStream(path.resolve(`${publicPath}${proPath}`, dir[i]))
      console.log(`上傳檔案: ${proPath}/${dir[i]}`)
      const result = await client.putStream(`${proPath}/${dir[i]}`, fileStream)
      console.log(result)
    } else if (stat.isDirectory()) {
      await run(`${proPath}/${dir[i]}`)
    }
  }
}

run()

複製程式碼

如何獲取 OSS key 可以看阿里雲的官方文件 -> help.aliyun.com/document_de…

阿里雲的 OSS 的 Nodejs 的 SDK 文件可以看這裡 -> help.aliyun.com/document_de…

如果不想了解指令碼原始碼, 你可以將該指令碼放置在 hexo 生成的專案根目錄下, hexo generate 生成靜態站點之後, node depoly-to-oss.js 可以將 public 目錄下的檔案上傳至對應的 OSS Bucket, 並保持整個目錄的結構.

上傳檔案至 OSS 不收任何費用

結語

  • 使用阿里雲 OSS + CDN 的速度在國內訪問肯定要比 Github 的速度快
  • 可以完全使資源完全獨立於主站服務
  • 不過要每個月需要支付 CDN 的流量費和 HTTPS 請求費用, 相信你支付的起

相關文章