我写这篇文章的目的是记录本博客的搭建过程,自己从零开始逐步搭建起来了GitHub Pages,其中借鉴了很多的博客和模版,稍后会在后面列出,也为没有用过gihub和jekyll的童鞋提供一点帮助。

学习使用github网页的最好办法就是clone别人的代码,看懂他们的代码,并修改成自己喜欢的样子。这篇文章介绍了windows下从最初安装软件到使用的过程。

下面开始一步步讲解Github Pages的使用流程:

一、安装git工具

下载安装 Git for Windows(选择下载类似于 Git-1.7.*-preview.exe 的文件)
打开安装好的 Git Bash,依次输入:
git config --global user.name "your username"
git config --global user.email "username@email.com"

请确保 name 和 email 信息与在 GitHub 注册时的信息相符。
紧接着创建一个 SSH Public Keys,输入:
ssh-keygen -t rsa -C "username@email.com"
回车后,你会看到类似画面:

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Tekkub/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Tekkub/.ssh/id_rsa.
Your public key has been saved in /c/Users/Tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
e8:ae:60:8f:38:c2:98:1d:6d:84:60:8c:9e:dd:47:81 tekkub@gmail.com

此时,你需要的 SSH Public Keys 就保存在 id_rsa.pub 文件中,找到并打开它,将里面的代码复制到Account Settings 的相应区域。
后面就轻松多了,因为,除非重装系统或换新机器,你都不必再重复操作以上步骤。

二、在windows下安装ruby环境

1). 下载并安装 RubyInstaller for Windows

版本可以选择2.0或者1.9.3都可以。

双击安装,安装时选中“Add Ruby executables to your PATH”前的框将ruby添加到环境变量中。

安装完成后,在 Windows 命令行窗口中执行以下命令,检查ruby是否已经加到PATH中: ruby --version

2).  安装 DevKit

请根据主页上的描述下载对应的DevKit版本,下载后直接解压到没有空格的路径(例如 E:\DevKit),然后在Windows的命令行窗口中执行以下命令:

E:
cd E:\DevKit
ruby dk.rb init
ruby dk.rb install
3). 安装Jekyll和相关的包。

安装完成Ruby和DevKit 后继续安装jekyll,执行如下命令安装:

gem install jekyll

等待安装完成即可。

三、创建git版本库

登录到自己的Github账户,选择New repository,Project Name命名为:”你的用户名”.github.com,例如我的就叫“lslvxy.github.com”。

完成后在本地克隆jekyll-bootstrap模版,运行命令:

git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com

将jekyll-bootstrap模版克隆到本地USERNAME.github.com文件夹下。

然后cd到文件夹内运行命令:

jekyll serve

成功后打开浏览器输入地址:

http://localhost:4000 即可浏览本地生成的页面。

四、关于jekyll-bootstrap模版

jekyll-bootstrap是一个搭建好的模版框架,里面提供了常用的插件等内容,包括google analytics 、disqus等。使用jekyll-bootstrap可以加快个人博客的搭建。

类似的模版还有Octopress ,不过Octopress 安装使用较jekyll-bootstrap要麻烦许多,所以我就使用了jekyll-bootstrap。

jekyll-bootstrap的目录结构分析:

其中includes文件夹下内容为包含文件,其他页面可以直接引用。包含了常用的页面和主题等,jekyll-bootstrap是支持更更换主题的。

layouts文件夹内为布局文件,在每个页面的头部都需要指定使用的布局:

---
layout: page
header : Post Archive
group: navigation
---

---之前不能包含空格等。

posts文件夹为自己写的文章,文件格式必须按照“年-月-日-文章名”进行命名。

_config.yml 文件为必须配置项。

首页为index.md文件。

可以根据自己的实际情况进行修改,可以自定义主题和页面布局等。

五、关于jekyll使用过程中的问题

jekyll是不支持中文编码的,若需要添加中文的话需要修改部分代码:

找到ruby的安装目录,比如我本机的地址:D:\Ruby200\lib\ruby\gems\2.0.0\gems\jekyll-1.2.1\lib\jekyll

下的convertible.rb文件,用记事本打开修改第31行代码为:

self.content = File.read(File.join(base, name), :encoding => "utf-8")

打开D:\Ruby200\lib\ruby\gems\2.0.0\gems\jekyll-1.2.1\lib\jekyll\tags目录下的include.rb文件,

修改第58行代码为:

source = File.read(File.join(includes_dir, @file), :encoding => "utf-8")

这样在include模版中也支持中文格式了。

六、附加插件

由于gitHub只支持静态页面,所以评论内容需要借助外部插件,可以使用jekyll-bootstrap提供的disqus,disqus是国外最流行的一个评论系统。国内的可以使用多说、友言等。

代码高亮插件可以使用

用js插件:DlHightLightGoogle Code Prettify

gist:强烈推荐菜鸟使用,省心省事,支持语言多

pygment:要安装python以及python的包管理软件,又是个大坑,不建议菜鸟使用,尤其是使用windows的

分享插件:国内的jiathis和国外的addthis

图片:国内的yupoopoco,国外的Flickrimgur

访问量统计可以使用CNZZ

七、其他内容

博客想要做的漂亮并且访问量足够的话是需要下很多功夫的,计划着博客中添加Google+,文章搜索等内容现在还没有添加进去,页面效果这些都需要比较扎实的html和css基础。这些就需要靠自己提高了。

暂时先写这么多吧,以后在慢慢添加,如果有什么问题的话可以Q我或者给我Email都可以的哦!

最后附上我搭建博客时参照的网站:

Github Pages极简教程

使用Github Pages建独立博客

搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

Jekyll QuickStart

--本篇完--

GitHub Pages 搭建流程-基于jekyll-bootstrap的更多相关文章

  1. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

  2. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  3. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  4. 基于 Hexo + GitHub Pages 搭建个人博客(三)

    一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...

  5. 使用 jekyll + github pages 搭建个人博客

    1. 新建 github.io 项目 其实 github pages 有两个用途,大家可以在官方网页看到.其中一个是作为个人/组织的主页(每个账号只能有一个),另一个是作为 github 项目的项目主 ...

  6. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  7. 使用github pages搭建个人博客

    一.环境准备 使用Github Pages搭建个人博客,一劳永逸,可以让我们更加专注于博客的撰写.博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的,所以我们本地需要 ...

  8. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  9. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

随机推荐

  1. magento app开发遇到的问题及解决

    今天一直在解决Magento的APP接口调用数据异常的问题,调用/api/rest/category/:id 这个接口的时候,返回的所有目录的数据是一样的,原始代码是这样的. 1)请求地址 /api/ ...

  2. SQL Server 利用批量(batchsize)提交加快数据生成/导入

    在最小化日志操作解析,应用的文章中有朋友反映生成测试数据较慢.在此跟大家分享一个简单的应用,在生成数据过程中采用批量提交的方式以加快数据导入. 此应用不光生成测试数据上,在BCP导入数据中,复制初始化 ...

  3. Aspect Oriented Programming (AOP)

    切面”指的是那些在你写的代码中在项目的不同部分且有相同共性的东西.它可能是你代码中处理异常.记录方法调用.时间处理.重新执行一些方法等等的一些特殊方式.如果你没有使用任何面向切面编程的类库来做这些事情 ...

  4. jquery模拟操作——trigger()函数

    在页面中很多效果需要触发才能实现,比如click后的弹窗.但有时我们无法点击或是跳过用户触发,就像网页中那些可恶的广告弹窗 trigger函数可以实现模拟操作.譬如常用的点击动作,我们可以这样, $( ...

  5. Prince2的七大原则(7)

    [Prince2科普]Prince2的七大原则(7) 2016-12-12 光环组织级项目管理 按照惯例我们先来回顾一下,PRINCE2七大原则分别是指:持续的业务验证,经验学习,角色与责任,按阶段管 ...

  6. ATI Radeon HD 5450 with full QE/CI Support ( 转载 )

    ATI Radeon HD 5450 with full QE/CI Support - DSDT (Contains HDMI Audio Edit Too) & AGPM included ...

  7. 遗传算法在JobShop中的应用研究(part1: 绪论)

    1. 什么是JobShop问题 Job,中文翻译成工件.一个工件又由若干道工序加工完成. resource, 资源.在本文的车间调度中资源指的是机器,每道工序要在某个特定机器上加工. Constrai ...

  8. INSTALLMENT of QValue

    ############################################ INSTALLMENT############################################ ...

  9. 从C语言快速学PHP

    PHP是解释性语言,是Web开发中常用的语言.对于web编程,建议学习时参考w3cschool的在线api手册. PHP和C语言及其相似,懂C的人只要稍加学习就能写出简单的PHP程序.以下是PHP与C ...

  10. jdom xml解析

    import org.jdom.Document; import org.jdom.Element; import org.jdom.input.SAXBuilder; import org.xml. ...