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

前幾天利用博客嘗試了下騰訊云新出的靜態(tài)網(wǎng)站托管，寫了一個總結(jié)，收到反饋問問能不能再寫一個Octopress的，結(jié)果今天就又收到域名備案站的提醒，要完善和整改一些信息，那就干脆嘗試用 Octopress 從零搭建一個簡單的站點。

使用 Octopress 搭建靜態(tài)站點

Octopress 介紹

Octopress is a blogging framework for hackers。

• 官方網(wǎng)站： http://octopress.org/

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

參考官網(wǎng)的指引 http://octopress.org/docs/setup/ 搭建 Octopress 本地環(huán)境

? 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's executable "bundler" conflicts with /usr/local/lib/ruby/gems/2.6.0/bin/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

至此我們就完成了 Octopress 環(huán)境的搭建，和站點的初始化，下一步就是修改配置，添加內(nèi)容

創(chuàng)建靜態(tài)站點、修改配置、添加內(nèi)容

這部分內(nèi)容可以參考官網(wǎng)提供的「Configuring Octopress http://octopress.org/docs/configuring/」來根據(jù)配置自定義你的站點風(fēng)格。我重點修改了 _config.yml 添加一些自定義配置。

在搭建好靜態(tài)站點以后，就可以在source/_posts添加你的文章了，我選擇了直接遷移過來兩篇自己的文章。

編譯構(gòu)建

在項目根目錄直接命令行運行 rake generate 即可查看構(gòu)建結(jié)果

? 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.

如果構(gòu)建沒有報錯，你就可以選擇將構(gòu)建結(jié)果 public 部署到你的服務(wù)器。如果想在本地查看效果，在項目根目錄直接命令行運行 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

然后在瀏覽器打開 http://localhost:4000/ 即可查看效果

將靜態(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)境名稱，選擇付費模式，然后點擊下方的「立即開通」。

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

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

點擊進入「靜態(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)，輸入命令，然后再彈出的頁面中點擊「確認授權(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ù)以改進產(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ù)（例如部署我的博客的 public ），命令行中-e 后面的環(huán)境ID就是首頁生成的環(huán)境ID，一般騰訊云會在我們的自定義名稱后面加一個后綴。由于博客的內(nèi)容比較大、加上網(wǎng)絡(luò)代理，發(fā)現(xiàn)有時候會失敗，重試即可。

? 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) ? tcb hosting:deploy ./public/ -e blog-www-173dc4

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

? www.bihe0832.com git:(master) ? tcb hosting:deploy ./public/ -e blog-www-173dc4

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

? 文件共計 65 個

? 文件上傳成功 65 個

? 文件上傳失敗 0 個

如果調(diào)試通了，也闊以一個命令直接完成編譯到部署：

? www.bihe0832.com git:(master) ? bundle exec rake generate && tcb login && tcb hosting:deploy ./public/ -e blog-www-173dc4

Configuration file: /github/www.bihe0832.com/_config.yml

Source: source

Destination: public

Generating...

done.

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

? 您已登錄，無需再次登錄！

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

? 文件共計 65 個

? 文件上傳成功 65 個

? 文件上傳失敗 0 個

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

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

訪問靜態(tài)頁面

在瀏覽器輸入訊云提供的默認域名 https://blog-www-173dc4.tcloudbaseapp.com/即可打開部署好的靜態(tài)服務(wù)，由于默認資源免費的，騰訊云對下載速度做了限速，因此打開速度會很慢。