Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jcouyang/9913388 to your computer and use it in GitHub Desktop.
Save jcouyang/9913388 to your computer and use it in GitHub Desktop.
How to Write Post Using Octopress Travis CI and Org Mode

getting started

Github page 上建博客本来就是很geek的事情, 用octopress来建博客可用说是 for ruby geeks, 因为可以用欢乐的rake <task> 来完成建立文章和发布等一系 列task. 当然他依赖于 Jekyll

如果wordpress的发布过程是这样的:

  • 打开wordpress
  • 点下new post
  • 在textarea中输入内容

这样好像非常简单, 这种wysiwyg的编辑器完全不需要学习曲线, 当然效率也不 会有神马曲线. 比如一个简单的 加粗 操 作, 需要选中需要加粗的字, 点一下=B=. 这对一个程序员来说是有多么痛苦啊.

好吧,如果你说 wordpress 也有快捷键, 那么bia代码和插入图片肿么办. 各种插件随之而来, 但是个人并没有发现更wsgiwyg编辑器任何高效的地方. 一个高效的码农不希望任何一只手离开键盘. 好吧, 这时候 GitHub Flavored MarkdownGitHub Pages 冲出来解放码农的鼠标手. 当然, Github Pages 的原意是让程序员为自己的repository建立一个静态网页.

于是乎, 有了octopress, 简而言之,就是用 git 和你最喜欢的编辑器写博客. 当然,就算你喜欢用wordpress, 同样可以用 prose.io + travis ci 实现auto deploy octopress with travis ci {fn:1} {fn:2}.

安装 octopress

just do the following in your shell.

$ \curl -L https://get.rvm.io | bash # install ruby version manager
rvm install 1.9.3 # octopress need 1.9.3
rvm user 1.9.3 --default # use it as default

git clone git://github.com/imathis/octopress.git octopress
cd octopress    # If you use RVM, You'll be asked if you trust the .rvmrc file (say yes).
ruby --version #should be 1.9.3
rake install # install default Octopress theme  

Setup Github Pages

  • new 一个名叫 username.github.io 的 repository, 所有push 到 master

的代码即是静态网页. // 这是user page, 如果是项目page, 需要push到 gh-pages branch.

  • Done // yeah~ that’s it

Setup Octopress

rake setup_github_pages
rake generate # This will generate your blog, copy the generated files into _deploy
rake deploy # push to your github pages
echo 'your-domain.com' >> source/CNAME  

Use Octopress

Inline code

this is inline code

The Greatest Code Blocks

[language] [title] [url] [link text] code snippet

ruby Discover if a number is prime http://www.noulakaz.net/weblog/2007/03/18/a-regular-expression-to-check-for-prime-numbers/ Source Article
class Fixnum
  def prime?
    ('1' * self) !~ /^1?$|^(11+?)\1+$/
  end
end

will render as

Discover if a number is prime http://www.noulakaz.net/weblog/2007/03/18/a-regular-expression-to-check-for-prime-numbers/ Source Article
class Fixnum
  def prime?
    ('1' * self) !~ /^1?$|^(11+?)\1+$/
  end
end

gist gist_id filename

like

gist 996818

will be rander as

{% gist 996818 %}

3rd party plugin

default_asides: [asides/recent_posts.html, asides/github.html,
asides/twitter.html, asides/delicious.html, asides/pinboard.html,
asides/googleplus.html, asides/weibo.html]

Put Octopress Folder into Dropbox

当然要扔到dropbox上, 喂小米, 因为这样我们可以用手机写博客. 好吧, 前提 是你的手机要有个好用的markdown编辑器.

auto deploy octopress with travis ci [fn:1] [fn:2]

用dropbox绝对不是让你 blog on the go 的最好方式, 因为你还需要打开电脑 deploy 一下. 那么最给力的做法是使用 travis ci 自动的 rake deploy 你的 文章. 再加上 prose.io, 简直就是wordpress, 你不需要任何push, 只要在 prose.io 上编辑完成后点下 publish 即可. travis会自动给你发布hoho. 这样 就可以随时随地发了hoho.

  • get github OAtuh token
curl -u 'your_github_name' -d '{"scopes":["public_repo"], "note":"Travis access"}' https://api.github.com/authorizations
  • encypte your token
gem install travis
travis encrypt GH_TOKEN=your_token --add # do this in your octopress dir
  • setup in .travis.yml
---
language: ruby
branches:
  only:
  - source
rvm:
- 1.9.3
before_script:
- git config --global user.name "Jichao Ouyang"
- git config --global user.email "oyanglulu@gmail.com"
- export REPO_URL="https://$GH_TOKEN@github.com/$GH_REPO.git"
- rake setup_github_pages[$REPO_URL]
script:
- rake generate
after_script:
- rake deploy
env:
  global:
  - GH_REPO="geogeo.github.com"
  - secure: ! 'UcwYke5vbuDVxFf8smJ2h8UkaVAdutc4hJ7WD06KKJlxQdGuF3rrG5rActpx

    5Np/gu1Nui3jnZv6jBnd9vJjKvwhPbpXBymlpoxo0tswhiAFAg5Tu8Zo50dF

    nB//OpMAD8Yp30cUwZ7V7x46tikWAweZYpPGTRgfS5lU3ebA1js='

rakefile中需要做如下更改

diff --git a/Rakefile b/Rakefile
index a57a56f..59b758a 100755
--- a/Rakefile
+++ b/Rakefile
@@ -9,10 +9,10 @@ ssh_port       = "22"
 document_root  = "~/website.com/"
 rsync_delete   = false
 rsync_args     = ""  # Any extra arguments to pass to rsync
-deploy_default = "rsync"
+deploy_default = "push"

 # This will be configured for you when you run config_deploy
-deploy_branch  = "gh-pages"
+deploy_branch  = "master"

 ## -- Misc Configs -- ##

@@ -255,10 +255,10 @@ multitask :push do
     system "git add ."
     system "git add -u"
     puts "\n## Commiting: Site updated at #{Time.now.utc}"
-    message = "Site updated at #{Time.now.utc}"
+    message = "Site updated at #{Time.now.utc} [ci skip]"
     system "git commit -m \"#{message}\""
     puts "\n## Pushing generated #{deploy_dir} website"
-    system "git push origin #{deploy_branch} --force"
+    system "git push origin #{deploy_branch} --force --quiet"
     puts "\n## Github Pages deploy complete"
   end
 end
@@ -307,7 +307,7 @@ task :setup_github_pages, :repo do |t, args|
     puts "(For example, 'git@github.com:your_username/your_username.github.io)"
     repo_url = get_stdin("Repository url: ")
   end
-  user = repo_url.match(/:([^\/]+)/)[1]
+  user = repo_url.match(/[\/:]([^\/]+)\/[^\/]+$/)[1]
   branch = (repo_url.match(/\/[\w-]+\.github\.(?:io|com)/).nil?) ? 'gh-pages' : 'master'
   project = (branch == 'gh-pages') ? repo_url.match(/\/([^\.]+)/)[1] : ''
   unless (`git remote -v` =~ /origin.+?octopress(?:\.git)?/).nil?
@@ -317,7 +317,7 @@ task :setup_github_pages, :repo do |t, args|
       # If this is a user/organization pages repository, add the correct origin remote
       # and checkout the source branch for committing changes to the blog source.
       system "git remote add origin #{repo_url}"
-      puts "Added remote #{repo_url} as origin"
+      puts "Added remote origin"
       system "git config branch.master.remote origin"
       puts "Set origin as default remote"
       system "git branch -m master source"
@@ -341,7 +341,7 @@ task :setup_github_pages, :repo do |t, args|
     system "git init"
     system "echo 'My Octopress Page is coming soon &hellip;' > index.html"
     system "git add ."
-    system "git commit -m \"Octopress init\""
+    system "git commit -m \"Octopress init[ci skip]\""
     system "git branch -m gh-pages" unless branch == 'master'
     system "git remote add origin #{repo_url}"
     rakefile = IO.read(__FILE__)
@@ -351,7 +351,7 @@ task :setup_github_pages, :repo do |t, args|
       f.write rakefile
     end
   end
-  puts "\n---\n## Now you can deploy to #{url} with `rake deploy` ##"
+  puts "\n---\n## Now you can deploy to `rake deploy` ##"
 end

config文件中如下更改, 最后一行

diff --git a/_config.yml b/_config.yml
old mode 100755
new mode 100644
index 1397f8d..91db12e
--- a/_config.yml
+++ b/_config.yml
@@ -2,12 +2,12 @@
 #      Main Configs       #
 # ----------------------- #

-url: http://yoursite.com
-title: My Octopress Blog
-subtitle: A blogging framework for hackers.
-author: Your Name
+url: http://oyanglul.us
+title: Jichao Ouyang's Journal
+subtitle: Code or Else.
+author: Jichao Ouyang
 simple_search: http://google.com/search
-description:
+description: Jichao Ouyang's Journal/Blog/Whatever

 # Default date format is "ordinal" (resulting in "July 22nd 2007")
 # You can customize the format as defined in
@@ -36,7 +36,7 @@ category_dir: blog/categories
 markdown: rdiscount
 pygments: false # default python pygments have been replaced by pygments.rb

-paginate: 10          # Posts per page on the blog index
+paginate: 12          # Posts per page on the blog index
 pagination_dir: blog  # Directory base for pagination URLs eg. /blog/page/2/
 recent_posts: 5       # Posts in the sidebar Recent Posts section
 excerpt_link: "Read on &rarr;"  # "Continue reading" link text at the bottom of excerpted
 @@ -45,7 +45,7 @@ titlecase: true       # Converts page and post titles to titlecase
  # To add custom asides, create files in /source/_includes/custom/asides/ and add them to t
-default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asid
+default_asides: [asides/recent_posts.html, asides/github.html, asides/twitter.html, asides

 # Each layout uses the default asides, but they can have their own asides instead. Simply
 # and add an array with the asides you want to use.
@@ -58,26 +58,38 @@ default_asides: [asides/recent_posts.html, asides/github.html, asides/d
 # ----------------------- #

Use Org-mode instead of Markdown

当然我并不是说markdown有什么不好的, 完全可以搞定博客的各种格式. 但是作 为emacs用户, 没有神马是org不能搞定的文档工作. 好吧, 不是emacs重度用户 请跳过该节.

其实思路非常简单

  • 更改 rake new_post 使其建立一个org后缀的文件,而不是markdown后缀
  • 更改 rake file 和文章的header
posts_dir   = "_org_posts"
new_post_ext    = "org"  # default new post file extension when using the new_post task
new_page_ext    = "org"  # default new page file extension when using the new_page task
@@ -21,10 +21,11 @@ source_dir      = "source"    # source file directory
 blog_index_dir  = 'source'    # directory for your blog's index page (if you put your index in source/blog/
 deploy_dir      = "_deploy"   # deploy directory (for Github pages deployment)
 stash_dir       = "_stash"    # directory to stash posts for
+posts_dir   = "_org_posts"
 themes_dir      = ".themes"   # directory for blog files
-new_post_ext    = "markdown"  # default new post file extension when using the new_post task
-new_page_ext    = "markdown"  # default new page file extension when using the new_page task
+new_post_ext    = "org"  # default new post file extension when using the new_post task
+new_page_ext    = "org"  # default new page file extension when using the new_page task
 server_port     = "4000"      # port for preview server eg. localhost:4000

@@ -105,6 +106,7 @@ task :new_post, :title do |t, args|
   end
   puts "Creating new post: #{filename}"
   open(filename, 'w') do |post|
+    post.puts "#+BEGIN_HTML"
     post.puts "---"
     post.puts "layout: post"
     post.puts "title: \"#{title.gsub(/&/,'&amp;')}\""
@@ -112,6 +114,8 @@ task :new_post, :title do |t, args|
     post.puts "comments: true"
     post.puts "categories: "
     post.puts "---"
+    post.puts "#+END_HTML"
+    post.puts "#+OPTIONS: toc:nil"
   end
 end
  • hook publish html to octopress folder
(setq org-publish-project-alist
   '(("blog" .  (:base-directory "~/Dropbox/octopress/source/_org_posts/"
                 :base-extension "org"
                 :publishing-directory "~/Dropbox/octopress/source/_posts/"
                 :sub-superscript ""
                 :recursive t
                 :publishing-function org-html-publish-to-html
                 :headline-levels 4
                 :html-extension "markdown"
                 :body-only t))))

为什么要导出 html 到 markdown 的目录呢, 这样有毛好处呢, 为毛不直接转成 markdown. 因为转成markdown后jykll再转成html就会成屎了. 好吧, 直接转成 html格式不会乱.

因此, 前面所说的有些标签就得变成org-mode格式的. 例如 code block 就需要用 #+BEGIN_SRC 来包住而不是 ```, 快捷键 <s TAB

为什么要用org-mode

  • org-babel mode 可以让你在 org 中嵌入各种语言的代码
  • 更多快捷键
  • 比markdown更丰富
  • for emacser

Footnotes

[fn:1] http://www.harimenon.com/blog/2013/01/27/auto-deploying-to-my-octopress-blog/

[fn:2] http://rogerz.github.io/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment