零基础Github Page免费无限流量个人博客搭建教程

这篇文章主要介绍了什么是Github Page,以及如何用Github Page搭建一个免费的、无限流量的个人博客并绑定独立域名。

一、前言

1.1 为什么要用Github Page搭建博客

借用阮一峰的话说,

喜欢写Blog的人,会经历三个阶段。

1. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。

2. 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。

3. 第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

那么Github Page无疑就是第三个阶段最Geek范儿的选择了。

1.2什么是Github Page

简单的说,Github是一个具有版本管理功能的代码仓库,每个项目都有一个主页,列出项目的源文件。

但是对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。

他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。

因此,github就设计了Pages功能,允许用户自定义项目首页,用来替代默认的源码列表。

所以,github Pages可以被认为是用户编写的、托管在github上的静态网页。

二、安装本地Git环境

2.1 安装MyGit

首先在Github上注册账号,然后下载Windows下的Git客户端MyGit,一路next至安装完毕。

找到桌面的Git Bash,双击打开,熟悉的命令行界面就出来了。

image6

使用cd命令进入你想要的目录,比如我进入了d:/working/Git

2.2 修改Git Bash默认工作路径

值得注意的是,一般情况下打开Git Bash后默认的路径一般都是C:/Users/用户名,每次工作都得切换到常用的目录下,此操作是重复且没有意义的。

我们打开Git安装位置\etc\profile文件,找到

# normalize HOME to unix path
HOME="$(cd "$HOME" ; pwd)"
export PATH="$HOME/bin:$PATH"

增加两行,修改后结果如下:

# normalize HOME to unix path
HOME="你想要修改的HOME路径"
HOME="$(cd "$HOME" ; pwd)"
cd
export PATH="$HOME/bin:$PATH"

更多的修改路径及自定义Bash路径变量,参考这里

至此,本地的Git环境已经搭建完毕。

三、配置Github

3.1 本地生成SSH公钥

为了保证与服务器通信的安全,Github只提供HTTPS和SSH两种连接方式,这里我们使用SSH。

在Git bash中输入

$ ssh-keygen -t rsa -C "your_email@youremail.com"

看到以下信息,输入你的Github密码:

# Creates a new ssh key using the provided email Generating public/private rsa key pair. 
Enter file in which to save the key (/home/you/.ssh/id_rsa):

Enter passphrase (empty for no passphrase): [Type a passphrase] 
Enter same passphrase again: [Type passphrase again]

然后你在你的目录下会发现有一个.ssh目录,里面有一个id_rsa文件和一个id_rsa.pub文件,说明SSH私钥和公钥已经成功生成了。

3.2 将SSH公钥添加到Github

在Github网站上找到Account Setting -> "SSH Keys" -> Add SSH key,将id_rsa.pub中的内容粘贴到key一栏,点击add key按钮。

在Git Bash中输入以下代码测试:

ssh -T git@github.com

如果你看到了以下结果,说明成功了:

The authenticity of host 'github.com (207.97.227.239)' can't be established. 
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. 
Are you sure you want to continue connecting (yes/no)?[Type yes]

Hi username! 
You've successfully authenticated, but GitHub does not provide shell access.

四、创建你的Github Page

登录https://github.com/yourname,点击Repositories -> New创建一个新的仓库。

注意,Repository name一定要设置为yourname.github.io,其他选项默认,点确认

然后在这个仓库的页面https://github.com/yourname/yourname.github.io的右边栏点Settings

往下拉找到GitHub Pages -> Automatic Page generator,一路Next即可

等几分钟,访问http://yourname.github.io就能看到你创建的页面了。

五、本地修改网页和上传

在仓库页面右边栏,有一个SSH clone URL,将里面的内容复制下来

在Git Bash中输入:

$ git clone 你复制的内容

看看你的工作目录下,Github帮你自动生成的网站就被复制下来了,目录结构类似于:

--images
--javascripts
--stylesheets
  index.html
  params.json

尝试更改一下index.html,比如将

<title>Test</title>

改成:

<title>我的博客</title>

然后在Git Bash里面依次输入下面三个命令

$ git add -A
$ git commit -m "change title of index.html"
$ git push

这三个命令的意义及更多git命令的用法,见这里

上传完毕后,等几分钟,刷新页面,就会发现页面的标题已经变成“我的博客”了。

六、自定义博客的主题和页面

Github Page只是一个静态页面托管服务,也就是说不能运行php和mysql等程序。

Github Page允许站内生成网页(比如我们刚刚做的那样),

也允许用户自己编写网页上传,只不过上传的网页会经过Jekyll程序的再处理。

用Github Page建立博客的思路:

  • 使用Jekyll语言人工编写符合规范的代码上传(不推荐)
  • 使用基于Jekyll的Octopress静态博客系统搭建(推荐)
  • 使用其他基于Jekyll的静态博客主题,比如HPSTR或Hexo(推荐)

这里使用的是HPSTR主题,它的示例链接是这里

它本身就是一个Github Page,我们找到它的git地址clone下来

$ git clone git@github.com:mmistakes/hpstr-jekyll-theme.git

复制它的文件到你自己的文件夹里,然后按照配置提示修改参数、上传即可

HPSTR主题里有几篇默认文章,讲解了一下如何写文章以及一些简单的Markdown语法等等。

其他主题的安装方法也很类似,就不一一说明了。

七、绑定域名

如果你想要显得更Geek一点,还可以绑定独立域名。

假设你已经有一个域名yourname.com,在你的代码仓库的根目录下创建一个名为CNAME的文件,注意没有后缀名。

里面写入你要绑定的域名,比如youname.com

然后前往你的域名托管商处,新增一条CNAME类型的解析记录,指向yourname.github.io

根据域名托管商的默认TTL设置的不同,解析生效需要10分钟至24小时不等。

等解析生效,你就可以使用你的独立域名访问博客了。

(完)

Drupal 7:QuickTabs模块内的元素无法溢出的问题

背景

项目要求网站首页放Views生成的区块,并且要求有更多链接。

Views生成的区块默认的更多链接只能选在列表上方和下方

下图是默认在上方的样式图:

image1

为了美观,我将更多链接上移了若干个像素:

.more-link {
  position: absolute;
  top: 10px;
  left: 390px;
}

效果图:

image2

问题

然而,当我在这个区块外面再套一层区块时,

我这里用了QuickTabs模块,实际上是一个嵌套区块,

这个更多链接怎么都不显示了:

image3

探究

第一反应是z-index的问题,设了z-index还是不显示

Google一下,觉得有可能是position: relative的问题

将其所有父div标签全部加上position: relative属性,仍然不显示

真是百思不得其解

纠结了很久以后,最终将目标锁定在了父div标签的overflow: hidden属性上

CSS Overflow属性的定义:

 值  描述
 visible   默认值。内容不会被修剪,会呈现在元素框之外。
 hidden   内容会被修剪,并且其余内容是不可见的。
 scroll   内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
 auto   如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
 inherit   规定应该从父元素继承 overflow 属性的值。

QuickTabs模块的外层区块使用了overflow: hidden属性

内层元素“溢出”时,内容被div修剪掉了。

它的本意可能是为了不让内层的区块超出外层区块的大小,而打乱整个HTML文档流。

但是我这里的需求恰好就是要让内层的元素“溢出”来。

解决

QuickTabs外层区块div元素的overflow: hidden改为visible就行了:

.block-quicktabs .content {
  overflow: visible;
}

效果图:

image4

问题解决!

Drupal 7:如何修改Nivo Slider模块的宽高

Nivo Slider模块默认大小是用的height: 100%, width 100%

但IE7及以下的浏览器是不支持百分比宽高的,

而我的项目目标用户基本都是使用XP系统,项目需求是必须兼容IE7。

因此需要对其CSS修改成绝对像素大小。

问题

修改之后却出现了问题,因为用户上传的图片长宽比是不一样的,

指望用户每次上传的时候先用PS裁剪一下明显不现实,

于是我在CSS里将其拉伸了,这样就不会导致图片只显示一部分。

.block-nivo-slider img {
  width: 450px;
  height: 250px;
}

但是Nivo Slider在每次幻灯片切换前图片都会变成未拉伸的状态。

幻灯片切换的时候就会感觉图片在“跳动”。

探究

明明已经写死了img的宽高,为什么切换前会变回来呢?

初步断定是因为Nivo Slider模块在控制切换的JS里有改变图片的宽高。

翻了一下Nivo Slider模块的JS,发现是压缩过的,改起来比较麻烦。

于是又祭出万能的CSS大法了!- -!

解决

仔细分析后,发现JS是在改变img元素的height属性

我们可以用min-heightmax-height属性让height的改变无效:

.block-nivo-slider img {
  width: 450px;
  max-height: 250px;
  min-height: 250px;
}

问题解决!

Drupal 7:Nivo Slider模块报错的问题

Nivo Slider是Drupal的一个制作幻灯片的模块,效果比views slideshow好得多

今天在尝试安装使用这个模块的时候却颇费了一番功夫。

使用Nivo Slider需要安装以下几个模块:

  1. Nivo Slider模块本身,这个不用说;
  2. Libraries API,相当多的模块依赖这个库,应该都已经装了;
  3. Nivo Slider jQuery plugin,这个是Nivo Slider的一些界面动画所依赖的jQuery库;
  4. jquery_update,这个是使当前jQuery库升级到最新版的模块;

问题

问题就出在jquery_update这个模块上,启用这个模块后,我的business主题二级菜单失效了

看了一下浏览器的log,是business/js/superfish.js报错:

image11

探究

打开superfish.js看看:

image12

顶部有版权声明和开源许可,貌似是一个使用jQuery的开源组件?

因为是启用了jquery_update模块才报错的,推测是有可能它使用的jQuery版本与最新版不符导致的。

去网上搜了一下,果然有Superfish这个组件,最新版是1.9

下载下来最新的Superfish.js复制进business/js覆盖,菜单栏果然没问题了。

image13

接下来用Nivo Slider设置首页幻灯片,可是图片是显示,就是不动啊,看下log:

image14

看来还是jQuery的问题,又百度了一下这个错误提示

找到了这个:http://blog.csdn.net/dracotianlong/article/details/18195141

jQuery 1.7版本以后,live接口被删除了,必须换成on

解决

按照错误提示找到sites/all/nivo-slider/jquery.nivo.slider.pack.js

打开,把里面的两处live()改成on(),保存、刷新页面。

bingo,问题解决!

Drupal 7:如何将Custom Search模块水平摆放

项目需要用到自定义搜索框,Drupal自带的区块只能显示一个简单的搜索框,进入到搜索页面才能进行高级搜索。

Custom Search 可以在提供比系统自带搜索区块更多的功能,如下图:

image8

问题

Custom Search 有很多设置选项,标签、显示的文字啊什么的,

美中不足的是,它的排版是垂直排列的,而项目要求这三个元件水平排列,在同一行显示,

探究

我在设置里并没有找到可以水平排列的选项,粗粗看了一眼它的模版文件,也没找到代码位置

那就只好祭出万能的 CSS 修改大法了!

  1. 这三个元件的父div靠右对齐
  2. 文本框左移,分类框上移、左移,搜索按钮上移
.region-header{
  text-align: right;
  margin-bottom: -40px;
}

.form-item-custom-search-blocks-form-1 {
  margin-right: 150px;
}

.form-item-custom-search-types {
  margin: -42px 49px 0 0;
}

#edit-submit {
  margin-top: -28px;
}

效果图

image9

还有问题

但是有个问题,注意到我修改“搜索”按钮的时候是用的id定位的:#edit-submit

后来发现了一些问题,在很多页面——比如文章的编辑页面有别的提交按钮,这个时候这个搜索按钮的id会变成edit-submit--2等,可是它的class也是跟别的提交按钮共用的。跟文本框和分类框不一样,Custom Search并没有给这个按钮自定义class名,我无法精确定位搜索按钮。

继续探究

想了一想,CSS好像有属性选择器,试一下:

input[value=搜索] {
  margin-top: -28px;
}

貌似可以了,嗯,输入文字点击,进到高级搜索和搜索结果页面:

image10

摔!所有的搜索按钮都跟着上移了….

在这个问题上卡了半天,一直在琢磨怎么定位这个搜索按钮…

解决

突然灵光一闪,CSS是不是还有个兄弟元素选择器啊?

试试看:

.form-item-custom-search-types+.form-actions {
  margin-top: -28px;
}

bingo!完美!

…好吧,我承认这样写代码有点傻….不过好歹问题解决了!~

最后的最后

update 2014-4-25 :

果然有点傻,把三个框全部设display: inline就行了….