使用Octopress搭建静态博客网站

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 [email protected] 会用本地的私钥和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’
    • 安装 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

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-12 04:13:30

使用Octopress搭建静态博客网站的相关文章

Octopress 搭建静态博客网站环境配置

备忘录:记录一下搭建过程 1.安装Git 鼠标右键--打开Git Bash 打开命令行配置git(要有github账号:name) $ git config --global user.name "name" 配置git的全局用户信息(可以看到是哪个用户,哪个邮箱提交的) $ git config --global user.email "[email protected]" 生成秘钥: $ ssh-keygen -t rsa -C "[email pro

Git+Hexo搭建静态博客网站

Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 安装环境 安装Git 版本管理工具,可以将我们生成的静态网页托管到GitHub上 设置全局 git config --global user.name "name" 配置username git config --global user.email "邮箱" 配置邮箱 设置ssh ssh -keygen -t rsa -

使用hexo和github搭建个人博客网站

使用hexo+github可以免费.快速地搭建一个静态博客网站,并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客. 使用github部署静态页面 在了解hexo之前,我们先看看如何使用github部署静态页面. 注册github账号 访问github官网注册一个账号,该流程和一般网站注册账号一样,在此不赘述. 创建一个git仓库 其他项如果需要可以自主填写,这里只填写仓库名,点击Create repository创建仓库. 提交一个测试页面 执行git clone命令将仓库克隆

使用github + Octopress 搭建免费博客 + 碰到问题的解决方法

使用github + Octopress 搭建免费博客,先说碰到的问题,具体创建方法见下面. 问题1, 添加ruby淘宝链接问题,显示无法获取, 解决: source “http://ruby.taobao.org” 需要修改成: source “https://ruby.taobao.org” 问题2,rake setup_github_pages 操作之后没有反应, 解决: 此时需要直接写git://github.com/yourname/yourname.github.io.git 具体配

11个最流行的静态(博客)网站生成工具

11个最流行的静态(博客)网站生成工具 最近特别流行使用静态网站搭建博客,本博客就是host在GitHub Pages的静态网站.静态网站非常适合专注于内容的网站,例如,博客.那你可能会问,为什么不用大名顶顶的wordpress(动态网站)呢. 静态网站和动态网站相比有如下好处: 省钱.静态网站占用的系统资源少.如果挂到github pages上,只要注册一个域名就可以了. 速度快.不经过php解析器,不用数据库,速度自然比动态网站快 安全.由于静态网站的简洁,免疫很多web攻击方式. 服务器端

windows上使用mkdocs搭建静态博客

windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdocs的环境搭建过程 项目地址:https://github.com/mkdocs/mkdocs 介绍:英文版----http://www.mkdocs.org/ 中文版----http://markdown-docs-zh.readthedocs.io/zh_CN/latest/ 使用环境:win8.

Hexo+Github/Coding免费搭建个人博客网站

体验更优排版请移步原文:http://vblog.win/blogs/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把平时遇到的问题和解决问题的方式方法记录下来,顺便提升自己的表达能力.总结能力:另一方面,个人博客就像是自己在网络世界中的一个小家,一个完全属于自己的空间,你可以在这里尽情发挥,别人可以通过它来了解你.前段时间偶然间发现了Hexo,看了两天官方文档,参考网上教程,搭建了自己的个人网站:http://

将纯文本转化为静态博客网站 - Jekyll Now

Jekyll Now - 将纯文本转化为静态博客网站 参考官方网站:http://jekyllcn.com/ 安装 ruby: cd /usr/local/src wget http://cache.ruby-lang.org/pub/ruby/2.1/ruby-2.1.4.tar.gz tar -xvf ruby-2.1.4.tar.gz ./configure -prefix=/usr/local/ruby-2.1.4 make make install #解压文件 tar vfxz rub

阿里云+wordpress搭建个人博客网站

文章来源:http://www.cnblogs.com/smyhvae/p/4965163.html 原文服务器准备部分去掉了,记录重要部分留作回头整理. 版本情况如下: 阿里服务器web环境一键安装包 官网购买地址: 分享:https://files.cnblogs.com/files/wowind/sh-1.5.5.zip wordpress: 官方下载地址:https://cn.wordpress.org/ phpMyAdmin: 官方下载地址:https://www.phpmyadmin