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

2020-07-22 15:34 更新

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

Jekyll 介紹

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

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

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

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

  ?  blog git:(master) ? gem install jekyll # 安裝 Jekyll
  Fetching mercenary-0.3.6.gem  






    25 gems installed




  ?  blog git:(master) ? gem install github-pages  #安裝 Github Pages 方便預(yù)覽
  Fetching addressable-2.5.2.gem






    62 gems installed

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

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

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

├── 404.html  ：404頁面


├── CNAME  ：Github Pages的域名配置


├── LICENSE  ：開源協(xié)議


├── _config.yml  ：博客相關(guān)的配置信息


├── _includes  ：部分重用子頁面


├── _layouts  ：頁面布局


├── _posts  ：文章內(nèi)容


├── _site ：Jekyll 生成靜態(tài)頁面目錄


├── index.html  ： 博客首頁頁面格式


├── pages  ：一些特殊的靜態(tài)頁面


├── public    : 博客相關(guān)的資源，包括css、js、以及所有圖片


├── search  : 博客搜索功能相關(guān)代碼


├── sitemap.txt  ：站點地圖


└── sitemap.xml  ：站點地圖

編譯構(gòu)建

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

?  blog git:(master) ? jekyll build
Configuration file: /github/blog/_config.yml
            Source: /github/blog
       Destination: /github/blog/_site


 Incremental build: disabled. Enable with --incremental


      Generating...


                    done in 5.437 seconds.


 Auto-regeneration: disabled. Use --watch to enable.


?  blog git:(master) ?

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



?  blog git:(master) ? jekyll server


Configuration file: /github/blog/_config.yml


            Source: /github/blog


       Destination:/github/blog/_site


 Incremental build: disabled. Enable with --incremental


      Generating...


                    done in 4.1 seconds.


 Auto-regeneration: enabled for '/github/blog'


    Server address: http://127.0.0.1:4000


  Server running... press ctrl-c to stop.

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

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

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

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

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

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

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

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

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

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

?  _posts git:(master) ? npm install -g @cloudbase/cli


npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142


/usr/local/bin/tcb -> /usr/local/lib/node_modules/@cloudbase/cli/bin/tcb.js


/usr/local/bin/cloudbase -> /usr/local/lib/node_modules/@cloudbase/cli/bin/cloudbase.js


npm WARN ws@7.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.


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.


+ @cloudbase/cli@0.6.6


added 383 packages from 325 contributors in 26.045s

然后使用cloudbase命令獲取CLI授權(quán)，輸入命令，然后再彈出的頁面中點擊「確認(rèn)授權(quán)」



?  blog git:(master) ? tcb login


? 已打開云開發(fā) CLI 授權(quán)頁面，請在云開發(fā) CLI 授權(quán)頁面同意授權(quán)


? 未知錯誤：請求超時，請檢查你的網(wǎng)絡(luò)，如果終端無法直接訪問公網(wǎng)，請設(shè)置終端 HTTP 請求代理！


請檢查你的網(wǎng)絡(luò)，嘗試重新運行 cloudbase login 命令！

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

?  _posts git:(master) ? tcb login


? 已打開云開發(fā) CLI 授權(quán)頁面，請在云開發(fā) CLI 授權(quán)頁面同意授權(quán)


? 登錄成功！


? 是否同意 Cloudbase CLI 收集您的使用數(shù)據(jù)以改進(jìn)產(chǎn)品？ Yes


可使用下面命令繼續(xù)操作：




– 創(chuàng)建免費環(huán)境




  $ cloudbase env:create envName




– 初始化云開發(fā)項目




  $ cloudbase init




– 部署云函數(shù)




  $ cloudbase functions:deploy




– 查看命令使用介紹




  $ cloudbase -h




Tips：可以使用簡寫命令 tcb 代替 cloudbase

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



?  blog git:(master) ? jekyll build


Configuration file: /Volumes/Document/Documents/github/blog/_config.yml


            Source: /Volumes/Document/Documents/github/blog


       Destination: /Volumes/Document/Documents/github/blog/_site


 Incremental build: disabled. Enable with --incremental


      Generating...


                    done in 4.504 seconds.


 Auto-regeneration: disabled. Use --watch to enable.


?  _site git:(master) ? cd ..


?  blog git:(master) ? cd _site


?  _site git:(master) ? tcb hosting:deploy ./ -e blog-qcloud-new-131e7b


FetchError: request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639


    at ClientRequest.<anonymous> (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/node-fetch/lib/index.js:1455:11)


    at ClientRequest.emit (events.js:205:15)


    at ClientRequest.EventEmitter.emit (domain.js:471:20)


    at onerror (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:101:9)


    at callbackError (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:123:5)


    at processTicksAndRejections (internal/process/task_queues.js:89:5)


? request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639


?  _site git:(master) ? tcb hosting:deploy ./ -e blog-qcloud-new-131e7b


文件傳輸中 [==================================================] 100% 0.0s


? 文件共計 842 個


? 文件上傳成功 842 個


? 文件上傳失敗 0 個

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

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

訪問靜態(tài)頁面

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

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

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號