象写程序一样写博客:搭建基于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. 【云计算】Docker删除名称为none的Image镜像

    先上删除命令: docker images|grep none|awk '{print $3 }'|xargs docker rmi docker强制批量删除none的image镜像   真是有段时间 ...

  2. 【SpringMVC】SpringMVC系列11之Restful的CRUD

      11.Restful的CRUD 11.1.需求 11.2.POST转化为PUT.DELETE的fileter 11.3.查询所有 11.4.添加 11.5.删除     优雅的 REST 风格的资 ...

  3. Dynamic Web Module 3.0 requires Java 1.6 or newer

    在maven工程的pom.xml文件中加入如下代码: 在<build>里面加入如下代码: <plugins> <plugin> <groupId>org ...

  4. 26.打印所有和为S的连续正整数序列[FindContinuousSequencesWithSumS]

    [题目] 输入一个正数n,输出所有和为n连续正数序列.例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以输出3个连续序列1-5.4-6和7-8. [分析] 这是网易的一道面试题.这道 ...

  5. php抽象类的简单应用

    抽象类也是面向对象中的重要概念,和接口.继承的概念重要性相当,在面向对象的开发中,所有的对象都是通过类来描述的,但是反过来,并不是所有类都是用来描绘对象的,广义上讲如果一个类中没有足够信息来描述一个具 ...

  6. hdu 1022 Train Problem I 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1022 又是一道栈的练习,这次也是没有用到STL中的栈来实现.用来保存操作过程的数组(process[] ...

  7. commons-fileupload实现文件上传下载

    commons-fileupload是Apache提供的一个实现文件上传下载的简单,有效途径,需要commons-io包的支持,本文是一个简单的示例 上传页面,注意设置响应头 <body> ...

  8. CI中REST URL含有中文怎么处理(报错:The URI you submitted has disallowed characters)

    解决方法: 客户端在发送GET URL请求的时候,将含有中文的URL编码即可 比如: 原始:http://localhost/qk/rest/user_album_api/get_user_album ...

  9. Laravel 4 系列入门教程(一)

    默认条件 本文默认你已经有配置完善的PHP+MySQL运行环境,懂得PHP网站运行的基础知识.跟随本教程走完一遍,你将会得到一个基础的包含登录的简单blog系统,并将学会如何使用一些强大的Larave ...

  10. Android学习 之 startActivityForResult 和 onActivityResult

    startActivityForResult 和 onActivityResult() 作用:主要用于 主Activity向调用的 子Activity 获得数据. 使用方法:在 主Activity写 ...