mac电脑上搭建octopress博客
搭建octopress博客的文章很详细已经有很多了,文章末尾就有相关的参考,我这里只简单记录下mac电脑上搭建octopress博客的步骤。
1、搭建环境
git clone git://github.com/imathis/octopress.git octopress
cd octopress
gem install bundler
bundle install
遇到的问题:
gem install bundler
失败了,需要更改一下octopress/Gemfile
文件当中的源,将第一行source "https://rubygems.org"
更改成source "http://ruby.taobao.org/"
就行了。如果安装的时候报
“You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory”
这样的错误,请加上sudo权限。
之后,输入下面命令:
rake install
2、将博客部署到github上
在github上创建一个username.github.io
的仓库,然后输入下面命令
rake setup_github_pages
回车,之后出现下面内容
Enter the read/write url for your repository
(For example, '[email protected]:your_username/your_username.github.io.git)
or 'https://github.com/your_username/your_username.github.io')
Repository url:
粘贴username.github.io
仓库对应的url,例如我的就是https://github.com/liuchungui/liuchungui.github.io.git
3、生成并编辑博客
首先,使用下面命令生成新文章,其中title就是博文名,你也可以输入rake new_post
回车,然后在再输入博文名。文章在source/_post/
目录下,文件名构成为时间和标题的拼音
。可以进入到octopress/source/_posts
目录,找到对应的博文进行修改。博文采用的markdown语法,我推荐一款不错的编辑工具Mou,它可以实时编辑实时查看。
rake new_post['title']
然后,使用下面命令生成并在本地进行预览。rake preview
开启一个web服务,此时就可以预览了,使用localhost:4000
打开看查看效果。
rake generate
rake preview
之后,查看效果没有问题,则使用下面命令上传到github。这条命令会将octopress/public
下的文件上传到你的仓库master分支下。
rake deploy
最后,将源代码上传到github仓库的source分支下,如下所示:
git add .
git commit -m 'add source file'
git push origin source
4、删除twitter、google相关东西:
- 修改文件
octopress/_config.yml
文件,设置title、subtitle、author,注意最好把里面的 twitter 相关的信息全部删掉,否则由于 GFW 的原因,将会造成页面 load 很慢。 - 修改头部模块 source/_includes/head.html 将
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
替换成http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js
,否则会很慢。 - 修改定制文件 source/_includes/custom/head.html 把 google 的自定义字体去掉,原因同上。
5、自定义博客
新标签打开网站中第三方链接默认是从当前界面打开,这导致网站浏览者跳转到第三方链接后很难回来。将以下代码加入 source/_includes/custom/head.html
文件中,我们是新建一个界面打开,仍然保持当前网页。
<script type="text/javascript">
function addBlankTargetForLinks () {
$('a[href^="http"]').each(function(){
$(this).attr('target', '_blank');
});
}
$(document).bind('DOMNodeInserted', function(event) {
addBlankTargetForLinks();
});
</script>
其它,界面、侧边栏、底部栏、添加top回到顶部等,请参考自定义你的Octopress博客
注意:当自定义了博客时,修改了头、侧边栏、底部栏、添加评论等配置文件后,使用rake generate生成一下。
参考
添加评论和分享系统,请参考象写程序一样写博客:搭建基于github的博客