最新消息:蔓草札记的微信公众号开通了,赶紧在微信通讯录公众号中搜索“蔓草札记”关注下吧 :)

打造Octopress博客在线写作平台

博客经验 xhhjin 3207浏览 2评论

前面介绍了在Github上搭建Octopress博客Octopress写作及个性设置,使得大家可以在自己的电脑上建立Octopress博客的写作环境,并发布文章到Github,大多数情况下,这是没有问题的,但如果有一天想写博客而自己的电脑又不在身边,一切就变得不那么方便了,我们还需要重新设定一切环境,虽不困难,但未免有些麻烦。这时最好能有个类似在线写作后台的东西,只要能上网,就能够写文章并发布出来。如何才能实现这个后台呢?这就涉及到另外两个项目了:Travis-CI和Prose。

Travis-CI提供免费的集成服务器,为开源社区提供持续集成服务,使用它可以使更新的文章自动部署到Github pages上去,取代在电脑上的手动部署过程。Prose是一个基于Github的内容编辑器,它支持Markdown语法并可以预览,它使得文章写作变得更加便捷。接下来本文就介绍下如何用Travis-CI和Prose给Octopress打造一个方便的在线写作平台,使得在能用浏览器上网的地方就可以写文章。

travis-ci-prose

一、用Travis-CI实现网站的自动部署

1、登录Travis-CI的网站(https://travis-ci.org/),点击右上角的“Sign in with Github”,输入自己的Github账号和密码;然后点击“Authorize application”并再次输入Github帐号密码完成对Travis-CI的授权;接着在右上角点击“Accounts”进入到Repositories界面,找到你Octopress博客对应的Repository,并点击后面的按钮变为“on”。

TravisCI-repositories

这样当你对Github上的Repository进行一些操作(比如push,pull),就会触发Travis-CI相应的Service Hook来重新生成你的网站。

2、登录Github网站(https://github.com/),点击右上角的设置按钮,在左侧选择“Applications”选项,然后再点击“Generate new token”;

github-personal-access-tokens

3、按照下图的内容填写,然后点击“Generate token”按钮为Travis-CI生成access token;

github-new-personal-access-tokens

4、复制接下来看到的这个字符串;

github-travis-ci-access-tokens

5、打开cmd窗口,进入到Octopress所在目录,依次输入以下命令(其中前三条是为了防止ruby的官方更新源被河蟹,换成国内的,第四条是安装travis,执行需要一段时间才能完成,因为我写文章时已经安装过了,所以下面的显示会不一样);

gem sources -a http://ruby.taobao.org/
gem sources -r http://rubygems.org/
gem sources –l
gem install travis

gem-install-travis

6、用travis命令加密Github token,输入如下命令(<your_token>就是你在第4步中看到的字符串),并记录下生成的secure后面的字符串:

travis encrypt GH_TOKEN=<your_token>

如果你使用上面的命令时碰到了和我一样的错误:Can’t figure out GitHub repo name. Ensure you’re in the repo directory, or specify the repo name via the -r option (e.g. travis <command> -r <repo-name>),就改成加上Repository选项的命令(<username>是你的github用户名):

travis encrypt GH_TOKEN=<your_token> –r <username>/<username>.github.com

travis-encrypt-github-token

7、添加UTF8无BOM格式编码的.travis.yml文件,内容如下,修改里面的user.name,user.email和secure,分别对应你的github用户名,邮箱和第6步生成的secure字符串:

---
branches:
  only:
  - source
language: ruby
rvm:
- 1.9.3
before_script:
- git config --global user.name "xhhjin"
- git config --global user.email "xhhjin@gmail.com"
- export REPO_URL="https://$GH_TOKEN@github.com/$GH_REPO.git"
- bundle exec rake setup_github_pages[$REPO_URL]
script:
- set LANG=zh_CN.UTF-8
- bundle exec rake generate
after_script:
- bundle exec rake deploy
env:
  global:
  - GH_REPO="xhhjin/xhhjin.github.com"
  - secure: "fdYK6//Afw4Mn8RBfjQcdWnmDxWRv+atUeO04/TSBEJFzDQs71zxCiJ20MbmCrn3jhB/AxoN7yUqKTE5yQf/93BAdumoBx+5kNeTFK1vhKm2FSfsGTDz3qsZtLXWNfh2F2VRtBm0ygJoHCtAMeyt2ugRKij8F4A/9OSJ6zY2b9w="

注:如果你在windows下不能直接新建名字为.travis.yml的文件,那么可以先建立一个叫travis.yml的文件后,然后用cmd命令“rename travis.yml .travis.yml”来改名,或则直接下载我的文件进行修改(点击下载,下一步中需要的修改后的Rakefile也在其中)。

8、自定义Rakefile文件,按照下面的说明做些修改,其中每行前的“-”表示搜索的内容,“+”表示替换的内容,也就是用“+”的内容替换掉“-”的内容:

(1)隐藏rake时Github的token:

-    puts "Added remote #{repo_url} as origin"
+    puts "Added remote as origin"

-    system "git push origin #{deploy_branch} --force"
+    system "git push origin #{deploy_branch} --force --quiet" # hide github token

(2)修改正则表达式支持Https:

-    puts "(For example, 'git@github.com:your_username/your_username.github.com)"
+    puts "(For example, 'git@github.com:your_username/your_username.github.com' or 'https://github.com/your_username/your_username.github.com')"

-    user = repo_url.match(/:([^\/]+)/)[1]
+    user = repo_url.match(/[\/:]([^\/]+)\/[^\/]+$/)[1]

(3)当commit中包含[ci skip]时,就不触发Travis-CI的自动构建:

-    message = "Site updated at #{Time.now.utc}"
+    message = "Site updated at #{Time.now.utc}\n\n[ci skip]"

-    system "git commit -m \"Octopress init\""
+    system "git commit -m \"Octopress init\n\n[ci skip]\""

9、另外,你可以在Respository的README.md文件中加入build状态图标,了解自动构建是否成功,方法是在该文件中加入下面语句;

[![Build Status](https://travis-ci.org/<YOUR_GITHUB_USERNAME>/<YOUR_PROJECT_NAME>.png)](https://travis-ci.org/<YOUR_GITHUB_USERNAME>/<YOUR_PROJECT_NAME>)

请根据实际情况替换<YOUR_GITHUB_USERNAME>和<YOUR_PROJECT_NAME>。

travis-ci-build-status

二、用Prose实现Octopress的在线编辑

相比较Travis-CI来说,Prose的使用就简单的多了,将下面语句加入到_config.yml文件中;

#prose.io settings
prose:
  rooturl: "source"
  media: "images"
  metadata:
    "source/_posts":
      - name: "layout"
        field:
          element: "hidden"
          value: "post"
      - name: "title"
        field:
          element: "text"
          value: "Title"
      - name: "comments"
        field:
          label: "Allow comments"
          element: "checkbox"
          value: true
      - name: "categories"
        field:
          element: "text"
          value: "misc"
      - name: "published"
        field:
          label: "Published"
          element: "checkbox"
          value: true

然后登录网站(http://prose.io),点击“AUTHORIZE ON GITHUB”按钮授权登录以后,选择要编辑的项目,进入到对应目录,添加或修改文件即可。

比如我们要写一篇文章,首先进入Octopress对应项目的Source分支下,点击_posts文件夹进入;

Prose-octopress-blog

然后就可以修改或新建文章了,右侧的按钮分别可以进行预览、设置和保存等操作。

Prose-write-blog

完成了Travis-CI和Prose的设置后,Octopress的在线编辑平台就可以使用了,不过这种方法并不能解决在文章中插入上传图片的问题,所以最好还是用个图床吧,除此之外,你可以尽情享受自由的随时随地的写作!

参考文章:Octopress+Prose+Github+Travis CI = coders’ blog


欢迎转载,转载请注明出处:蔓草札记 » 打造Octopress博客在线写作平台

♥ 喜欢 1 赞赏
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. Travis-CI提供免费的集成服务器,为开源社区提供持续集成服务,使用它可以使更新的文章自动部署到Github
    TT娱乐城3年前 (2014-05-20)回复
  2. 每日签到,签到时间:上午3:59:16
    破斧沉舟2年前 (2014-10-16)回复