Project RC

一种标准阿西的设计与实现。

用 Octopress 在 GitHub 上搭建博客

创建于 更新于
分类:Misc
标签:OctopressBlog

1. Octopress 是什么

Octopress 官网给出的引言如下:

First, I want to stress that Octopress is a blogging framework for hackers. You should be comfortable running shell commands and familiar with the basics of Git. If that sounds daunting, Octopress probably isn't for you.

意思是:首先,我想强调一下,Octopress 是为黑客而生的博客框架。你需要熟悉如何运行 shell 命令以及 Git 的一些基础知识。如果这些前提技能你听到就头疼,那么 Octopress 可能并不适合你。

其实,这个引言绝对有点夸张了,那么我的理解是,你只需要有一个经得起折腾的心脏和大脑,知道怎么在网上搜索,那么用 Octopress 就没什么问题。即使你没有它说的那些基础,只要照着步骤做就可以完成,甚至通过搭建博客这个过程,你会收获「熟悉如何运行 shell 命令以及 Git 的一些基础知识」这样一个结果,只要你肯动脑。

本教程适用于 Windows 和 OS X 系统。

2. 安装依赖程序(Windows)

使用 Windows 平台的话,需要安装的依赖程序较多。

首先把下面 4 个全下载好:

注:如果这些链接失效你可以自行谷歌,很容易找到下载。

安装 Git

双击刚下载的 Git-1.8.5.2-preview20131230.exe,一路 Next。

安装 Ruby

同样一路 Next,不过要勾选「Add Ruby executables to your PATH」,将 Ruby 的执行路径加入到环境变量中,如果忘记勾选,也可以手动设置。安装完后可以在命令提示符中输入 cd c:\ 进入 C 盘目录之后执行 ruby –version 来确认是否安装成功。

安装 DevKit

DevKit 下载下来的是一个自解压文件,我们将其解压到 D:\DevKit,当然也可以解压到其他目录,但有两点需要注意:

  • 解压目录中没有有中文和空格;
  • 必须先安装 Ruby,而且 Ruby 需要是 RubyInstallser 安装。

解压 DevKit 后,在命令行输入以下命令来进行安装:

d: #注意 Windows 的命令提示符中进入盘符要直接输入盘符
cd DevKit #进入文件夹用 cd 命令,教程后面将直接用 cd 来表示
ruby dk.rb init
ruby dk.rb install

安装 Python

安装 Python,也是一路 Next 就可以,博客的代码高亮用到了 Python 的 Pygments 模块,在 Python 中安装第三方库需要使用 easy_install,下载 https://bitbucket.org/pypa/setuptools/raw/bootstrap/ez_setup.py,下好后打开命令提示符,输入 cd C:\Python27 进入 Python 安装目录,然后再输入下面命令来安装 easy_install

python PATH/ez_setup.py install

这里的 PATH 是你刚刚下载的 ez_setup.py 的保存位置。

安装好之后在 C:\Python27\Scripts 目录下可以看到 easy_install.exe 等文件,表示安装成功。

右击我的电脑,进入属性-高级系统设置-高级-环境变量,在用户变量下可以看到之前安装 Ruby 时它自动添加了一个名为 Path 的环境变量,双击它打开编辑窗口,在变量值的最后添加一个英文分号,在添加 C:\Python27\Scripts,完成后点几个确定关闭窗口,重新打开命令提示符输入 echo %PATH% 查看输出结果中有没有 C:\Python27\Scripts,有则表示设置成功。

在命令提示符中依次下面命令就可以安装 Pygments 了:

cd C:\Python27\Scripts
easy_install pigments

3. 安装依赖程序(OS X)

由于 OS X 是自带 Git 和 Python 的,所以只需要安装 Ruby。

安装 Ruby

首先在终端运行下面命令,来安装 RVM:

curl -L https://get.rvm.io | bash -s stable —ruby

接着顺次运行下面命令,来安装 Ruby 1.9.3:

rvm install 1.9.3
rvm use 1.9.3
rvm rubygems latest

完成后运行 ruby —version,不出意外的话这里就可以看到 ruby 1.9.3 安装好了。

4. 安装 Octopress

首先如果是 Windows 的话,在开始菜单找到 Git Bash 运行,输入 cd d: 来进入 D 盘(当然也可以换成其它路径),OS X 的话在终端同样可以用 cd 命令来进入指定目录,但默认的目录就可以了。

在终端/Git Bash 中运行下面命令:

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

接着在终端/命令提示符中使用 cd 命令进入刚才创建的 octopress 目录。使用下面命令安装相关依赖:

gem install bundler
bundle install

这两条命令可能需要不少时间,请耐心等待。在 OS X 上第二条命令执行时如果提示错误,可将第一条命令前面加 sudo 和空格,会提示输入密码从而获取超级用户权限。Windows 上并没有发现提示错误。

最后是安装默认 Octopress 主题:

rake install

这时候安装就完成了,如果你迫不及待的想看一下成果,就运行下面命令:

rake preview

然后在浏览器中输入 localhost:4000 来预览。

5. 配置 Octopress

整个框架的主要配置信息在 octopress 主目录的 _config.yml 文件中,这个文件中有三大部分,分别是 Main Configs、Jekyll & Plugins 和 3rd Party Settings。url 先不管,我们之后再填,先把 titlesubtitleauthor 冒号后面的内容改称你想要的,然后我们看到 3rd Party Settings,可以填写一些网站的账号,Twitter、Google Plus、Facebook 之类的如果你没有就可以删掉。关于这个文件里面更多的内容请看 官方的帮助文档

然后就是主题,我们之前安装了默认的主题,但是如果你觉得太丑,是可以更换主题或者自己制作的,这里 有一些别人制作好的主题。安装主题的基本步骤如下:

cd octopress
git clone GIT_URL .themes/THEME_NAME
rake install['THEME_NAME']
rake generate

如果用 Windows 的话,这里的 git 命令是需要在 Git Bash 中运行的,后面的所有 git 命令也都要在 Git Bash 中才能运行,而其他命令在命令提示符运行,别忘了都要先 cdoctopress 目录。

安装好主题后,像之前说的,运行 rake preview 就可以在浏览器预览,如果你想自己调整主题,那就自己摸索吧。

有一个建议就是删掉 /source/_includes/custom/head.html 中的添加 Google 字体的代码,这样可以加快国内的访问速度。

Octopress 在 Windows 上存在中文编码问题,可以通过下面步骤解决:

  • 在环境变量中添加下面的键值对:
LANG=zh_CN.UTF-8
LC_ALL=zh_CN.UTF-8
  • 含有中文的文件需要保存为 UTF-8 无 BOM 格式编码。
  • 在 Ruby 的安装路径找到文件 convertible.rbC:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-0.12.0\lib\jekyll\convertible.rb),将 self.content = File.read(File.join(base, name)) 替换为:
self.content = File.read(File.join(base, name), :encoding => ‘utf-8')

6. 添加新文章

现在博客基本上配置好了,但是还空空如也,正等着你去展示文采,所以下面来讲怎么添加新文章。

还是在终端/命令提示符,先用 cd 进入到 octopress 主目录,然后执行下面命令:

rake new_post[‘title’]

这里的 title 并不一定需要是文章的标题,它其实是生成的文件名的一部分,也是 URL 的一部分,尽量不要用中文。

命令执行后生成的文件在 octopress/source/_post/ 目录中可以找到,这个文件的格式是 markdown,可以用文本编辑器打开,当然最好是找一款专门编辑 Markdown 文件的编辑器,Windows 推荐 MarkdownPad,OS X推荐 Mou。Markdown 是一种轻量级的标记语言,很容易学,甚至可以在需要时再去查询它的语法,可以在 http://squidv.com/octopress-markdown/ 查询。

这个文件的最上面几行是默认生成的,Octopress 框架通过它们来获取文章的标题、分类等属性,这里的 title 就是文章真正的标题,你可以按自己需要修改这几项属性。如果你想暂时不公开发表这篇文章,那么可以在这里添加一条属性 published: false,等你想公开发表的时候把 false 改称 true 就可以了。

文章写好后保存,然后执行:

rake generate

执行这个命令不需要关闭之前运行着 rake preview 命令的窗口,直接新建窗口运行该命令即可,生成完毕后,刚才的 rake preview 命令会自动更新内容,同样在浏览器中可以预览。

7. 发布到 GitHub

说了这么多,我们的博客别人看不到,那等于白忙,所以我们要把博客部署到 GitHub,至于 GitHub 是什么可以自己去维基百科了解。

在这里你需要在 官网 注册一个 GitHub 账号,然后到个人页面在 Repositories 页面点「New」按钮新建一个仓库,仓库名称命名为 username.github.iousername 就是你的用户名,README.md 创不创建无所谓。我们的博客的源码将会放到这个仓库的 source 分支,而博客内容放在 master 分支,这个懂不懂没关系。

_config.yml 文件中的 url 后面填上 http://username.github.iousername 就是你的 GitHub 账户名。

在终端/Git Bash 执行下面命令:

rake setup_github_pages

按提示输入刚才创建的仓库地址。

完成后执行:

rake deploy

这个命令将会把博客内容 commitpush 到仓库的 master 分支,就像我们前面说的,博客内容在 master 分支。

如果这一步提示 Permission denied(publickey) 这类错误,请参考 GitHub 的官方帮助文档 Generating SSH Keys,按其步骤生成 SHH Key,之后再从 rake setup_github_pages 命令开始重试。

现在已经可以通过 username.github.io 访问你的博客了(可能有较长时间的延迟,请一定要耐心等待)。

我们还需要把源码给放到仓库的 source 分支,依次执行下面命令:

git add .
git commit -am 'your commit message'
git push origin source

引号里面不限制内容,相当于对这次做的更改进行的备注。

教程到这其实基本结束了,如果你想学习更多内容,那么请看我的另一篇文章 Octopress 搭建博客总结以及可选功能

用 Octopress 在 GitHub 上搭建博客

Octopress 搭建博客总结以及可选功能

创建于
分类:Misc
标签:OctopressBlog

1. 总结

写博客基本步骤如下:

# 创建新文章
rake new_post[‘title’]

# 编辑 Markdown 文件

# 生成静态页面
rake generate

# 在本地预览
rake preview

# 发布到 GitHub
rake deploy

# 将修改的源码推送到 source 分支
git add .
git commit -am 'your commit message'
git push origin source

2. 添加新页面(可选)

添加一个新页面其实和添加文章一样简单,同样是在终端/命令提示符,cd 进去 octopress 目录之后,执行下面命令:

rake new_page[super-awesome]

rake new_page[super-awesome/page.html]

两条命令都会在 source 目录创建一个 super-awesome 文件夹,差别在于,上面的命令创建的目录里面有一个 index.markdown 文件,访问它的链接为 root_url/super-awesome/,后者创建的目录里面是 page.html,访问方式 root_url/super-awesome/page.html,当然如果你输入的是 super-awesome/index.html 那么也是可以通过 root_url/super-awesome/ 访问的。

新创建的页面采用的页面布局是 page,如果你仔细观察的话,会发现之前创建的文章的页面布局是 post,页面布局的HTML在 source/_layouts 目录中,有能力的话可以自行修改布局。

3. 添加评论框(可选)

评论框见的比较多的是 Disqus 和多说。

如果要添加 Disqus 评论框,那只需要有账号,然后在 _config.yml 文件里面填上 disqus_short_name 就可以了。

如果要添加多说评论框,那么除了账号还需要做些别的事:

_config.yml 文件中添加下面内容:

# Duoshuo Comments
duoshuo_comments: true
duoshuo_short_name: yourname

source/_layouts/post.html 中添加下面代码:

{% if site.duoshuo_short_name and site.duoshuo_comments == true and page.comments == true %}
  <section>
    <h1>Comments</h1>
    <div id="comments" aria-live="polite">{% include post/duoshuo.html %}</div>
  </section>
{% endif %}

source/_includes/post/ 目录新建 duoshuo.html,并添加下面内容:

<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread"></div>
<script type="text/javascript">
  var duoshuoQuery = {short_name:"yourname"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = 'http://static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
    || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script>
<!-- Duoshuo Comment END -->

上面所有代码里的 yourname 都要换成你自己的多说 shortname

然后只要执行总结的 3、5、6 步骤就可以了。

4. 添加分享按钮(可选)

方法跟添加评论框的大同小异,如下:

_config.yml 文件中添加下面内容:

# Jia This Share
weibo_share: true

source/_includes/post/sharing.html 中添加下面内容:

{% if site.weibo_share %}
     {% include post/weibo.html %}
{% endif %}

source/_includes/post/ 目录新建 weibo.html,然后在 加网 获取分享按钮的代码,把代码添加到 weibo.html 中。

同样执行总结的 3、5、6 步骤就可以了。

5. 绑定独立域名(可选)

如果你有自己的域名,给你的博客绑定一个独立域名是很不错的选择。GitHub 支持指定顶级域名或二级域名。

不管绑定什么域名,需要在 source 目录新建一个没有扩展名的文件 CNAME,在里面填上一行你要绑定的域名,保存之后发布到 GitHub。

接着,如果你要绑定顶级域名比如 example.com,那么在你的 DNS 中添加一条 A 记录,主机记录填 @,记录值填 204.232.175.78

如果你要绑定二级域名比如 sub.example.com,那么在你的 DNS 中添加一条 CNAME 记录,主机记录填你想要的二级域名如 sub,记录值填 username.github.io

这样你的域名就和博客绑定好了。(DNS 有时会有较长延迟,请耐心等待)

6. 添加百度统计或 Google Analytics

添加百度统计:从百度统计获取代码,然后添加到文件 source/_includes/after_footer.html 文件中。

添加 Google Analytics:从 Google Analytics 获取跟踪 ID,然后将这个 ID 添加到 _config.yml 文件的 google_analytics_tracking_id 后面。

Octopress 搭建博客总结以及可选功能

使用 Google App Engine 科学上网

创建于
分类:Misc
标签:GAEGoAgentGFW

1. 登录 App Engine

打开 Google App Engine 网站。使用谷歌帐号登录,如果没有谷歌账号请注册一个,注册步骤在此不一一阐述,非常简单。

2. 创建新的应用

登录之后出现「Welcome to Google App Engine」页面,点击「Create Application」开始创建新应用。

在 Application Identifier 文本框输入新应用的名称,点击「Check Availability」检查是否可用。Application Title 文本框随便输入文字。两处输入完成后点击「Create Application」即可完成应用的创建。
(注释:每个谷歌帐号最多创建 10 个应用)

创建完成后出现「Application Registered Successfully」页面,建议先不要将本页面关闭,因为待会儿会用到刚刚创建的应用名称,如果你能清楚的记住应用名称,那就可以关闭。

3. 使用 goagent

前往 https://github.com/goagent/goagent 下载最新版本的 goagent,下载完成后,解压到一个不容易被自己误删的地方。使用文本编辑器打开解压后文件夹中 local 文件夹里的 proxy.ini 文件,将第 8 行 appid = 后面的初始应用名称改成刚才创建的应用的名称,保存并关闭文件。

下面的步骤 Windows 系统和 OS X 会有一些区别,我会分开讲。

Windows

运行 goagent 文件夹中 server 文件夹里的 uploader.bat 文件,根据提示输入 appid(即刚才创建的应用名称)、Gmail 帐号、密码来上传服务端程序。上传完成后,运行 goagent 文件夹中 local 文件夹里的 goagent.exe 程序,不要关闭命令提示符窗口,可以点击屏幕右下托盘中的 goagent 图标来最小化。

OS X

上传 goagent 服务段程序以前,你必须先安装 gevent,而安装 gevent 的前提条件是你已经安装 xcode 或者 gcc-4.2。如果 greenlet 版本过低会导致 gevent 装不上,请在终端输入以下命令安装 greenlet-0.4.0

curl -L -O https://github.com/python-greenlet/greenlet/archive/0.4.0.tar.gz
tar xvzpf 0.4.0.tar.gz
cd greenlet-0.4.0
sudo python setup.py install

安装 gevent-1.0rc2,在终端中输入以下命令:

curl -L -O https://github.com/downloads/surfly/gevent/gevent-1.0rc2.tar.gz
tar xvzpf gevent-1.0rc2.tar.gz
cd gevent-1.0rc2
sudo python setup.py install

继续在终端输入以下命令:

cd path(path 为 goagent 文件夹的绝对地址)

从而进入 goagent 目录,再次使用 cd 命令进入 server 目录,执行以下命令:

python uploader.zip

根据提示输入 appid(即刚才创建的应用名称)、Gmail 帐号、密码来上传服务端程序。上传完成后,使用 cd 命令进入 goagent 目录下的 local 目录,执行以下命令:

python proxy.py

到这里本步骤就完成了。

4. 安装 Proxy SwitchySharp 插件

在谷歌浏览器应用商店搜索 Proxy SwitchySharp 插件,并「添加到Chrome」。

进入「SwitchySharp 选项」,选择「导入/导出」选项卡,在「在线恢复备份」按钮后方文本框输入 https://wwqgtxx-goagent.googlecode.com/files/SwitchyOptions.bak,并点击「在线恢复备份」按钮,即可导入已经配置好的设置,完成后可以关闭该页面。

点击谷歌浏览器地址栏右边的 SwitchySharp 插件按钮,选择「自动切换模式」。

之后的操作对于 Windows 和 OS X 又有一些区别,我将再次分开介绍。

Windows

只要保证已经运行 goagent.exe 程序,并且没有关闭,就可以使用谷歌浏览器访问在国内被限制的网站了(提示:可以将 goagent.exe 设置为开机启动,从而不用每次都手动去运行)。

OS X

前往 https://github.com/ohdarling/GoAgentX/releases 下载最新版本的 GoAgentX 并安装。

安装完运行,在主窗口的「服务配置」选项卡中设置好 App ID,点击「状态」选项卡的「启动」按钮即可使用谷歌浏览器访问在国内被限制的网站了(提示:可以在「其他设置」选项卡勾选「在用户登录时自动启动 GoAgentX」 ,从而不用每次都手动去运行)。

使用 Google App Engine 科学上网