制作个人博客站(一):Mac系统下使用 Octopress + GitHub Pages 搭建个人博

程序员总是喜欢特立独行,搞些定制化得东西才会显得与众不同。看腻了诸如CSDN、网易、新浪等臃肿的博客系统,搭建一个属于自己的博客(或者是个人站点)大致成为了一个高逼格Coder的标配。最近使用 Octopress 搭建了我的个人博客,现在把内容总结出来,希望对大家有所帮助。

本文是建立在你有 Shell 指令基础及 Git 操作基础上。如果这部分还不了解的话,需要自己查阅文档。

在搭建之前需要理解几个术语:

  • Ruby

    • Ruby 是一种编程语言。Octopress 是用 Ruby语言 实现的。我们不需要对它有太多了解,只需要正确安装 Ruby 的环境(Ruby版本必须不低于1.9.3-p0,后面会详细介绍)及按步骤执行指令即可。

  • RubyGems

    • RubyGems(简称 gems)是一个用于对 Ruby组件进行打包的 Ruby 打包系统。它可以用来查找、安装、升级和卸载软件包。我们也是通过它安装Octopress包的。

  • RVM

    • RVM 是 一款 Ruby 语言安装、管理的工具。我们对 Ruby 的操作是通过它的指令完成的。

  • Jekyll

    • Jekyll 一个简单的博客形态的静态站点生产机器。Jekyll 有一套模板目录,可以将 Markdown文件(或者Textile)转换为静态网页,并生成一个完整的可发布的静态网站。

    • 同时,我们可以将产生的静态网站布置到 GitHub Pages 上,生成个人博客站点。

    • 想了解更多内容可以查看 中文文档

  • Octopress

    • Octopress 是基于 Jekyll 的博客框架。他们的关系就像 jQuery 与 js 的关系一样。

    • 它为我们提供了现成的美观的主题模板,并且配置简单,使用方便,大大降低了我们建站的门槛。

  • GitHub

    • GitHub 是全球最热的开源社区,程序界的 Facebook。它为我们提供代码托管服务,以及我们搭建博客所需要的 Pages 服务。

  • GitHub Pages

    • GitHub Pages 是 GitHub 提供的一项服务。它用于显示托管在 GitHub 上的静态网页。所以我们可以用 Github Pages 搭建博客,当然我们也可以把项目的文档和主页放在上面。

通过以上内容,我们大概能够明白 Octopress 建站的原理:

我们使用基于 Jekyll 的 Octopress 站点生成工具,生成本地的静态网站。然后将静态网站托管到 GitHub 为我们提供的 GitHub Pages 服务上。访问 username.github.io 即可显示你的个人博客站了。

明白了上面这些内容,下面进行具体的搭建工作:

第一步:安装 Ruby

打开终端,安装 RVM ,终端执行指令:

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

接下来我们要查看自己的 Ruby 环境

$ ruby -v

如果你的 Ruby 版本不低于 1.9.3-p0 可以忽略 Ruby 的安装(或升级),直接跳到安装 RubyGems 。 否则,我们执行之后的操作,终端执行指令:

$ rvm install 1.9.3
$ rvm use 1.9.3

然后安装 RubyGems, 终端执行指令:

$ rvm rubygems latest

到这里第一步完成。我们可以再执行一次第一条指令 ruby -v 来查看当前 Ruby 的版本了。

第二步:安装Octopress

因为Mac系统自动git环境,所以我们不需要考虑git的安装。直接将 Octopress的项目clone到本地,在终端执行指令:

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

完成后进入 octopress 的目录

$ cd octopress

接下来,安装依赖:

$ gem install bundler

# 这时你可能会遇到没有权限的问题,那么我们需要加上sudo重新执行,并输入密码。
$ sudo gem install bundler
# 接下来执行:
$ bundle install

这时你可能还会遇到问题如下:

Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
 
Gem::RemoteFetcher::FetchError: SocketError: getaddrinfo: Name or service not known (https://rubygems.org/gems/rake-10.4.2.gem)
An error occurred while installing rake (10.4.2), and Bundler cannot continue.
Make sure that `gem install rake -v '10.4.2'` succeeds before bundling.

这是因为被墙了,解决办法有两个: 一个是,可以使用自己的翻墙工具; 另一个,淘宝做了一个gem的镜像。我们需要在Octopress的文件目录下找到Gemfile文件,将其中的source 'https://rubygems.org/'改为source 'https://ruby.taobao.org/'

再重新运行bundle install就可以了。 这段内容可以参考 bundle install 提示如下,是需要翻墙解决么

下面就可以安装 Octopress 的默认主题了,终端执行指令:

 $ rake install

这样一个最基本的个人博客站就产生了。

可以看出,现在显示得都是预设值,并不是我们想要的,所以需要修改Octopress目录下的_config.yml文件。

_config.yml 文件共分为3个不发内容

  • Main Configs

  • Jekyll & Plugins

  • 3rd Party Settings

目前,我们只需要关注第一部分Main Configs。

# ----------------------- #
#      Main Configs       #
# ----------------------- #
#网站地址
url: http://aster0id.github.io
#网站标题 
title: Aster0id的个人博客
#网站副标题 
subtitle: 每天进步一点点.
#网址作者,通常显示在页尾和每篇文章的尾部
author: Aster0id
#搜索引擎
#simple_search: http://google.com/search
#网站的描述,出现在HTML页面中的 meta 中的 description
#description:

对应填入你的个人信息,其中url为必填的,一般填GitHub仓库对应的连接,其内容大致就是 username.github.io ,这个地址我们会在后面步骤中获得。

第三步:集成 GitHub Pages

在 GitHub 上创建一个代码参考,项目名称命名规则为 username.github.io,username必须与用户名称一致。

Ps. 在创建过程中最好不要添加忽略文件和README文件。因为我们要把本地的 git 仓库同步到 GitHub 远程仓库中。如果再远程仓库中添加了其他文件,需要我们执行 pull 操作。除非你能非常熟练的使用 git ,否则不建议你制造不必要的麻烦。

接下来将本地代码仓库同步到 GitHub 上,执行终端指令:

$ rake setup_github_pages

它会要求你绑定远程仓库的地址,此时只需要输入即可:

$ git@github.com:username/username.github.com.git

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

之后我们创建第一篇文章:

rake new_post["title"]

生成的新文章在source/_post/目录下,文件名构成为时间和标题的拼音。我们可以用Markdown编辑器对文章进行修改。

之后生成静态站点,终端执行指令:

# 生成静态站点
$ rake generate

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

# 预览静态站点
$ rake preview

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

# 同步内容
$ rake deploy

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

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

$ git add .
$ git commit -m "comment"
$ git push origin source

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

现在我们完成了个人博客的初级搭建,足够满足我们的基本需求。之后,我会补充几篇文章,关于绑定域名、更换主题、定制主题 等内容。

希望这篇文章对你有所帮助

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章