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安装：
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'
- 1.
可能遇到问题
没有发现我们安装的ruby目录的话，需要手动的到刚才生成的config.yml文件中进行添加：
- 1.
vim config.yml - 2.按下“i”键，执行insert操作；
- 3.插入：- 本地ruby的目录
- 4.按“:wq”保存并退出vim模式
- 1.
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
- 1.确保 easy_install 已经正确安装
配置一个简单的Octopress主题
克隆Octopress到本地
安装依赖库
先配置一下安装源
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安装bundlerbundle 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 generaterake 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绑定起来 -
- 进入到刚生产的_deploy目录，执行
git pull origin master更新github上的之前绑定的网站到此目录【不然会导致deploy失败】
- 进入到刚生产的_deploy目录，执行
- 6.下面就可以和之前在第一台电脑上进行的操作一样了，添加博客，genrate ，deploy。。。。。
- 1.先clone source库：
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网站获取分享代码
在_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地址】
扫一扫
2031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
