×

GitHub+Octopress搭建自己的博客

96
Vanbein
2016.02.24 21:42* 字数 2334

作为一个程序员,如果没有自己的专属技术博客,岂不是一大不幸?于是不久前在jonyfang的详细教程下完成了在Mac上使用Github+ Octopress搭建属于自己的博客,十分的感谢!所以我把搭建博客的过程记录总结下来。附原文地址:Jony Fang

一、Octopress 与 Jekyll & Github Pages 的关系

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

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

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

二、安装环境:

  1. 我使用的是 Mac OS X 系统

  2. 安装 Ruby,由于我之前安装了CocoaPods,所以已经有Ruby,一般来说,Mac OS X都是自带Ruby的

但还是记录下Ruby安装教程
(1) 打开终端,执行如下命令,安装 RVM,同时也会安装最新的 Ruby:

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

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

$ ruby -v

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

$ rvm install 2.0.0
$ rvm use 2.0.0

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

$ ruby -v     

(3) 安装 RubyGems:

$ rvm rubygems latest

OK,环境准备工作搞定了

三、本地安装 Octopress

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

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

进入 octopress 目录:

$ cd octopress

2. 安装 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

3. 安装下默认主题:

终端执行下面的命令,即可安装默认主题,当然也可在这里就安装第三方主题,不过一会再安装也是一样的,所以留在后面说吧。

     $ rake install

注:rake 全称为:ruby make

4. 预览效果

OK,经过上面的流程,我们已经在本地搭建了一个简易版的 Octopress 博客。于是让我们来看看效果吧。在终端执行命令:

$ sudo rake preview

然后打开浏览器,输入 http://localhost:4000/
就可以看到效果了。虽然比较简陋,但让人挺高兴的,哈哈哈
至此我们算是结束了本地安装过程

Blog预览.jpg

四、本地的 Octopress 博客部署到 Github Pages

前面我们已经在本地搭出了 Octopress 雏形,接下来我们要将本地的 Octopress 博客部署到 Github Pages

1. 新建 Github repository

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

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

  • 1.为什么用 github.io 而不是 github.com
  • 2.为什么是 Repository name 一定要按照 username.github.io填写?

第一个问题,简而言之,使用了github.io是为了安全。

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

2. 配置 Github Pages

终端执行如下命令:

$ cd octopress
$ rake setup_github_pages

该命令会要求我们输入 Github 仓库的 URL 。复制粘贴下我们新建仓库的 SSH 或 HTTPS URL 即可。(例如:git@github.com:username/username.github.io.git),注意此处有坑,若是新手,选择了SSH后面会出现要求配置SSH Key问题,可能会导致很麻烦,所以我选择了HTTPS

记录下:这两种方式的主要区别在于:使用https url克隆对初学者来说会比较方便,复制https url然后到git Bash里面直接用clone命令克隆到本地就好了,但是每次fetch和push代码都需要输入账号和密码,这也是https方式的麻烦之处。而使用SSH url克隆却需要在克隆之前先配置和添加好SSH key,因此,如果你想要使用SSH url克隆的话,你必须是这个项目的拥有者。否则你是无法添加SSH key的,另外SSH默认是每次fetch和push代码都不需要输入账号和密码,如果你想要每次都输入账号密码才能进行fetch和push也可以另外进行设置。

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

通过这样就会将 Octopress 生成的静态站点与 GitHub 进行绑定了。

3. 创建第一篇文章:

终端执行指令:

$ rake new_post["title"]    #title为你的文章名,可随意更改

生成的新文章在source/_post/目录下,文件名构成为时间和标题的拼音。我们可以用Markdown编辑器对文章进行修改。
打开新建的 markdown 文件(我目前用的 Mou 打开),会发现头文件有如下内容(千万不要删除这段信息):

---
layout: post             #post代表是一篇博文
title: "hello world"
date: 2015-10-14 19:59:22 +0800
comments: true         #是否允许评论
categories:             #分类
---

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

正文写完后,终端执行如下指令即可生成静态站点,:

$ sudo rake generate

如果你想预览本地的站点,可以执行终端指令:

$ rake preview

此时,可以使用浏览器打开 localhost:4000 查看效果。如果没有问题可以将静态站点同步到 GitHub 远程仓库中,终端执行指令:

$ sudo rake deploy

你会发现我们的静态站点已经被 push 到 GitHub仓库的 master 分支上。稍等几分钟,访问博客地址 username.github.io ,就会发现你的个人博客站的第一篇blog已创建成功了。

如果你还想把自己的本地资源文件(如Markdown文件等内容)也同步到 GitHub 中,可以执行以下指令:

$ git add .
$ git commit -m "comment"  #comment可随意更改
$ git push origin source

这样我们的资源文件就会同步到 GitHub 的 source 分支了。

注意:rake preview 会自动监视文件的变化,重新生成静态页面。因此修改markdown文件后,只需要在浏览器里刷新一下页面,就立刻可以看到效果。不过如果修改了_config.yml的话,则需要Ctrl+C终止,用 rake generate 重新生成,才能看到效果。

OK,现在我们完成了个人博客的初级搭建,足够满足我们的基本需求。之后,我们需要进一步了解关于更换主题theme、定制博客站Style等内容,详情请参见我的下一篇文章--个性化我们的Octopress博客

原文地址:GitHub+Octopress搭建自己的博客

iOS基础
Web note ad 1