打造Octopress博客在线写作平台

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

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

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

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

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

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

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

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

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

gem sources -a http://ruby.taobao.org/
gem sources -r http://rubygems.org/
gem sources –l
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

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>。

二、用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文件夹进入；

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

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

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

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