聽說你想要部署 Octopress?滿足你
Octopress 是一個面向開發者的部落格系統,廣受程式設計師的喜愛。既然大家有需求,那麼 Octopress 也要安排上~
雲開發(CloudBase)是一款雲端一體化的產品方案 ,採用 serverless 架構,免環境搭建等運維事務 ,支援一雲多端,助力快速構建小程式、Web應用、移動應用。
雲開發靜態網站託管支援通過雲開發SDK調用服務端資源如:雲函數、雲存儲、雲資料庫等,從而將靜態網站擴展為全棧網站。
無論是騰訊雲·雲開發用戶,還是小程式·雲開發用戶,只要開通按量付費,即可享有雲開發靜態網站託管服務。
作者介紹
騰訊工程師——子勰,先後做過前端和終端,注重技術沉澱與分享。分享的意義在於昭顯彼此,尋找共鳴,道阻且長,行則將至。
搭建本地Octopress環境
參考官網的指引 //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 //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 //rubygems.org/...........
Fetching gem metadata from //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.
如果構建沒有報錯,你就可以選擇將構建結果 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
然後在瀏覽器打開 //localhost:4000/ 即可查看效果。
將網站託管至雲開發靜態託管
創建靜態網站託管服務
創建騰訊云云開發環境
打開騰訊云云開發 服務的頁面:
//console.cloud.tencent.com/tcb/env/index
如下圖,點擊新建環境,然後在彈框中輸入你自定義的環境名稱,選擇付費模式,然後點擊下方的「立即開通」。
之後就進入了環境的初始化階段,初始化比較久。一般需要 1 分鐘左右,當初始化結束,點擊對應的 tab 就進入了 環境總覽介面,可以看到具體的資源等資訊。
初始化靜態網站託管服務
點擊進入靜態網站託管服務的頁面:
//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 //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) //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 //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 //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頁面:
訪問靜態頁面
在瀏覽器輸入訊雲提供的默認域名 //blog-www-173dc4.tcloudbaseapp.com/即可打開部署好的靜態服務,由於默認資源免費的,騰訊雲對下載速度做了限速,因此打開速度會很慢。如果你自己使用,還是推薦你綁定自己的自定義域名~
文章鏈接://mp.weixin.qq.com/s/ZpgOl6sdNmClz5chQvQHfg
公眾號:騰訊云云開發
騰訊云云開發://cloudbase.net
雲開發控制台://cloud.tencent.com/login
☁
更多精彩
掃描二維碼了解更多
點擊在看讓更多人發現精彩