授人以渔”的教你搭建个人独立博客——使用jekyll在GitHub Pages上搭建个人博客

 ·   2 min read

网上有不少资源,但大多是“授人以鱼”,文中一步一步的告诉你怎么做,却没有解释为什么,以及他是如何知道的。他们默认着你知道种种专业名词的含义,默认着你掌握着特定技能。你折腾半天,查资料,看教程,一步步下来,有进行不下去的地方,再去查其他人的做法,最终也建立起了自己的独立博客。但却,恍然不知,你用到的技术是什么含义。

我认为,初学者,要想在一个项目中,切实提高自己,需要活用活学。遇到一个专业名词,就去搞懂它,而不是马马虎虎混过去。一个技能点、一个技能点的攻破,然后将点系统的连起来,形成自己的知识网络,不断去细化和扩充。所以,这篇文中,尽力的在“授人以渔”。读者边看边实践之后,一方面,可以搭建好自己的独立博客;另一方面,会学到涉及的知识。前者是实际应用,是至顶向下的过程;后者是基础知识,是自底向上的过程。至底向上与至顶向下相结合,才能融会贯通。我希望在文中表达的,或者说希望读者接收到的,也就是融会贯通的学习能力。

引子

在互联网的世界里,建自己的博客就像是在搭建房子。当然,你可以直接用别人为你建好的房子,比如Tumblr、简书、新浪博客、Lofter、博客大巴等等。

Tumblr和Lofter都是自己比较喜欢的,房子建得美丽又实用。在同一个平台下,就感觉你们在同一个社区。当然不是这个社区居住的人们,也是可以进来逛一逛的。简书,也是如此。顺便提一句,选择简书,是喜欢它的写作体验。

不过,有时候,你想从头到尾自己建房子,就是搭建个自己的独立博客。如果你不知道如何选择,可以读一读《What are the best solutions for a personal blog?》(需翻墙),文章分析了不同博客平台的优缺点和针对人群。当然,我的选择是 Jekyll+Github Pages。

开辟土地、搭建、装修、到注册门牌号等,都是需要动手的。土地就是你的服务器,房子是你的网站,装修是网站主题,布局和色彩等等,当然门牌号就是你的域名了。别忘了你还要写文章,这才是关键,你房间里放的不是家具,而是你的思考成果。

话不多说了,我们开始建房子的美妙旅途吧 ;)

Step 1. 选地

互联网上有免费的地,也有收费的地。Github Pages就是一个免费好用的地。

具体步骤:

  • 首先,注册 Github GitHub

  • 然后,建立一个仓库

NewRespsitory

Repository name(仓库名)必须是 your_user_name.github.io

比如,我的用户名是Yogayu,那么仓库名就取为 Yogayu.github.io这一点很重要,不要弄错。

  • 最后,按照提示步骤操作

一种简单的方式是,下载GitHub的桌面客户端,安装完成后,粘贴链接克隆到本地。

  • 之后,新建一个index.html文件,push到对应的master 分支(推荐官网教程)。等一段时间之后(可以听首歌),网站生效,访问your_user_name.github.io,就能看见完整的网页了。

到此,我们的地就选好了,也就是在用GitHub的服务器。

若这一过程中有问题,可以参照官网文档

什么是 GitHub?

在说GitHub之前,必须要提到Git。Git是分布式版本控制系统。GitHub可以托管各种Git版本库,并提供一个web界面。

Github 就像是程序员们的Facebook,程序员们,写代码,做项目,在此和全世界的人们分享。 会使用GitHub的资源,比会搭建个人博客的价值大得多。

那么GitHub Pages是什么呢?

Website for you and your project.

GitHub Pages有两种。一种是为个人或者组织的博客。一种是为项目的博客。前者一个账号只能建一个,后者,可以建很多个。

这样的博客,免费、独立、安全。

Git和Github如何使用?

可选择终端或图形化界面操作。怎么顺手怎么来吧。

Step 2. 搭建

环境搭建。

  • 安装Ruby,Mac一般默认安装了Ruby,这一步可以忽略。官网安装

  • 安装Bundler,在Terminal中输入: 

     gem install bundler
    
  • 安装Jekyll,同理输入:

     gem source 'https://rubygems.org'
     gem 'github-pages'
    

*当然,如果你在墙内,很容易出问题,无法安装,推荐修改镜像源(淘宝镜像源)。

  • 安装Jekyll

     gem install jekyll
    

在你希望存放的目录下,输入:

jekyll new your-site-name

进入:

  cd your-site-name

运行本地服务:

  jekyll s

在浏览器中输入:

  http://localhost:4000

就可以在本地进行查看和调试你的网站了。

什么是Jekyll?

Jekyll is a simple, blog-aware, static site generator.
Jekyll 是一个简单的博客形态的静态站点生产机器

解释一下,Jekyll可以将纯文本转换为静态博客网站。你整个网站的页面都是它生成的,从主页index到文章post。 比如,文章怎么写?标准网页格式是扩展标记语言HTML。纯手写?未免太麻烦。大家,多偏爱Markdown。所以,就用它写。不过,你需要有一个能把你用Markdown格式写的文章,转化为HTML网页的东西,这里使用的就是静态网页生成器。

静态网页是相对于动态网页而言的,如果感兴趣可以自己学习。

Jekyll目录

解释一下整个jekyll的目录(官方文档): 为了之后不至于完全茫然,很值得先看一看,第一次看不懂没关系,用着用着就知道什么意思了。就像练习吉他和弦的转换,开始很难,可换着换着你就会了。

这个很奇怪的结构是,文件目录树,_config.yml这样的代表一个文件,_drafts这样的代表一个文件夹,与它连接的文件,比如begin-with-the-crazy-ideas.textile,就在文件夹中。一开始,我没怎么看官方文档,嫌麻烦,不如直接开始干。结果是绕了不少弯路,修改主题的时候,找半天各个部分。

先说需要了解的,其余以后依个人需求学习

  • _config.yml 是配置文件,你可以在里面配置你博客会用到的常量,比如博客名,邮件
  • _includes:就是你文章各个部分的html文件,可以在布局中包含这些文件
  • _layouts:存放模板。就是你网页的布局,主页布局,文章布局。当然不是指CSS那样的布局,是指,你包含哪些基本的内容到页面上。包含的内容就是includes里面的文件。
  • _posts: 存放博客文章
  • index:博客主页
  • CNAME文件:域名地址
  • CSS:存放博客所用CSS
  • JS: 存放博客所用JavaScript 

可以设置每个html文件的title(标题)和layout(布局)。比如index的layout一般是default。你也可以添加其他的页面,加上不同的layout。

当你想定制博客的时候,以上目录就很有用了。

如何发表文章?

文章的写法,在Markdown开头加上一段:

---
layout: posttitle: "Welcome to Jekyll!"
date: 2014-01-27 21:57:11
categories: Blog
---

文件命名格式: 时间加标题 比如:2015-08-15-HowToBuildBlog.md

ok,你可以写文章了,放入_post文件夹即可。

Step 3. 装修

如何选择和修改主题?

  • 一种方式是使用程序员们写好的,免费开源。

推荐两个超级丰富的资源

  1. Jekyll 主题
  2. Jekyll 主题搜集
  • 另一种是,你也可以自己写或修改,需要懂一些前端的知识。

之前,我在Codecademy上学了两、三天,进行入门。正好用自己的博客,来做练习。 其实前端还蛮好玩的,特别满足强迫症的强迫意愿。 推荐资源:

虽然下了dreamweaver, 没怎么用,不过官网上的教程不错。 推荐使用 Sublime Text, 多么好用的代码编辑器啊,还有一个不错的教程。再配上Jekyll的本地服务器,在Chrome上调试。那感觉~

自己写是好,也要看看别人是如何做的,优秀的网站是如何设计的。文章可以注重注重排版,字体选择,屏幕适配调整等。不过说实在的,个人博客最重要的还是你的文章内容。

Step 4. 定制

如果你已经做到了这一步,那么恭喜你,你的个人博客已经搭建完成。不过要享受折腾的快乐,或想要更好的独特性,就继续进行吧。

如何使用独立域名?

  • 购买域名 著名的有 Godaddy,支持支付宝。在网上可以搜到优惠码。

  • 在你本地网站文件夹中添加一个文件 CNAME,写入你的域名即可。

  • 考虑到我国网络特殊情况,进行域名解析,可以选择dnspod 添加两条A记录(教程),对,就是计算机网络课上学的A记录。在你的Godaddy上看你买的域名,就能找到,两条A记录。

买域名这事,我自己还有点经历。一开始我买了个azureyu.cn的域名,cn是国内的,然后让提交身份证信息,输入各种资料。又要进行网站备份,一大推看不懂的备份名词,最后放弃了。买了个国外的域名azureyu.com,没有了以上复杂环节,马上就可以用了。

如何添加评论功能?

这些平时习以为常的东西,到这都是纯手工制造。 我使用的是Disqus

  • 注册Disqus
  • 点击右侧选择在博客中添加,就会自动获得它为你生成的一段代码,复制它

  • 新建一个名为Comments的html文件,复制进去这段代码,保存到文件夹_includes里去。然后在_layouts的post文件里加入:

其实,就是在你的网页中加入一段代码,加载之后在网页中加入Disqus,就会自动获得它为你生成的一段代码。

要还想添加一些feather就去折腾吧。比如分享、文章目录、代码高亮、标签云、搜索等等。我想到现在,学习这些内容,对你已经很简单了。


最后

个人建议:

  • 多看官方文档,系统清晰很多
  • 利用好而不是滥用搜索引擎
  • 遇见问题,先看看他人如何解决

用一句作为结束:

不要忘记初衷,在折腾之后,表达写作,才是最重要的事情。

参考:

  1. http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
  2. http://beiyuu.com/github-pages/
  3. http://daringfireball.net/projects/markdown/
  4. http://stevelosh.com/
  5. http://jekyllbootstrap.com/
  6. http://gaohaoyang.github.io
  7. http://segmentfault.com/a/1190000000406013
  8. http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html