1.Octopress简介

基础知识

Octopress是一个基于jekyll的静态的静态博客站点生成系统，很大程度的简化了jekyll搭建博客过程。

为什么用Octopress而不用wordpress

wordpress有太多的缺点：需要买主机，域名。它还是动态的，并且过度的依赖数据库，迁移成本高。

Octopress特点

• 命令行操作
• 纯文本写博客
• 定制性高
• 纯静态
• 版本化管理
• 迁移成本低
• 简洁的Ruby框架
• Markdown语法

Octopress目录结构

• 主题插件等文件夹
• source文件夹
• public文件夹

一般使用流程

• 搭建环境
• 纯文本写博客
• 生成静态网页
• 本地预览
• 部署到github

2.Octopress环境搭建

软件安装

• Git安装：

  版本管理工具，可以将我们生成的静态网页托管到GitHub上。

  • 设置全局

    git config --global user.name "name" 配置username
git config --global user.email "邮箱" 配置邮箱

  • 设置ssh

    ssh -keygen -t rsa -C "邮箱" 设置rsa的数字指纹，一个是公钥，一个是私钥
公钥要提交到github上，私钥需要自己保存

  • 验证ssh key

    ssh -T git@github.com 会用本地的私钥和github的公钥进行匹配

• Ruby安装：

  https://www.ruby-lang.org/en/

• DevKit安装

  http://rubyinstaller.org/add-ons/devkit/

  • DevKit与Ruby两者的关联

    • 1.ruby dk.rb init 执行关联操作 会生成config.yml 配置文件；
    • 2.如果配置文件中自行找到并设置了本地的ruby安装目录，那么就直接进行下一步操作，否则需要看一下“遇到问题”的解决方法；
    • 3.执行 ruby dk.rb install 跳出下面提示，表示安装成功
      [INFO] Updating convenience notice gem override for ‘d:/Ruby21
[INFO] Installing ‘d:/Ruby21-x64/lib/ruby/site_ruby/devkit.rb‘

  • 可能遇到问题

    没有发现我们安装的ruby目录的话，需要手动的到刚才生成的config.yml文件中进行添加：

    • 1.vim config.yml
    • 2.按下“i”键，执行insert操作；
    • 3.插入：- 本地ruby的目录
    • 4.按“:wq”保存并退出vim模式

• MarkdownPad安装

  windows下的markdown语法编辑器

• awesomium安装

  实现markdown编辑与预览的效果

• Pygments安装

  • 安装 Python

    • 1.前往 http://www.python.org/download/
    • 2.下载合适的 Python windows 安装包，如 Python 2.7.6 Windows Installer。 请注意，Python 2 可能会更合适，因为暂时 Python 3 可能不会正常工作。
    • 3.安装
    • 4.添加安装路径 (如： C:\Python27) 至 PATH。(如何操作? 请参见 故障诊断 #1)
    • 5.检验 Python 安装是否成功
      python –V
      输出示例：
      Python 2.7.6

  • 安装 ‘Easy Install’

    • 1.浏览https://pypi.python.org/pypi/setuptools#installation-instructions来查看详细的安装指南。
    • 2.对于 Windows 7 的机器，下载 ez_setup.py 并保存，例如，至C:\。 然后从命令行使用 Python 运行此文件：
      python “C:\ez_setup.py”
    • 3.添加 ‘Python Scripts’ 路径 (如： C:\Python27\Scripts) 至 PATH

  • 安装 Pygments

    • 1.确保 easy_install 已经正确安装
      easy_install --version
      输出示例：
      setuptools 3.1
    • 2.使用 “easy_install” 来安装 Pygments:
      easy_install Pygments

配置一个简单的Octopress主题

• 克隆Octopress到本地

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

• 安装依赖库

  • 先配置一下安装源

    • gem sources -a http://ruby.taobao.org 在安装源地址中append一个淘宝的ruby地址
    • gem sources -r http://rubygems.org 将ruby自带的http的安装源remove掉
    • 修改一下GenFile文件中的软件源为：source "http://ruby.taobao.org"

  • 安装依赖库

    • gem install bundler 安装bundler
    • bundle install

• 安装并使用默认主题

  • rake intall 生成一个source目录
  • rake generate 生成public文件
  • rake preview 打开一个服务，进行预览

• preview安装好的主题

可能遇到问题

• 静态网站加载很慢

  • 1.使用谷歌浏览器打开：http://localhost:4000
  • 2.F12打开控制面板，查看网络加载变慢原因
  • 3.会发现是两个js的引用加载失败，由于网络的原因
  • 4.解决方法，将jquery.min.js改为百度的”“，可以提高速度

3.生成博客与单页面

新建博客与单页面

• 新建博客

  rake new_post["title"]

• 新建单页面

  单页面和博客是不一样的，单页面在博客首页是看不到的，单页面可以用来做一些例如 About Me的页面之类的

  • 方式一：rake new_page[page1]

    在creates/source/page1/index.markdown会自动生成一个page1的文件目录，并在里面生成一个index.markdown文件`

  • 方式二：rake new_page[page1/pagename.html]

    creates/source/page1/pagename.html 会自动生成一个page1的文件目录，并且在里面生成pagename.html的网页文件

编写博客的工具

• markdownpad
• 记事本
• vim命令

可能遇到的问题

代码高亮markdown书写之后，解析失败
这是由于缺少了 Pygments这个解析代码片段高亮的插件
解决方法：返回之前步骤安装Pygments

4.部署网站到GitHub

部署博客到GitHub

• 新建一个名为username.github.io格式的仓库

  必须要验证邮件才能使用github.io

• 与本地的Octopress目录绑定

  • rake setup_github_pages

  • 为了保证部署的网站是最新的，先执行下面的命令生成最新的网站rake generate

  • rake deploy 会将最新的public目录中的静态网站生成到deploy文件夹中，并push到github

托管源码到Github

• 将source目录更新到远程仓库

  git add .

  git commit -m “message”

  git push origin source

  创建一个源码的分支，这样就可以在任何电脑使用了

可能遇到问题

• 当换了一台电脑之后，
  
  • 1.先clone source库： git clone -b source xxxxxxxxx;
  • 2.然后执行”Octopress环境搭建“==》”配置一个简单的Octopress主题“==》”安装依赖库“
  • 3.安装并使用默认主题 ：
    
    • rake intall 生成一个source目录
    • rake generate 生成public
  • 4.”部署网站到GitHub“==》”部署博客到GitHub“=》执行 rake setup_github_pages 绑定起来
  • 1. 进入到刚生产的_deploy目录，执行git pull origin master 更新github上的之前绑定的网站到此目录【不然会导致deploy失败】
  • 6.下面就可以和之前在第一台电脑上进行的操作一样了，添加博客，genrate ，deploy。。。。。

5.博客自定义与配置

完善主配置文件：_config.yml

可以设置url，title，author等信息

使用第三方插件

• 评论功能

  • 注册一个说说账户并新建一个后台
    http://dev.duoshuo.com/
  • 在_config.yml中新建一个多说的评论开关
    

    duoshuo_comment: true

  • 修改source_layouts目录中post.html模板
    在里面修改掉之前默认的评论插件，那个在中国不适合
    html
{% if site.duoshuo_comment == true %}
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite">{% include post/duoshuo_comment.html %}</div>
</section>
{% endif %}


  • 在source_includes\post目录下新建一个多说的评论模板

    代码来之多说网站，进行一些全局变量的修改之后，代码如下：

    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="{{ page.id }}" data-title="{{ page.title }}" data-url="{{ site.url }}{{ page.url }}"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"your duoshuo name"};
    (function() {
        var ds = document.createElement(‘script‘);
        ds.type = ‘text/javascript‘;ds.async = true;
        ds.src = (document.location.protocol == ‘https:‘ ? ‘https:‘ : ‘http:‘) + ‘//static.duoshuo.com/embed.js‘;
        ds.charset = ‘UTF-8‘;
        (document.getElementsByTagName(‘head‘)[0] 
        || document.getElementsByTagName(‘body‘)[0]).appendChild(ds);
    })();
    </script>
    <!-- 多说公共JS代码 end -->

社会化分享功能

• 打开 JiaThis网站获取分享代码

  http://www.jiathis.com/

• 在_config.yml中新建一个jiashare的分享开关

  jia_share: true

• 修改source_includes\post目录下的sharing.html

  添加下面代码 ：
  {% if site.jia_share %}
      {% include post/jia_share.html %}
  {% endif %}

• 在source_includes\post目录 下添加jia_share.html

  代码就是从jiathis网站拷贝的代码

自定义404界面

• 创建一个404.markdown文件 设置一下其基本属性如下：

  ---
  
  layout: page
  title: "404 Not Found"
  date: 2015-08-23 08:38:49 +0800
  
  comments: false
  ---
  

• 加入腾讯公益的404页面：
  
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>


自定义导航

添加一个aboutme的导航

• 先执行rake new_page[aboutme]

• 再在\source_includes\custom目录下的navigation.html中添加一个导航:

  <li><a href="{{ root_url }}/aboutme">AboutMe</a></li>

6.安装使用主题

到Github寻找主题

安装主题

rake install[‘themename’]

重新生成

rake generate

注意点：安装主题一定要做好备份操作

安装主题会导致之前修改的模板之类的全部被覆盖消失
所以必须做好备份操作

7.自定义网站域名

在github上绑定自定义域名

• 创建source/CNAME文件并指定域名:

  echo ‘xxxx.com‘  >> source/CNAME
  OR
  echo ‘www.xxxx.com‘  >> source/CNAME

解析域名至github

• 使用的是子域名

  创建一个CNAME 指向 username.github.io

• 使用的是顶级域名

  使用A记录，指向192.30.252.153（154）【github.io的ip地址】

此文章同步在我的个人博客：

http://guxuewu.com