利用github pages,Jeyll打造个人专属博客

"使用github pages服务和Jeyll搭建一个不限流量的个人博客"

Posted by Mzx on July 22, 2016

利用github打造个人专属博客

当你浏览大牛的个人站点时,是否有过搭建一个属于自己的博客的欲望?当你搜索某bug的解决方法时,是否发现很多都是一些老旧的或者讲解不够彻底明白的文章,此时有木有想自己写一篇准确详实blog供后人乘凉?不管你是否有此想法,既来之者安之,接下来看我们如何利用github打造一个个人专属blog

step 1 创建一个新的仓库(repository)

方法如图:

create

注意:

  • repository的名字必须为“owner”.github.io。只有这个样才会被github pages服务识别,因为我已经创建过一个同名的repository,所以这里提示我已经存在。
  • Add .gitignore :这个是添加提交代码到github时,需要忽略的内容。因为有些内容是个性化的,不适合提交到repository

以上操作都完成后点击Create repository。在你的repository里添加一个新的文件,名字为:“index.html”。随便写点内容。操作如图: add index.html edit index.html create index.html 注意: 上图第一幅图里边的内容刚创建是不存在的。

添加完成后,在respository里会出现一个名为index.html的文件。在浏览器里输入amenema.github.io,就会显示出index.html的内容。此时你的专属blog已经完成一半了。

step 2 使用Jeyll美化你的blog

Jeyll是一个静态站点生成器。可以理解为一个服务器。它能够运行在github上。配置好Jeyll后,我们就可以专注于内容,而不需要操心页面的样式等问题了。
使用Jeyll最简单的方法,就是下载他的主题。选择一个你喜欢的主题,只需要少量配置,上传到github就可以开始写blog
我们以jekllDecent这个主题为例,讲解一下,大概如何配置主题。 下载该主题并解压后我们可以看看文件夹里都有神马东西呢? jeyllDecent

  • _config.xml : Jeyll的配置文件,里边有些信息需要改成我们自己的
  • _data : 这里边包含了一些基础配置信息,跟 _config.xml类似。有的主题没有。
  • _includes, _layouts : 这里边是主题的html页面。一般不需要改动。
  • _pages : 这里边是页面的具体内容,如 about.md等,需要改成自己的信息。
  • _posts : 这里边是放博客内容的地方。采用markdown编写。在文件命名是有一个要求,就是必须是“2016-01-01-myblog.md”格式。前边是日期。后边是博客的名称。只有这样才能被Jeyll识别。识别后的标题会去掉前边的日期。只显示后边的博客名称。
  • favicon.ico : 是网站的icon,他会显示在浏览器的标题栏上。文件不需要太大。一般32*32px就可以,太大加载缓慢。
  • 404.html, index.html : 这两个页面分别是网站的404页面和首页。
  • robots.txt : 这个文件是用来指示爬虫爬取网站的,如果不知道如何使用请删掉,删掉后并不影响网站。
  • 剩余内容 : 上图中没有在这里列出来的内容都是一些基本不需要修改的信息。如样式表,js等。

将主题信息修改完成后就可以上传到github了。然后看看还有什么没有修改的地方,有什么错误等等。

至此我们的blog已经搭建完成了。只要在_post里边使用markdwn写文章就可以了。

step 3 绑定域名

目前你的博客的网址是github的二级域名。如果想拥有一个个性化的域名。可以申请一个域名并将域名绑定到博客上。那么如何将域名绑定到你的blog呢?
首先登录DNSPOD。依次点击:“域名解析”–>”添加域名”。输入要绑定的域名并提交。 然后点击域名列表里的域名进入域名解析配置页。分别添加两条记录。 如图所示 dnspod

注意 :

  • 线路类型选择“默认”,记录类型选择“CNAME”,记录值填写你的blog地址。
  • 主机记录分别填写 “@” 和 “www”
  • 在你的项目根目录下新建一个名为“CNAME”的文件,不要任何后缀名。然后写上你的域名。不要带“www”。然后提交到github。

这样访问你的域名就可以跳转到你的博客上了。

step 4 被百度爬取

github屏蔽了来自百度的爬虫。所以我们的博客是无法被百度收录的。即别人无法通过百度搜索到你的博客。那么该如何解决呢。

有一种比较简单的方法是上传一份代码到coding.net。我目前采用的就是这种方法。coding.net是国内的一款项目管理。demo演示平台。也提供了类似github的服务。
其实也可以直接将blog搭建在码市上。他也提供了page服务,搭建方法与github相同。不过有一点区别是github是将代码放到master。而码市则是将代码放到coding-pages分支上。具体使用方法请参见使用说明:coding.net pages 使用说明
提交代码以后我们需要将百度的访问路径映射到这个网址上。这就需要我们在dnspod上添加两条记录。主机记录和记录类型和之前绑定域名时添加的内容相同。不同的是“线路类型”均选择“百度”,记录值填写为coding.net提供的网址。如我的网址为amenema.coding.me

step 5 添加评论插件

目前我用的评论插件是多说。使用方法很简单。注册账号。将评论代码复制到需要添加评论的页面即可。

step 6 性能优化

其实通过域名绑定后我们的博客性能已经非常好了。但是还可以做的更好一些。主要体现在一些图片。css/js的优化上。

  1. 将一些第三方的js/css文件改为引用开源的CDN平台提供的网址。我目前使用的是bootCDN
  2. 将个人的js、css、图片等放到七牛上。

结语

至此你便拥有了一个专属个人的blog。文章内容如有不当之处欢迎斧正。