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. img标签src="[object Moudle]"问题解决办法

    在写组件的时候,按照如下方式来写,加载不出图片: 打开开发者工具,发现img标签对应位置显示如下: 我之前已经下载过 url-loader 解决方法如下: 加入 esModules:false 即可

  2. Natas22 Writeup(header重定向、burp截取抓包)

    Natas22: 打开页面是一个空白页面,查看源码,看起来好像是需要我们在url中添加“revelio”参数即可,然而实验了之后发现浏览器跳转回了原来的页面. 再次仔细审计源码,会看到页面开头有一个重 ...

  3. ERP系统定价模型及费用组成

    很多人选择ERP系统的时候最关心的就是费用问题,因为很多中小企业资金都是比较缺乏的,如果需要使用大量的金钱来购买ERP系统这是不现实的.你知道ERP系统的定价模型有哪些吗?你知道影响ERP系统价格的因 ...

  4. 大数据软件安装之HBase(NoSQL数据库)

    一.安装部署 1.Zookeeper正常部署 (见前篇博文大数据软件安装之ZooKeeper监控 ) [test@hadoop102 zookeeper-3.4.10]$ bin/zkServer.s ...

  5. A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesenchymal Stem Cells (解读人:王欣然)

    文献名:A Systems-Level Characterization of the Differentiation of Human Embryonic Stem Cells into Mesen ...

  6. Java并发编程之CAS二源码追根溯源

    Java并发编程之CAS二源码追根溯源 在上一篇文章中,我们知道了什么是CAS以及CAS的执行流程,在本篇文章中,我们将跟着源码一步一步的查看CAS最底层实现原理. 本篇是<凯哥(凯哥Java: ...

  7. [BJDCTF 2nd]fake google

    [BJDCTF 2nd]fake google 进入页面: 试了几下发现输入xxx,一般会按的格式显示, P3's girlfirend is : xxxxx 然后猜测会不会执行代码,发现可以执行 & ...

  8. Cisco 模拟配置

    本次模拟:采用Cisco Packet Tracer 软件,进行cisco网络设备的模拟.可以实现CLI界面命令配置,同实际交换机一样. 1.同一VLAN 可以互相访问,不同VLAN 不能访问 PC0 ...

  9. vue one

    目录 复习 Vue框架 Vue的优点 Vue的使用 vue完成简单的事件 vue操作简单样式 小结 指令 文本指令 事件指令 属性指令 条件指令 复习 """ 1.BBS ...

  10. hdu1224SPFA求最长路加上打印路径

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1224/ 无负环. 代码如下: #include<bits/stdc++.h> using names ...