安路的技术博客

Nothing in life is to be feared. It is only to be understood

如何用Octopress搭建博客

| Comments

前言

怎么样写出漂亮的博客,一直是我的追求。终于我找到了octopress,它不仅效率高,而且美观大方,部署免费,完全符合我的要求。 它是基于Jekyll 博客站点生成系统,它简化的步骤大大提高了写博客的效率。我总结大概有以下几个优点:

   * 命令行操作
   * 纯文本
   * 可定制
   * 纯静态
   * 利用git版本管理
   * 简洁的Ruby框架
   * 经典的Markdown语法

目录结构

MacDown logo

写作流程

   1. 搭建环境.
   2. 开始写作博客
   3. 生成静态网页
   4. 本地预览
   5. 部署到服务器
   6. 推送代码到git服务器

搭建环境

  1. 安装git
  2. 安装Ruby环境,最低要求1.9.3版本,基于ruby的命令的管理工具安装一下 rbenv 或者 RVM

rbenv安装步骤

假定你的电脑上已经安装Homebrew

1. brew update
2. brew install rbenv
3. brew install ruby-build

安装Ruby1.9.3

1. rbenv install 1.9.3-p0
2. rbenv local 1.9.3-p0
3. rbenv rehash

安装Octopress

1. git clone git://github.com/imathis/octopress.git octopress
2. cd octopress

目录结构如下:MacDown logo 下一步,安装类库依赖

 1. gem install bundler
 2. rbenv rehash    # If you use rbenv, rehash to be able to run the bundle command
 3. bundle install

安装octopress默认的主题

  rake install

此时目录结构如下:MacDown logo

 1. source 是写源博客文件的,到时会提交给git
 2. sass  是自带的一些样式 css等
 3. public 是发布的目录

配置博客

_config.yml是主要的配置文件,里面有博客的标题,作者,时间和一些第三方的配置,比如facebook,twitter,google分析工具,评论等,当然一些国外的无法访问的可以去掉,比如twitter等等, 我的配置如下图 MacDown logo

开始写博客

语法

rake new_post["title"]

标题可以任意命名
比如

rake new_post["hello Octopress"]

这行命令会在 source文件下的 _posts 创建一个markDown文件

MacDown logo 命名规则就是2015-08-04-hello-octopress.markdown

部署

部署到服务器有三种方式:

1. GitHub Pages
2. Heroku
3. Rsync

我们今天选择GitHug pages进行部署

首先要在GitHub上创建一个仓库,(如果没有github账号的,请自行创建)

GitHub部署

创建的仓库的名字必须是 http://username.github.io 以你github账号的登录名命名仓库的名字,比如我的就是 http://andrew-anlu.github.io/

MacDown logo

然后输入命令:

rake setup_github_pages

这行命令就是要把octopress和你的github上的博客仓库进行绑定 MacDown logo

下一步

1. rake generate
2. rake deploy

这一步将自动生成博客网站,并且拷贝到_deploy文件夹中,提交代码并推送到GitHub上的 Master主分支,如图MacDown logo

看看_deploy目录,相信已经多了很多东西

现在让我们访问下我们自动生成并且部署好的博客网站,访问地址:http://你的username.github.io/,比如我的就是: http://andrew-anlu.github.io/ MacDown logo

优化加载速度

第一次加载的话,速度会很慢,让我们用chrome浏览器访问,打开调试工具,点击Network MacDown logo 位置是source->include->head.html 我们先找到<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 用百度提供的jquary类库来替换一下, <script src="//libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 替换好的如下图: MacDown logo

也可以全局搜索一下,看看其它地方是否也引用了国外的jquary类库,都替换过来。然后再在 chrome中访问下,速度会提升不少!

预览

当然我们也可以预览下我们写的博客

rake preview

会在本地创建一个服务器,端口号:4000

访问地址:(http://localhost:4000)

推送到远程服务器

因为源文件仅仅是Source文件夹,所以只需要将source推送到远程服务器。 远程服务器有两个分支 Master主要是部署网站,Source分支主要是版本控制

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

现在远程服务器的source分支上就保存了源代码 MacDown logo

祝生活愉快~

高级话题

Comments