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.

如果构建没有报错,你就可以选择将构建结果 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

然后在浏览器打开 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 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授权,输入命令,然后在弹出的页面中点击「确认授权」:

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



更多精彩

扫描二维码了解更多

  点击在看让更多人发现精彩

听说你想要部署 Octopress?满足你的更多相关文章

  1. 在github Pages上部署octopress搭建个人博客系统

    原文链接:http://caiqinghua.github.io/blog/2013/08/26/deploy-octopress-to-github-pages/ 引子 上一篇博客已经说了为什么要搭 ...

  2. 听说你想在 WordPress 网站上嵌入 PPT ?

    年底了,想在 WordPress 博客上展示自己的春节旅行计划,尝试在文章中插入一个旅行计划 PPT 结果长这个样子 你有没有遇到同样的情况,懊恼网页支持展示的内容无法满足我们的需求: 想展示年度家庭 ...

  3. 听说你想把对象存储当 HDFS 用,我们这里有个方案...

    传统的大数据集群往往采用本地中心化的计算和存储集群.比如在谷歌早期的[三驾马车]中,使用 GFS 进行海量网页数据存储,用 BigTable 作为数据库并为上层提供各种数据发现的能力,同时用 MapR ...

  4. 使用tomcat manager 管理和部署项目

    在部署tomcat项目的时候,除了把war文件直接拷贝到tomcat的webapp目录下,还有一种方法可以浏览器中管理和部署项目,那就是使用tomcat manager. 默认情况下,tomcat m ...

  5. weblogic 12c web部署注意的问题

    废话不多说下面讲介绍他的具体部署web应用,应该注意哪些问题. 准备工作: Java JDK 安装及环境配置 http://jingyan.baidu.com/article/ff41162596a7 ...

  6. tomcat远程部署应用

    Tomcat安装成功后,在ip地址:8080上就可以看见熟悉的首页,在这个首页中,上方有一个manage app按钮,点击就可以进行应用管理了.这样就不需要使用ftp把war包传上去了. 要想远程部署 ...

  7. Go-Agent部署与FQ教程(2016-10-28)

    这篇文章是为了帮助使用go-agent-crack来FQ的同学,主要是几个想用该项目来FQ的同学对github主页的FQ文档大力吐槽,索性写一篇详细的文档来支持一下大家,其中包含了google gae ...

  8. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

  9. 使用Maven自动部署Java Web应用到Tomcat服务器

    学习如何使用Maven,我推荐一本工具书,<maven the definitive guide>.在这本工具书手中,详细介绍了maven的使用思想,并且提供了从基本到复杂的具体项目应用. ...

随机推荐

  1. XiaoQi.Study项目(二)

    一.EF Core 使用的补充 1) 创建 接口 IEFCoreService 2)   实现 接口 EFCoreService 3) 在Startup.cs 中注册 ef 服务 并在控制器中注入使用 ...

  2. Java8函数式编程以及Lambda表达式

    第一章 认识Java8以及函数式编程 尽管距离Java8发布已经过去7.8年的时间,但时至今日仍然有许多公司.项目停留在Java7甚至更早的版本.即使已经开始使用Java8的项目,大多数程序员也仍然采 ...

  3. Jenkinsfile里定义对象和函数,获取git提交人, 发送钉钉通知

    自从开始使用Jenkinsfile作为Jenkins配置后就一发不可收,因为开发者自定义CI脚本实在太方便了. 比如,最近开发的以一个项目涉及多人,提交冲突挺多的,有的人自己没编译通过就提交了,导致后 ...

  4. effective-java学习笔记---优先使用泛型方法30

    泛型类型比需要在客户端代码中强制转换的类型更安全,更易于使用. 当你设计新的类型时,确保它们可以在没有这种强制转换的情况下使用. 这通常意味着使类型泛型化. 如果你有任何现有的类型,应该是泛型的但实际 ...

  5. [React]Context机制

    在React中,Context机制是为了方便在组件树间传递数据. 例子 import React from 'react' const themes={ light:"亮色主题", ...

  6. js的预编译

    JavaScript不会完全按照代码的顺序执行,在执行之前会对定义的函数和变量先来一边所谓的预编译处理. 先来说下对变量的预处理: console.log(a) //undefined var a = ...

  7. NSArray、NSDictionary

    一.NSDictionary 1.1 使用自定义对象 key Dictionaries manage pairs of keys and values. A key-value pair within ...

  8. Python用户终端输入

    #用户输入,操作 print("python 用户输入操作") # input(提示字符串),函数阻塞程序,并提醒用户输入字符串 instr = input("pleas ...

  9. Javascript/Jquery实现日期前一天后一天

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  10. docker安装Elasticsearch7.6集群并设置密码

    docker安装Elasticsearch7.6集群并设置密码 Elasticsearch从6.8开始, 允许免费用户使用X-Pack的安全功能, 以前安装es都是裸奔.接下来记录配置安全认证的方法. ...