天天看點
傳回

聽說你想要部署 Octopress？滿足你

部署octopress部落格的教程來了！

Octopress 是一個面向開發者的部落格系統，廣受程式員的喜愛。既然大家有需求，那麼 Octopress 也要安排上~

雲開發（CloudBase）是一款雲端一體化的産品方案 ，采用 serverless 架構，免環境搭建等運維事務 ，支援一雲多端，助力快速建構小程式、Web應用、移動應用。

雲開發靜态網站托管支援通過雲開發SDK調用服務端資源如：雲函數、雲存儲、雲資料庫等，進而将靜态網站擴充為全棧網站。

無論是騰訊雲·雲開發使用者，還是小程式·雲開發使用者，隻要開通按量付費，即可享有雲開發靜态網站托管服務。

作者介紹

騰訊工程師——子勰，先後做過前端和終端，注重技術沉澱與分享。分享的意義在于昭顯彼此，尋找共鳴，道阻且長，行則将至。

搭建本地Octopress環境

參考官網的指引 http://octopress.org/docs/setup/ 搭建 Octopress 本地環境：

github  git clone git://github.com/imathis/octopress.git www.bihe0832.com
        Cloning into 'www.bihe0832.com'...
        ^C
github
github  git clone https://github.com/imathis/octopress.git www.bihe0832.com
       Cloning into 'www.bihe0832.com'...
       remote: Enumerating objects: 1, done.
       remote: Counting objects: 100% (1/1), done.
       remote: Total 10801 (delta 0), reused 0 (delta 0), pack-reused 10800
       Receiving objects: 100% (10801/10801), 2.63 MiB | 1.08 MiB/s, done.
       Resolving deltas: 100% (5578/5578), done.
github  cd www.bihe0832.com
       www.bihe0832.com git:(master) gem install bundler
       Fetching bundler-2.1.4.gem
       bundler's executable "bundle" conflicts with /usr/local/lib/ruby/gems/2.6.0/bin/bundle
       Overwrite the executable? [yN]  y
       bundler'
       Overwrite the executable? [yN]  y
       Successfully installed bundler-2.1.4
       Parsing documentation for bundler-2.1.4
       Installing ri documentation for bundler-2.1.4
       Done installing documentation for bundler after 2 seconds
       1 gem installed
       www.bihe0832.com git:(master) rbenv rehash
       zsh: command not found: rbenv
       www.bihe0832.com git:(master) brew install rbenv
       Updating Homebrew...
       ==> Auto-updated Homebrew!
       Updated 1 tap (homebrew/core).
       ==> Updated Formulae
       stellar-core
           
...........
          
   ==> ruby-build
   ruby-build installs a non-Homebrew OpenSSL for each Ruby version installed and these are never upgraded.
   
   www.bihe0832.com git:(master) rbenv rehash ➜  www.bihe0832.com git:(master) bundle install
   Fetching gem metadata from https://rubygems.org/...........
   Fetching gem metadata from https://rubygems.org/.
   Resolving dependencies...
          
   ...........
 
   Bundle complete! 13 Gemfile dependencies, 52 gems now installed.
   Use `bundle info [gemname]` to see where a bundled gem is installed.
          
   www.bihe0832.com git:(master) bundle exec
       bundler: exec needs a command to run
   www.bihe0832.com git:(master) bundle exec rake install
        ## Copying classic theme into ./source and ./sass
       mkdir -p source
       cp -r .themes/classic/source/. source
       mkdir -p sass
       cp -r .themes/classic/sass/. sass
       mkdir -p source/_posts
       mkdir -p public
   www.bihe0832.com git:(master) ✗

至此我們就完成了 Octopress 環境的搭建，和站點的初始化，下一步就是修改配置，添加内容。

建立靜态站點、修改配置、添加内容

這部分内容可以參考官網提供的「Configuring Octopress 」來根據配置自定義你的站點風格。我重點修改了 _config.yml 添加一些自定義配置。

在搭建好靜态站點以後，就可以在 source/_posts 添加你的文章了，我選擇了直接遷移過來兩篇自己的文章。

的跨端小程式應用，有豐富的雲開發實踐經驗，同時也負責部分中台系統的開發，對Vue.js在建構Web背景系統上有較多的實踐經驗。

編譯建構

在項目根目錄直接指令行運作 rake generate 即可檢視建構結果：

如果建構沒有報錯，你就可以選擇将建構結果 public 部署到你的伺服器。如果想在本地檢視效果，在項目根目錄直接指令行運作 rake preview 即可。

www.bihe0832.com git:(master) ✗ bundle exec rake preview
      Starting to watch source with Jekyll and Compass. Starting Rack on port 4000
      [2020-04-13 16:30:18] INFO  WEBrick 1.4.2
      [2020-04-13 16:30:18] INFO  ruby 2.6.2 (2019-03-13) [x86_64-darwin18]
      [2020-04-13 16:30:18] INFO  WEBrick::HTTPServer#start: pid=75677 port=4000
      >>> Compass is watching for changes. Press Ctrl-C to Stop.
      Configuration file: /github/www.bihe0832.com/_config.yml
      Source: source
      Destination: public
      Generating...
      done.
Auto-regeneration: enabled for 'source'
      write public/stylesheets/screen.css
      ::1 - - [13/Apr/2020:16:30:22 +0800] "GET / HTTP/1.1" 200 16703 0.0151
           
www.bihe0832.com git:(master) ✗ rake generate
rake aborted!
Gem::LoadError: You have already activated rake 12.3.2, but your Gemfile requires rake 10.5.0. Prepending `bundle exec` to your command may solve this.
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:312:in `check_for_activated_spec!'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:31:in `block in setup'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/spec_set.rb:147:in `each'

/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/spec_set.rb:147:in `each'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:26:in `map'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:26:in `setup'/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler.rb:149:in `setup'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/setup.rb:10:in `block in <top (required)>'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/ui/shell.rb:136:in `with_level'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/ui/shell.rb:88:in `silence'
/usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/setup.rb:10:in `<top (required)>'
/github/www.bihe0832.com/Rakefile:2:in `<top (required)>'
(See full trace by running task with --trace)
 www.bihe0832.com git:(master) ✗ bundle exec rake generate
     ## Generating Site with Jekyll
     write source/stylesheets/screen.css
     Configuration file: /github/www.bihe0832.com/_config.yml
          Source: source
          Destination: public
          Generating...
          done.
Auto-regeneration: disabled. Use --watch to enable.
           
www.bihe0832.com git:(master) ✗ bundle exec rake preview
      Starting to watch source with Jekyll and Compass. Starting Rack on port 4000
      [2020-04-13 16:30:18] INFO  WEBrick 1.4.2
      [2020-04-13 16:30:18] INFO  ruby 2.6.2 (2019-03-13) [x86_64-darwin18]
      [2020-04-13 16:30:18] INFO  WEBrick::HTTPServer#start: pid=75677 port=4000
      >>> Compass is watching for changes. Press Ctrl-C to Stop.
      Configuration file: /github/www.bihe0832.com/_config.yml
      Source: source
      Destination: public
      Generating...
      done.
Auto-regeneration: enabled for 'source'
      write public/stylesheets/screen.css
      ::1 - - [13/Apr/2020:16:30:22 +0800] "GET / HTTP/1.1" 200 16703 0.0151

然後在浏覽器打開 http://localhost:4000/ 即可檢視效果。

将網站托管至雲開發靜态托管

建立靜态網站托管服務

建立騰訊雲雲開發環境

打開騰訊雲雲開發 服務的頁面：

https://console.cloud.tencent.com/tcb/env/index

如下圖，點選建立環境，然後在彈框中輸入你自定義的環境名稱，選擇付費模式，然後點選下方的「立即開通」。

之後就進入了環境的初始化階段，初始化比較久。一般需要 1 分鐘左右，當初始化結束，點選對應的 tab 就進入了 環境總覽界面，可以看到具體的資源等資訊。

初始化靜态網站托管服務

點選進入靜态網站托管服務的頁面：

https://console.cloud.tencent.com/tcb/hosting

如下圖，選擇之前建立的開發環境，然後點選「開始使用」初始化環境。靜态網站初始化一般需要約 3 分鐘。

将靜态頁面部署到托管服務

你可以直接選擇将建構好的靜态頁面上傳到托管服務，但是考慮到部落格的更新頻率，還是選擇使用官方提供的工具來上傳。首先使用 npm 下載下傳并安裝官方上傳工具 cloudbase：

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

npm WARN deprecated [email protected]: 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 [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
    npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
   
    + @cloudbase/[email protected]
    added 383 packages from 325 contributors in 26.045s

然後使用cloudbase指令擷取CLI授權，輸入指令，然後在彈出的頁面中點選「确認授權」：

blog git:(master) ✗ tcb login
        ✔ 已打開雲開發 CLI 授權頁面，請在雲開發 CLI 授權頁面同意授權
        ✖ 未知錯誤：請求逾時，請檢查你的網絡，如果終端無法直接通路公網，請設定終端 HTTP 請求代理！
        請檢查你的網絡，嘗試重新運作 cloudbase login 指令！
如果遇到上面的錯誤，一般是因為網絡限制，需要添加 http 代理，可以參照文章 「iMac（OS X）日常開發中各種代理設定方法彙總（shell、Android Studio、gem、npm） https://blog.bihe0832.com/proxy.html」設定 shell 代理即可。設定代理後重試：
 _posts git:(master) ✗ tcb login
✔ 已打開雲開發 CLI 授權頁面，請在雲開發 CLI 授權頁面同意授權✔ 登入成功！? 是否同意 Cloudbase CLI 收集您的使用資料以改進産品？Yes可使用下面指令繼續操作：– 建立免費環境

  $ cloudbase env:create envName

– 初始化雲開發項目

  $ cloudbase init

– 部署雲函數

  $ cloudbase functions:deploy

– 檢視指令使用介紹

  $ cloudbase -h

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

使用 hosting 指令 将本地已經編譯的靜态檔案部署到托管服務（例如部署我的部落格的 public ），指令行中-e 後面的環境ID就是首頁生成的環境ID，一般騰訊雲會在我們的自定義名稱後面加一個字尾。由于部落格的内容比較大、加上網絡代理，發現有時候會失敗，重試即可。

www.bihe0832.com git:(master) ✗ bundle exec rake generate

Generating Site with Jekyll

  write source/stylesheets/screen.css  

Configuration file: /github/www.bihe0832.com/_config.yml
              Source: source
         Destination: publicGenerating...done.Auto-regeneration: disabled. Use --watch to enable.➜  www.bihe0832.com git:(master) ✗ tcb hosting:deploy ./public/ -e blog-www-173dc4FetchError: 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➜  www.bihe0832.com git:(master) ✗ tcb hosting:deploy ./public/ -e blog-www-173dc4檔案傳輸中 [==================================================] 100% 0.0s✔ 檔案共計 65 個✔ 檔案上傳成功 65 個✖ 檔案上傳失敗 0 個

如果調試通了，也闊以一個指令直接完成編譯到部署：

www.bihe0832.com git:(master) ✗ bundle exec rake generate && tcb login && tcb hosting:deploy ./public/ -e blog-www-173dc4Configuration file: /github/www.bihe0832.com/_config.yml
                    Source: source
               Destination: publicGenerating...done.Auto-regeneration: disabled. Use --watch to enable.✔ 您已登入，無需再次登入！檔案傳輸中 [==================================================] 100% 0.0s✔ 檔案共計 65 個✔ 檔案上傳成功 65 個✖ 檔案上傳失敗 0 個

管理靜态頁面及修改設定

上傳結束以後，在靜态頁面托管的「檔案管理」頁面可以對我們上傳的内容進行調整，在「設定」頁面可以添加域名、錯誤頁面等資訊，同時也給出了騰訊雲提供的預設域名。

如果你有自己的域名，你也可以添加自己的域名解析，例如下面我修改為使用我自己的域名，并設定了自定義的索引頁和404頁面：

通路靜态頁面

在浏覽器輸入訊雲提供的預設域名 https://blog-www-173dc4.tcloudbaseapp.com/即可打開部署好的靜态服務，由于預設資源免費的，騰訊雲對下載下傳速度做了限速，是以打開速度會很慢。如果你自己使用，還是推薦你綁定自己的自定義域名~

文章連結：https://mp.weixin.qq.com/s/ZpgOl6sdNmClz5chQvQHfg

公衆号：騰訊雲雲開發

騰訊雲雲開發：https://cloudbase.net

雲開發控制台：https://cloud.tencent.com/login

☁

更多精彩

掃描二維碼了解更多

點選在看讓更多人發現精彩
雲開發 騰訊雲 部落格部署 serverless
上一篇: 習慣用 Docsify 做文檔？沒問題！滿足你
下一篇: 算法基礎：遞歸算法

繼續閱讀