象写程序一样写博客:搭建基于github的博客

 

前言

github 真是无所不能。其 Pages 功能 支持上传 html,并且在页面中显示。于是有好事者做了一个基于 github 的博客管理工具:octopress,基本原理是用 git 来管理你的文章,然后最终发布到 github 上成为一个独立博客站点。由于 github 支持 CNAME 域名指向,所以如果有独立域名的话,可以基于这些做出一个专业的博客站点出来。

本博客就是完全基于此搭建起来的,在使用了 2 个月之后,我将原系统根据中国人的需求做了一些配置,去掉了 GFW 会挡住的 google font api,以及替换掉了速度超慢的国外的评论系统,也加上了分享到国内的微博的功能。现在把这些都总结出来,希望大家都可以方便地搭建基于 github 的博客来。

安装

首先说说怎么安装相应的工具。其实这些内容在 http://octopress.org/docs/setup/ 上都有,我只是把它大概翻译了一下。

安装 rbenv

brew update
brew install rbenv
brew install ruby-build rbenv install 1.9.3-p0
rbenv local 1.9.3-p0
rbenv rehash

你有可能需要安装老版本的 GCC 编译器才能顺利安装 Ruby 1.9.3:

brew tap homebrew/dupes 
brew install apple-gcc42

安装 Octopress

首先从 github 上将源码 clone 下来:

git clone git://github.com/imathis/octopress.git octopress
cd octopress # If you use RVM, You'll be asked if you trust the .rvmrc file (say yes).
ruby --version # Should report Ruby 1.9.2

然后,ruby 的软件源 https://rubygems.org 因为使用的是亚马逊的云服务,所以被墙了,需要更新一下 ruby 的源,使用如下代码将官方的 ruby 源替换成国内淘宝的源:

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

然后安装依赖:

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

最后安装 Octopress

rake install

配置

安装好之后可以简单配置一下:

  • 主要是修改文件:_config.yml ,这个配置文件都有相应的注释。主要就是改一些博客头,作者名之类的东西。
    注意最好把里面的 twitter 相关的信息全部删掉,否则由于 GFW 的原因,将会造成页面 load 很慢。
  • 修改定制文件 /source/_includes/custom/head.html 把 google 的自定义字体去掉,原因同上。

设置 github 账号

基于 github 的博客当然需要先注册 github 账号,Github 的账号注册地址是:https://github.com/signup/free 。申请好 github 账号后,建一个名为 username.github.io 的代码仓库。这里注意 username 必须是和你的账号名一致。

写博客方法

然后就可以写博客啦~ 写博客主要是用以下几个命令,这里 有详细介绍:

  • rake new_post[‘article name’] 生成博文框架,然后修改生成的文件即可
  • rake generate 生成静态文件
  • rake watch 检测文件变化,实时生成新内容
  • rake preview 在本机 4000 端口生成访问内容
  • rake deploy 发布文件

博文是采用 markdown 语法,另外增加了一些扩充的插件,markdown 的介绍文章网上可以搜到很多,比如 这个

高级配置

我主要介绍一下如何配置评论和分享到微博功能。步骤如下:

  • 在 _config.yml 中增加一项: weibo_share: true
  • 修改 source/_includes/post/sharing.html ,增加:

     // 下面的大括号是全角的,如果复制,请自行改成半角
    {% if site.weibo_share %}
    {% include post/weibo.html %}
    {% endif %}
  • 增加文件:source/_includes/post/weibo.html

  • 访问 http://www.jiathis.com/ ,获取分享的代码
  • 访问 http://uyan.cc/ ,获得评论的代码
  • 将上面 2 步的代码都加入到 weibo.html 中即可
  • 修改sass/base/_typography.scss,将其中的article blockquotefont-styleitalic改为normal, 因为中文的引用文字用斜体显示其实并不好看。再将其中的ul, ol
    margin-left: 1.3em;修改为margin-bottom: 0em;

其它

对于国内的用户来说,Github 因为服务器在国外,访问速度上不可避免有些慢。我在 2014 年 5 月尝试将博客同时放到 Github 和 GitCafe 上(GitCafe 提供博客服务,而 Github 作为备份服务器),使得国内访问速度非常理想,感兴趣的朋友可以参考这篇文章:《将博客从 GitHub 迁移到 GitCafe》

Tips

####从 wordpress 迁移到 github
这儿有一篇文章介绍了如何做迁移:
http://blog.xupeng.me/2011/12/14/migrate-to-octopress/

图片

如果要在文章中上传图片,直接 copy 到 /source/images 目录下即可。在文章中可以直接引用。也可以选一些大的图床站点,例如 flickr 之类的放在那边。

域名

如果你象我一样有自己的域名,可以将域名指向这个博客,具体步骤是:

  • 在域名管理中,建立一个 CNAME 指向,将你的域名指向 yourname.github.io
  • 建一个名为 CNAME 的文件在 source 目录下,然后将自己的域名输入进去。
  • 将内容 push 到 github 后,第一次生效大概等 1 小时,之后你就可以用自己的域名访问了。

原理

  • Octopress 其实为你建立了 2 个分支,一个是 master 分支,用于存放生成的最终网页。另一个是 source 分支,用于存放最初的原始 markdown 文件。
  • 平时写作和提交都在 source 分支下,当需要发布时,rake deploy 命令会将内容生成到 public 这个目录,然后将这个目录的内容当作 master 分支的内容同步到 github 上面。

参考

这儿还有一些参考的文章:

象写程序一样写博客:搭建基于github的博客的更多相关文章

  1. CS代码代写, 程序代写, java代写, python代写, c/c++代写,csdaixie,daixie,作业代写,代写

    互联网一线工程师程序代写 微信联系 当天完成特色: 互联网一线工程师 24-48小时完成.用心代写/辅导/帮助客户CS作业. 客户反馈与评价 服务质量:保证honor code,代码原创.参考课程sl ...

  2. 个人博客搭建----基于solo

    个人站地址是:http://www.iwillhaveacatoneday.cn 博客是基于开源的Java 博客系统--solo搭建的,这里记录下部署过程中遇到的一些主要问题 后台 solo后台采的是 ...

  3. Mac上搭建基于Github的Hexo博客

    Mac 上搭建基于Github的hexo博客 博客地址:往事亦如风的博客 hexo官方文档 本来想搭一个自己的博客,但是因为服务器真心买不起,所以就使用gitpages搭建一个免费的博客. 环境配置 ...

  4. 【博客搭建】Typecho个人博客搭建,快速安装,超小白(很简单的)

    使用Typecho框架一个月又十二天了,就目前感觉来说,整体还不错,很多方面都支持个性化,二次开发,但是目前MD编辑器有一丢丢问题,不能同步滚动条滚动,就是编辑器区域滚动,预览区域没有动静,需要两边都 ...

  5. w10环境下Hexo博客搭建

    w10使用hexo+github手把手搭建自己的第一个博客 对一个程序员来说,博客的重要性不言而喻,不但可以积累知识,还可以更好的给别人分享自己的心得.今天就以时下比较流行的hexo博客搭建属于自己的 ...

  6. Mac 上搭建基于 Hexo + GitHub 个人博客

    环境配置 本人电脑系统:macOS Node.js 生成静态页面.安装Node.js Git 用于将本地 Hexo 内容提交到 Github.Xcode自带Git(前提:macOS已经安装了Xcode ...

  7. 转 Fira Code | 为写程序而生的字体

    原文:Fira Code | 为写程序而生的字体 Fira Code | 为写程序而生的字体 己短不可藏 6月前 · 1199 人阅读 关注TA 程序员福利!!!今天为大家带来一个专为程序员写程序设计 ...

  8. 【新手/零基础】Hexo+Gitee个人博客搭建教程--详细版

    前言 点此转到--精简版 可能很多小伙伴都有搭建一个属于自己的博客的想法.但是经常是无奈于自己匮乏的知识.但是,每个老手都是新手过来的,再困难的事情,只要肯花一点时间都可以办成. 本次教程分为详细版和 ...

  9. 基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

随机推荐

  1. wsp反编译

    最后出于好奇,我把wsp文件解压缩,看看里面是什么(如果您的机器上的压缩软件不能直接解压,可尝试修改后缀名为cab.).我看到的首先是一个清单文件(manifest.xml),一个DLL文件(Shar ...

  2. 转载一篇关于ios copy的文章

    由于原文创作时间较早,一些内容不实用了,我对其进行了加工,去掉了一部分内容,添加了一点注释. 原文连接 http://www.cnblogs.com/ydhliphonedev/archive/201 ...

  3. 通过Java反射来理解泛型的本质

    集合框架中经常会使用泛型指定集合中所存放元素的类型,保证集合的统一性,从集合中取出元素的时候也避免了类型强制转换的操作,所以我们使用常规的方式来往集合中存放元素的时候,如果指定泛型,那么我们只能向集合 ...

  4. Java for LeetCode 169 Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  5. codeforces B. Flag Day 解题报告

    题目链接:http://codeforces.com/problemset/problem/357/B 题目意思:输入n个人和m场舞蹈,给出每场舞蹈(只有3个人参与)中参与的舞者的编号,你需要为这些舞 ...

  6. UVA 10325 The Lottery( 容斥原理)

    The Sports Association of Bangladesh is in great problem with their latest lottery `Jodi laiga Jai'. ...

  7. 第一章 用记事本搭建C#程序

    1.新建记事本:using System;class Text{ Console.WriteLine("你好如鹏网"); Console.WriteLine("www.r ...

  8. C语言,输入一个正整数,按由大到小的顺序输出它的所有质数的因子(如180=5*3*3*2*2)

    #include <iostream> using namespace std; int main() { long num; while(cin >> num){ ){ co ...

  9. 拷贝Java项目报错

    经常需要将一个项目,导出,然后发给同事,或者是自己用另一个Eclipse工具打开. 这时,导入项目后,就会出现各种各样的问题.大牛笔记:www.weixuehao.com 代码相同,环境不同,主要是修 ...

  10. wp8 导航方法

    全局跳转 (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/Tools/SpatialQueryCha ...