云開(kāi)發(fā) Jekyll 博客部署

2020-07-22 15:34 更新

云開(kāi)發(fā)靜態(tài)托管是云開(kāi)發(fā)提供的靜態(tài)網(wǎng)站托管的能力，靜態(tài)資源（HTML、CSS、JavaScript、字體等）的分發(fā)由騰訊云對(duì)象存儲(chǔ) COS 和擁有多個(gè)邊緣網(wǎng)點(diǎn)的騰訊云 CDN 提供支持

Jekyll 介紹

Jekyll 是一個(gè)簡(jiǎn)單的博客形態(tài)的靜態(tài)站點(diǎn)生產(chǎn)機(jī)器。它有一個(gè)模版目錄，其中包含原始文本格式的文檔，通過(guò)一個(gè)轉(zhuǎn)換器（如 Markdown）和我們的 Liquid 渲染器轉(zhuǎn)化成一個(gè)完整的可發(fā)布的靜態(tài)網(wǎng)站，你可以發(fā)布在任何你喜愛(ài)的服務(wù)器上。Jekyll 也可以運(yùn)行在 GitHub Page 上，也就是說(shuō)，你可以使用 GitHub 的服務(wù)來(lái)搭建你的項(xiàng)目頁(yè)面、博客或者網(wǎng)站，而且是完全免費(fèi)的。

搭建Jekyll本地環(huán)境

上面的翻譯站點(diǎn)已經(jīng)提供了詳細(xì)的搭建介紹，通過(guò)「快速搭建指南：http://jekyllcn.com/docs/quickstart/ 」可以快速基于Jekyll完成站點(diǎn)搭建。本文將基于個(gè)人博客 https://blog.bihe0832.com/ 的遷移來(lái)講下iMac搭建Jekyll本地環(huán)境及遷移。

安裝Jekyll等插件可以參考官網(wǎng)提供的「安裝文檔 http://jekyllcn.com/docs/installation/」來(lái)安裝。由于系統(tǒng)默認(rèn)Ruby安裝過(guò)程中容易出現(xiàn)各種問(wèn)題，因此建議自定義安裝新的Ruby。關(guān)于卸載及重裝 Ruby 和 Jekyll的詳細(xì)內(nèi)容，也可以參考文章iMac搭建Jekyll本地環(huán)境。以下為簡(jiǎn)單的安裝事例：

  1.   ?  blog git:(master) ? gem install jekyll # 安裝 Jekyll
  2.   Fetching mercenary-0.3.6.gem  
  9.     25 gems installed
  14.   ?  blog git:(master) ? gem install github-pages  #安裝 Github Pages 方便預(yù)覽
  15.   Fetching addressable-2.5.2.gem
  22.     62 gems installed

創(chuàng)建靜態(tài)站點(diǎn)

這部分內(nèi)容可以參考官網(wǎng)提供的「快速指南 http://jekyllcn.com/docs/quickstart/」來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的站點(diǎn)并根據(jù)配置自定義你的站點(diǎn)風(fēng)格。我選擇直接從Github下載我的博客相關(guān)的內(nèi)容（對(duì)應(yīng)地址為：https://github.com/bihe0832/bihe0832.github.io）

對(duì)于基于Jekyll的靜態(tài)站點(diǎn)的目錄結(jié)構(gòu)，可以參考官網(wǎng)提供的「目錄結(jié)構(gòu)http://jekyllcn.com/docs/structure/」，下面為個(gè)人博客目錄結(jié)構(gòu)的簡(jiǎn)單介紹：

  1. ├── 404.html  ：404頁(yè)面
  4. ├── CNAME  ：Github Pages的域名配置
  7. ├── LICENSE  ：開(kāi)源協(xié)議
  10. ├── _config.yml  ：博客相關(guān)的配置信息
  13. ├── _includes  ：部分重用子頁(yè)面
  16. ├── _layouts  ：頁(yè)面布局
  19. ├── _posts  ：文章內(nèi)容
  22. ├── _site ：Jekyll 生成靜態(tài)頁(yè)面目錄
  25. ├── index.html  ： 博客首頁(yè)頁(yè)面格式
  28. ├── pages  ：一些特殊的靜態(tài)頁(yè)面
  31. ├── public    : 博客相關(guān)的資源，包括css、js、以及所有圖片
  34. ├── search  : 博客搜索功能相關(guān)代碼
  37. ├── sitemap.txt  ：站點(diǎn)地圖
  40. └── sitemap.xml  ：站點(diǎn)地圖

編譯構(gòu)建

當(dāng)文章寫(xiě)完以后，你可以先通過(guò)本地 build 驗(yàn)證構(gòu)建沒(méi)有問(wèn)題。在項(xiàng)目根目錄直接命令行運(yùn)行 jekyll build 即可查看構(gòu)建結(jié)果 

  1. ?  blog git:(master) ? jekyll build
  2. Configuration file: /github/blog/_config.yml
  3.             Source: /github/blog
  4.        Destination: /github/blog/_site
  7.  Incremental build: disabled. Enable with --incremental
  10.       Generating...
  13.                     done in 5.437 seconds.
  16.  Auto-regeneration: disabled. Use --watch to enable.
  19. ?  blog git:(master) ?

如果構(gòu)建沒(méi)有報(bào)錯(cuò)，你就可以選擇將構(gòu)建結(jié)果 _site 部署到你的服務(wù)器。如果想在本地查看效果，在項(xiàng)目根目錄直接命令行運(yùn)行 jekyll server 即可

  3. ?  blog git:(master) ? jekyll server
  6. Configuration file: /github/blog/_config.yml
  9.             Source: /github/blog
  12.        Destination:/github/blog/_site
  15.  Incremental build: disabled. Enable with --incremental
  18.       Generating...
  21.                     done in 4.1 seconds.
  24.  Auto-regeneration: enabled for '/github/blog'
  27.     Server address: http://127.0.0.1:4000
  30.   Server running... press ctrl-c to stop.

然后在瀏覽器打開(kāi) Server address 中顯示的地址即可查看效果

將靜態(tài)站點(diǎn)使用騰訊云靜態(tài)網(wǎng)站托管

創(chuàng)建靜態(tài)網(wǎng)站托管服務(wù)

1、創(chuàng)建騰訊云云開(kāi)發(fā)環(huán)境

打開(kāi)騰訊云「云開(kāi)發(fā) https://console.cloud.tencent.com/tcb/env/index」 服務(wù)的頁(yè)面。如下圖，點(diǎn)擊新建環(huán)境，然后在彈框中輸入你自定義的環(huán)境名稱(chēng)，選擇付費(fèi)模式，然后點(diǎn)擊下方的「立即開(kāi)通」。

之后就進(jìn)入了環(huán)境的初始化階段，初始化比較久。一般需要 1 分鐘左右，當(dāng)初始化結(jié)束，點(diǎn)擊對(duì)應(yīng)的 tab 就進(jìn)入了 環(huán)境總覽界面，可以看到具體的資源等信息。

2、初始化靜態(tài)網(wǎng)站托管服務(wù)

點(diǎn)擊進(jìn)入「靜態(tài)網(wǎng)站托管 https://console.cloud.tencent.com/tcb/hosting」 服務(wù)的頁(yè)面。如下圖，選擇之前創(chuàng)建的開(kāi)發(fā)環(huán)境，然后點(diǎn)擊「開(kāi)始使用」初始化環(huán)境。靜態(tài)網(wǎng)站服初始化一般需要約 3 分鐘

將靜態(tài)頁(yè)面部署到托管服務(wù)

你闊以直接選擇將構(gòu)建好的靜態(tài)頁(yè)面上傳到托管服務(wù)，但是考慮到博客的更新頻率，還是選擇使用官方提供的工具來(lái)上傳。首先使用npm 下載并安裝官方上傳工具cloudbase

  1. ?  _posts git:(master) ? npm install -g @cloudbase/cli
  4. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
  7. /usr/local/bin/tcb -> /usr/local/lib/node_modules/@cloudbase/cli/bin/tcb.js
  10. /usr/local/bin/cloudbase -> /usr/local/lib/node_modules/@cloudbase/cli/bin/cloudbase.js
  13. npm WARN ws@7.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
  16. npm WARN ws@7.2.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
  19. + @cloudbase/cli@0.6.6
  22. added 383 packages from 325 contributors in 26.045s

然后使用cloudbase命令獲取CLI授權(quán)，輸入命令，然后再?gòu)棾龅捻?yè)面中點(diǎn)擊「確認(rèn)授權(quán)」

  3. ?  blog git:(master) ? tcb login
  6. ? 已打開(kāi)云開(kāi)發(fā) CLI 授權(quán)頁(yè)面，請(qǐng)?jiān)谠崎_(kāi)發(fā) CLI 授權(quán)頁(yè)面同意授權(quán)
  9. ? 未知錯(cuò)誤：請(qǐng)求超時(shí)，請(qǐng)檢查你的網(wǎng)絡(luò)，如果終端無(wú)法直接訪問(wèn)公網(wǎng)，請(qǐng)?jiān)O(shè)置終端 HTTP 請(qǐng)求代理！
  12. 請(qǐng)檢查你的網(wǎng)絡(luò)，嘗試重新運(yùn)行 cloudbase login 命令！

如果遇到上面的錯(cuò)誤，一般是因?yàn)榫W(wǎng)絡(luò)限制，需要添加 http 代理，可以參照文章 「iMac（OS X）日常開(kāi)發(fā)中各種代理設(shè)置方法匯總（shell、Android Studio、gem、npm）https://blog.bihe0832.com/proxy.html」 設(shè)置 shell 代理即可。設(shè)置代理后重試： 

  1. ?  _posts git:(master) ? tcb login
  4. ? 已打開(kāi)云開(kāi)發(fā) CLI 授權(quán)頁(yè)面，請(qǐng)?jiān)谠崎_(kāi)發(fā) CLI 授權(quán)頁(yè)面同意授權(quán)
  7. ? 登錄成功！
  10. ? 是否同意 Cloudbase CLI 收集您的使用數(shù)據(jù)以改進(jìn)產(chǎn)品？ Yes
  13. 可使用下面命令繼續(xù)操作：
  18. – 創(chuàng)建免費(fèi)環(huán)境
  23.   $ cloudbase env:create envName
  28. – 初始化云開(kāi)發(fā)項(xiàng)目
  33.   $ cloudbase init
  38. – 部署云函數(shù)
  43.   $ cloudbase functions:deploy
  48. – 查看命令使用介紹
  53.   $ cloudbase -h
  58. Tips：可以使用簡(jiǎn)寫(xiě)命令 tcb 代替 cloudbase

使用 hosting 命令 將本地已經(jīng)編譯的靜態(tài)文件部署到托管服務(wù)（例如部署我的博客的 _site ），命令行中-e 后面的環(huán)境ID就是首頁(yè)生成的環(huán)境ID，一般騰訊云會(huì)在我們的自定義名稱(chēng)后面加一個(gè)后綴。由于博客的內(nèi)容比較大、加上網(wǎng)絡(luò)代理，發(fā)現(xiàn)有時(shí)候會(huì)失敗，重試即可。

  3. ?  blog git:(master) ? jekyll build
  6. Configuration file: /Volumes/Document/Documents/github/blog/_config.yml
  9.             Source: /Volumes/Document/Documents/github/blog
  12.        Destination: /Volumes/Document/Documents/github/blog/_site
  15.  Incremental build: disabled. Enable with --incremental
  18.       Generating...
  21.                     done in 4.504 seconds.
  24.  Auto-regeneration: disabled. Use --watch to enable.
  27. ?  _site git:(master) ? cd ..
  30. ?  blog git:(master) ? cd _site
  33. ?  _site git:(master) ? tcb hosting:deploy ./ -e blog-qcloud-new-131e7b
  36. FetchError: request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639
  39.     at ClientRequest.<anonymous> (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/node-fetch/lib/index.js:1455:11)
  42.     at ClientRequest.emit (events.js:205:15)
  45.     at ClientRequest.EventEmitter.emit (domain.js:471:20)
  48.     at onerror (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:101:9)
  51.     at callbackError (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:123:5)
  54.     at processTicksAndRejections (internal/process/task_queues.js:89:5)
  57. ? request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639
  60. ?  _site git:(master) ? tcb hosting:deploy ./ -e blog-qcloud-new-131e7b
  63. 文件傳輸中 [==================================================] 100% 0.0s
  66. ? 文件共計(jì) 842 個(gè)
  69. ? 文件上傳成功 842 個(gè)
  72. ? 文件上傳失敗 0 個(gè)

管理靜態(tài)頁(yè)面及修改設(shè)置

上傳結(jié)束以后，在靜態(tài)頁(yè)面托管的「文件管理」頁(yè)面可以對(duì)我們上傳的內(nèi)容進(jìn)行調(diào)整，在「設(shè)置」頁(yè)面可以添加域名、錯(cuò)誤頁(yè)面等信息，同時(shí)也給出了騰訊云提供的默認(rèn)域名。如果你有自己的域名，你也可以添加自己的域名解析，例如下面我修改為使用我自己的域名，并設(shè)置了自定義的索引頁(yè)和404頁(yè)面：

訪問(wèn)靜態(tài)頁(yè)面

在瀏覽器輸入訊云提供的默認(rèn)域名 https://blog-qcloud-new-131e7b.tcloudbaseapp.com/index.html， 或者使用自己的域名http://qcloud.bihe0832.com/index.html 均可打開(kāi)部署好的靜態(tài)服務(wù)，由于默認(rèn)資源免費(fèi)的，騰訊云對(duì)下載速度做了限速，因此打開(kāi)速度會(huì)很慢。

特別說(shuō)明：由于默認(rèn)資源騰訊云對(duì)下載速度做了限速，所以我對(duì)于我的站點(diǎn)做了特殊配置：

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)