×

基于 Octopress & Github Pages 搭建博客

96
向着阳光奔跑的小孩
2016.02.05 12:40* 字数 3636

一直以来想有个属于自己的博客空间,或许是出于一种归属感吧。就这样知道了 WordPress、Jekyll、Hexo 和 Octopress。一番对比后选择了 Octopress,相信追随大神的脚步应该不会错。Octopress 接触有一个多星期了,这里总结下基于 Octopress 及 Github搭建博客的过程及自己中间遇到的一些问题的解决办法。技术上不一定完全精确,若有大神围观望指正:)

使用的是 Mac OS X 系统,不一定适用于 Windows 的童鞋。(勿拍砖...)

1.Octopress 与 Jekyll & Github Pages 的关系

Octopress 是基于 Jekyll 的静态博客框架。

GitHub Pages 这里用于显示托管在 GitHub 上的静态网页,是 GitHub 提供的一项服务。

总的来说也就是我们使用基于 Jekyll 的 Octopress 生成本地的静态网站,然后将静态的网站托管到 Github 为我们提供的 Github Pages 服务上。最后访问博客地址就可以显示我们的个人博客网站了。

2.准备工作

1.安装 git

点击这里前往 Git 官网,按下图提示下载安装(一般 Mac OS X自带 Git 环境,终端执行git -v可查看 Git 版本)。

Git_downloads

2.安装 Ruby

这是Ruby 官网,这里就不详细介绍 Ruby 啦,感兴趣的话可以了解下。好吧,回到 Ruby 的安装。

打开终端,执行如下命令,安装 RVM,同时也会安装最新的 Ruby:

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

安装完,执行如下命令,查看 Ruby 版本 (-v = --version)

$ ruby -v

如果你的 Ruby 版本不低于 1.9.3,可直接跳转到安装 RubyGems。否则需要执行如下命令:

$ rvm install 2.0.0

$ rvm use 2.0.0

安装 RubyGems:

$ rvm rubygems latest

现在我们再执行命令ruby -v查看 Ruby版本,会看到现在已经是2.0.0了。

呼,准备工作搞定!

3.本地安装 Octopress

前面做了那么多准备,主角总算要上场了。

首先,将 Octopress 的项目 clone 到本地,终端执行如下命令:

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

进入octopress目录:

$ cd octopress

下面安装 Octopress 所需要的依赖库(dependencies)

# 安装过程中可能会遇到权限问题,我们需要在命令前面加上 sudo 再执行,并输入登录密码。

# sudo 全称:super user do,也就是以 root 用户身份来执行

$ sudo gem install bundler

$ bundle install

这里在不翻墙的情况下,可能会遇到一个问题:sudo gem install bundler执行后,一直没有响应。这是由于国内网络原因(你懂的),导致rubygems.org存放在 Amazon S3 上面的资源文件间歇性连接失败。所以你会遇到gem install rackbundle install的时候半天没有响应的情况。

幸运的是国内某大神帮我们解决了这一心头大患,我们可以用淘宝的Ruby镜像来替换原来的镜像。只需终端执行下面的命令即可:

$ gem sources -a https://ruby.taobao.org/ -r https://rubygems.org/

# 下一命令查看切换后结果

$ gem sources -l

然后会看到这样的输出:

*** CURRENT SOURCES ***

https://ruby.taobao.org

这就说明我们切换到淘宝的 Ruby 镜像了,再次安装 Octopress 所需要的依赖库就会发现成功啦。

当然还有另外两种方法:

(1).比较原始的方法——手动更改:打开 octopress 文件夹 -> 打开 Gemfile 文件 -> 将 source "https://rubygems.org" 改为 source "https://ruby.taobao.org" 就可以了。

(2).相对方便点,因为我们使用的是 Gemfile,所以我们可以用 Bundler 的Gem 源代码镜像命令,这样我们就不用改 Gemfile 的 source 了。

$ cd octopress

$ bundle config mirror.https://rubygems.org https://ruby.taobao.org

最后安装下默认主题:

# rake 全称:ruby make

$ rake install

4.预览效果

好,经过上面的功夫,我们已经在本地搭建了一个简易版的 Octopress 博客。

我们来看看效果吧。在终端执行命令:

$ sudo rake preview

打开浏览器,输入http://localhost:4000/,就可以看到效果了。虽然比较简陋,但让人挺高兴的,你觉得呢?


经过上一篇,我们在本地搭出了 Octopress 雏形,这一篇首先我们要将本地的 Octopress 博客部署到 Github Pages 

1.将 Octopress 部署到 Github Pages

Github 大家应该都有了解过,也是我很喜欢的平台之一,功能真心强大并且可免费使用,这里我们拿来托管我们的 Octopress 博客。

1.1 新建 Github repository

注册 Github 账号,新建Github repository。项目名称(Repository name)命名格式为username.github.io ,username是你的 Github 用户名(或 organization name,这里和后面我们先不讨论 origanization)。例如我的用户名是 JonyFang,所以输入JonyFang.github.io即可。点击Create repository创建。

PS:创建完后不要添加任何内容,另外自己过程中产生了两个疑问

1.为什么用 github.io 而不是 github.com?

2.为什么是 Repository name 一定要按照 username.github.io 填写?

第一个问题,这里解释了为什么把 github.com 改为了 github.io ,简而言之是为了安全。

第二个问题,和 Github 内部的结构有关,其次后面会通过 URL 获取填写的 username.github.io 作为博客域名。这样填写格式与 Github 内部结构的联系具体还需要再研究下。若有大神围观,望指教下:)

1.2. 配置 Github Pages

终端执行如下命令:

$ cd octopress

$ rake setup_github_pages

该命令会要求我们输入 Github 仓库的URL。复制粘贴下我们新建仓库的SSHHTTPSURL 即可。(例如:git@github.com:username/username.github.io.git

那么这里rake setup_github_pages做了什么呢?

用户(users)的 Github Pages 使用 master 分支作为 Web 服务(web server)的公开目录,为我们的Pages url(http://username.github.io)提供内容文件。因此,我们会有这样的需求,source 分支用来做与博客源码相关的事(存放全部博客源码),master 分支上 commit 生成的博客内容供 Web 访问。而 Octopress 帮我们把这件事给搞定了,通过这行 code(好 NB~)。

下面具体分析下 Octopress 是怎么做的(可通过查看 Rakefile 得知):

1. 命令要求我们输入 Github Pages 仓库的 URL,也就是我们新建的名为 username.github.io 仓库的 URL。这样命名是为了通过字符串截取 URL 拿到子串(http://username.github.io)作为我们博客的域名;

# Rakefile 中可查看 URL 截取方式:

repo_url = get_stdin("Repository url: ")

2. 将指向(pointing to)imathis/octopress 远程库的名字 ‘origin’ 改为 ‘octopress’;

Git clone 一个仓库时,会将 clone 下来的仓库命名为 origin,没有限定 clone 条件的情况下,会下载仓库中所有数据,并建立一个指向该仓库 master 分支的指针,本地命名为 origin/master。

当我们 clone 了 octopress 仓库,执行如下命令可看到远程仓库信息:

$ cd octopress

$ git remote -v

# 输出如下,可看到远程仓库名为 origin

origingit://github.com/imathis/octopress.git (fetch)

origingit://github.com/imathis/octopress.git (push)

Octopress 文件夹下 Rakefile 中可看出是通过如下的方式,将 origin 改为 octopress:

# 查看 Rakefile

system "git remote rename origin octopress"

这里内部执行了命令git remore rename origin octopress,当 rake setup_github_pages 执行完毕,再git remote -v发现远程库名改为了 octopress。

$ git remote -v

# 输出如下

octopress git://github.com/imathis/octopress.git (fetch)

octopressgit://github.com/imathis/octopress.git (push)

3.添加你的 Github Pages 仓库作为默认的 origin remote,并将远程库中指向 imathis/octopress 中 master 分支的指针指向现在的 origin(即 username/username.github.io)的 master 分支,

# 查看 Rakefile

system "git remote add origin #{repo_url}"

system "git config branch.master.remote origin"

当 rake setup_github_pages 执行完毕查看远程库,可以看到远程库 origin 指向了 Github Pages。

$ cd octopress

$ git remote -v

# 输出信息如下

octopress git://github.com/imathis/octopress.git (fetch)

octopress git://github.com/imathis/octopress.git (push)

origin git@github.com:JonyFang/JonyFang.github.io.git (fetch)

origingit@github.com:JonyFang/JonyFang.github.io.git (push)

到这里,应该能猜到上一步将指向 imathis/octopress 远程库的名字 origin 改为 octopress 的原因了。

4. 将本地 master 分支名字从"master"改为"source"

# 查看 Rakefile

system "git branch -m master source"

执行如下命令查看本地分支(拿到第6条解释为什么要改名为 source):

$ git branch

# 输出如下

* source

5.根据提供的 Github Pages 仓库的 SSH 或 HTTPS 的 URL,截取仓库名username.github.io作为博客的 URL(上面 1 有提到)。然后将 octopress 目录下_config.yml文件中 url 参数值改为http://username.github.io 。

# octopress 下 Rakefile 查看

url = blog_url(user, project, source_dir)

jekyll_config = IO.read('_config.yml')

jekyll_config.sub!(/^url:.*$/, "url: #{url}")

File.open('_config.yml', 'w') do |f|

f.write jekyll_config

6. 在octopress目录下新建_deploy 目录,并在_deploy目录下新建master分支;

前面4 ,我们将本地 master 分支名字从"master"改为"source",这里一起分析下原因。4和6放在一起容易理解点。

其实本地 octopress 博客部署到 Github Pages 之后,远程 Github 下会有两个分支, master 和 source。远程 master 分支作为 Web 服务公开目录,当你访问 http://username.github.io 时,提供网站内容;远程 source 分支存放的是整个 octopress 框架的源码。

之所以第4步将本地 master 改为 source,是为了把 master 指针让出来,让它指向这一步(6)新建的 _deploy 目录下的 master 分支。这样,octopress/_deploy 目录下的本地 master 分支 就对应了 Github Pages 远程库中的 master 分支,本地 source 分支同理。

# 查看 Rakefile

cd "#{deploy_dir}" do

system "git init"

system 'echo "My Octopress Page is coming soon …" > index.html'

system "git add ."

system "git commit -m \"Octopress init\""

system "git branch -m gh-pages" unless branch == 'master'

system "git remote add origin #{repo_url}"

然后修改了 Rakefile 中 deploy_default 和 deploy_branch 变量的初始值:

# deploy 时执行的命令,"push" 为 Rakefile 中定义的一个 rake task

deploy_default = "push" # 初始为 "rsync"

# deploy 时执行上述 rake task 命令 "push" 到 "master" 分支

deploy_branch  = "master" # 初始为 "gh-pages"

回头来看rake setup_github_pages,是不是清晰多了呢?

1.3. 生成并部署站点

执行如下命令,(将 octopress/_deploy 下数据 push 到master分支):

$ sudo rake generate

$ sudo rake deploy

这时在浏览器输入 http://username.github.io 就可以访问我们的网页啦~

最后别忘了commit你的octopress 框架源码source分支:

$ git add .

$ git commit -m'init'  #init 可随意填写

$ git push origin source

好,到这里,如果顺利完成前面所有内容的话,我们已经将 Octopress 部署到 Github Pages 了。如果你想换成自己的域名可以参考这里的方法(Custom Domains),不再赘述了。

这里解释下,rake generate 和 rake deploy。

rake generate:生成jekyll站点(Generating Site with Jekyll)

# 查看 Rakefile

system "compass compile --css-dir #{source_dir}/stylesheets"

system "jekyll build"

rake deploy:将站点部署到 Github Pages。由于 _deploy 目录所代表的本地仓库的master分支对应 Github Pages 远程仓库的 master 分支,该分支目录的内容即 Github Pages 在互联网上供公开访问的站点内容。因此这里做的主要就是将改动的内容(博客、DIY 布局等...) copy 到 _deploy 目录下,然后将此修改push到 Github Pages 远程库的 master 分支。

1. 查看是否有preview-mode (预览模式),有则删除,重新执行rake generate

1. 将octopress/source目录下的文件拷贝到octopress/public目录下;

2. 进入octopress/_deploy目录,执行 git pull 操作;

3. 将octopress/public目录的内容拷贝到octopress/_deploy目录下;

4. 将octopress/_deploy目录所对应的本地 master 分支的修改 push 到 Github Pages 远程库的 master 分支。

5. 下面可以看到 master 分支 commit 信息格式是"Site updated at 2015-10-14 12:52:36 UTC"

# 查看 Rakefile

system "git add -A"

message = "Site updated at #{Time.now.utc}"

system "git commit -m \"#{message}\""

# 前面说过 deploy_branch  = "master"

Bundler.with_clean_env { system "git push origin #{deploy_branch}" }

2. 发布博文过程

2.1. 新建一篇博文

打开终端,输入:

$ cd octopress

$ rake new_post["Hi, octopress"]  #"Hi, octopress" 是文章的标题

然后在 octopress/source/_posts 目录下我们会看到命名格式为"2015-10-14-Hi-octopress.markdown"的文件。

# 查看 Rakefile ,这是实现方法

filename = "#{source_dir}/#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"

打开新建的"2015-10-14-Hi-octopress.markdown"文件(我用的Mou,免费还好用),会发现头文件有如下内容(不要删除这段信息):

---

layout: post             #代表是一片博文

title: "hello world"

date: 2015-10-14 19:59:22 +0800

comments: true         #是否允许评论

categories:             #分类

---

头部布局实现原理:

# 查看 Rakefile,头部布局实现

open(filename, 'w') do |post|

post.puts "---"

post.puts "layout: post"

post.puts "title: \"#{title.gsub(/&/,'&')}\""

post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"

post.puts "comments: true"

post.puts "categories: "

post.puts "---"

在最后面的---下面就可以开始我们的正文啦~

2.2. 预览新建的博文

终端执行如下命令:

$ cd octopress

$ sudo rake generate

$ rake preview

然后浏览器打开http://localhost:4000,可以预览我们刚写的博客效果。

2.3. 发布新建的博文

终端执行:

$ sudo rake deploy  #deploy blog 到 Github Pages

最后别忘了,push 下本地的 octopress 到 source:

$ git add .

$ git commit -m'post test blog'

$ git push origin source

OK,到此,本地 octopress 博客部署到 Github Pages 完成了,打开访问你的个人博客看看效果吧。额,因为还没有做布局修改,留到下一篇介绍~

搭建网站
Web note ad 1