Linux/Ubuntu下Octopress博客搭建过程

  • by

总算搭好了这个静态博客,之前尝试了Jekyll与Jekyllbootstrap,还是不够给力,总是出现各种莫名的问题,总结下这个博客的搭建过程(Linux/Ubuntu 环境):

安装前准备

(这部分内容来自 http://gujiaxi.github.com/blog/2012/02/15/how-to-install-octopress-on-ubuntu-11-dot-04-and-deploy-on-github/)

配置前需要curl,git两个工具,安装之

sudo apt-get install curl git-core

先确保ubuntu源中的ruby,rubygem已经卸载,如果没有,使用sudo apt-get remove命令卸载之

安装RVM(Ruby Version Manager)

bash -s stable < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)

将rvm指令变成shell function

echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"'>>~/.bashrc

完毕之后重启终端,运行

type rvm | head -1

应该就能看到rvm is a function,说明安装成功

然后,在rvm下安装Ruby 1.9.2, RubyGems

rvm pkg install openssl
rvm pkg install zlib
rvm install 1.9.2
rvm use 1.9.2
rvm rubygems latest

即可

配置octopress

(这部分内容来自 http://gujiaxi.github.com/blog/2012/02/15/how-to-install-octopress-on-ubuntu-11-dot-04-and-deploy-on-github/)

下载octopress

git clone https://github.com/imathis/octopress.git octopress

这里下载到了本地文件夹octopress ,然后依次执行

cd octopress
gem install bundler
bundle install
rake install

然后就基本配置好了

添加\(LaTeX\)支持

(这部分内容来自 http://luikore.github.com/2011/09/good-things-learned-from-octopress/)

这里有个非常给力的\(LaTeX\),排出来的公式还能够继续被识别为文字,比那些通过生成png实现的公式强多了

安装插件

gem install kramdown

修改octopress目录下的_config.yml,将其中的

markdown: rdiscount

改为

markdown: kramdown

然后修改octopress/source/_includes/custom/head.html
向其中添加

<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  jax: ["input/TeX", "output/HTML-CSS"],
  tex2jax: {
    inlineMath: [ ['$', '$'] ],
    displayMath: [ ['$\$', '$\$']],
    processEscapes: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
  },
  messageStyle: "none",
  "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

但是此时右键单击公式会出现bug,解决办法是修改octopress/sass/base/_theme.scss如下所示比如

body
- > div
+ > div#main
background: $sidebar-bg
border-bottom: 1px solid $page-border-bottom
> div
background: $main-bg
border-right: 1px solid $sidebar-border

 

调整样式

最后,我觉得octopress的段距与行高太大了,
修改octopress/source/stylesheets/screen.css,
找到
p,blockquote,ul,ol{margin-bottom:0.5em}

body{line-height:1.1em;color:#222}
修改到合适的值即可

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.