使用静态网站作为个人博客一直是我的梦想，因为牵涉到数据库的动态内容实在不太容易学习。得益于GitHub Pages和Jekyll，这个想法得以实现。

关于如何使用两者创建网站在网上可以搜到很多好的文章和教程，本文的目的在于尽可能罗列所有需要用到的东西，将我建站以来所学的内容做一个总结和简介，并且推荐一些学习的途径，以便帮助同样想要自己建站的朋友。

创建静态网站

创建一个网站所需要的最重要的东西就是存放网站主体的服务器，其次才是搭建。我个人喜欢将搭建网站比作盖房子，那么先让我们来找块可以盖房子的平地。

小知识：什么是静态网站？

GitHub

https://github.com/

如果你是程序员，也许对Git（分布式版本控制）不会陌生。GitHub本身并非网站服务器，而是一个使用了Git版本控制的代码仓库，可以存放你的源代码。免费和收费用户的区别主要在于能否创建私人代码库，作为个人博客，我并不在意我的网站代码是否开源，所以作为第一步，免费而且不限流量的服务器就找到了。

事实上，除了存放代码以外，GitHub还专门提供了GitHub pages功能，使用了Jekyll博客引擎来创建静态网站站点。这正是我们梦寐以求的！

Jekyll

英文主页 中文主页

“静态”二字原本和博客是很不搭的，撰写和管理日志都意味着网站需要有动态元素，也就是需要有数据库。但是有了Jekyll，纯静态博客就成为现实了。

Jekyll是一个使用Ruby语言开发的静态博客引擎，我们只需要像编程一样写好一个网站模板，然后将日志放在特定文件夹，Jekyll就可以自动将其转化成一个完整的静态网站。每当我们更新存放在GitHub上的网站代码的时候，GitHub Pages就会自动使用Jekyll引擎更新生成静态网站。在自己的电脑上也可以搭建一个jekyll的本地环境，在上传前可以在本地先预览一下。

虽然搭建本地环境的时候可能会有些麻烦（因为要安装Ruby），但是学习Jekyll本身并不难，在Jekyll的中文主页里，你可以找到建站所需要的基础教程。另外在网上也可以找到不少别人的Jekyll模板，只要作者许可就可以直接拿来使用或改造。

域名（可选）

你可以选择直接使用[username].github.io来作为博客的网址，但是拥有一个属于自己的域名不是更好吗？目前我使用的是万网的.com域名，费用并不贵，还不及去外面吃一顿饭的钱……绑定域名的教程在网上可以找到很多，可以搜索关键词：“Github 域名”。

这样一来，我们就为网站打好了地基。关于GitHub+Jekyll建站的基础教程，我推荐这篇文章：搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门

需要学习的语言

有了地基，接下来就可以着手盖房子了。现在的网页技术日新月异，可以让网页变得极其生动和美观，但是也需要学习不少语言。基本上，一个博客网站的建立需要以下几个步骤：

• 第一步：网站需要有最基本的结构和内容表现（HTML+CSS+Liquid）
• 第二步：为表现添加行为（Javascript）
• 第三步：持续维护（写文章）

HTML5 + CSS3

搭建网站需要有一定的基础，最起码也要了解一点HTML（超文本标记语言）和CSS（层叠样式表）。HTML语言用来创建网页结构，而CSS用来创建网页的外观。多年以前曾经看到文章，提倡网页结构和表现的分离，当时没太理解，后来学习CSS的时候就恍然大悟了。

举个简单例子：要在网页中创建一个按钮，只需要写入html代码
<button type="button" class="button_sample">点我</button>
即可，告诉浏览器网页中存在一个按钮，这是结构。
通过CSS为按钮创建button_sample样式，我可以改变按钮的位置、背景、鼠标事件等，让它看上去和一个超链接一模一样，这样的伪装就是一种表现。

而.html和.css是两个分开的文件，所以我们就可以通过修改CSS，让一个网页表现出不同的样式，博客主题就是这么创建的。此外现在你在网页上所看见的动画效果，很多都是通过CSS制作的，而非以前的flash，这样就大大减小了网站的体积。

所以学习HTML和CSS语言是最最基础的，目前强烈推荐使用HTML5+CSS3来创建网站。至于去哪里学习这些东西，网上有大量关于使用HTML5+CSS3建立网站的教程，我建议是，可以先找一些基础教程看看，等到入门了之后，我推荐直接去这里：W3School

Liquid

Jekyll使用Liquid模板渲染引擎来生成静态网页，所以我们为了实现博客功能我们就需要在html代码中加入Liquid语言。举个例子，一段包含着Liquid语言的html代码看上去是这样的：

这段代码的意思很简单，按时间倒序列出站点的所有文章，显示每篇文章的写作日期、链接及文章标题（大于20字符则显示省略号），这不就是我们想要的博客吗？

Liquid语言学习起来并不难，推荐两个地方：
Jekyll常用变量（中文）、Liquid for Designers（英文）

Javascript / jQuery

有时候我们想要的动画效果只用CSS还不足够，这就需要Javascript了。Javascript和Java其实没什么关系，它是一种网页脚本语言，用在静态网页中常用来实现丰富的网页特效，比如图片的放大、页面平滑滚动、时间线等等。并且我们可以在html代码中直接加入Javascript，目前的主流浏览器都会自动处理这些代码。

比如点击左上角的那只灵梦，就可以回到顶部，这就是我想要实现的一个行为。

但是Javascript不是太容易学习，要做出优秀的特效往往需要写大段代码，jQuery的出现则大大改善了这种情况。jQuery实际上是一个JavaScript函数库，它提供了很多一个网站所常用的特效函数，而且很容易学习，这样一来，新手也可以很容易地实现网页特效。

学习JavaScript、学习jQuery、获取jQuery

Markdown

如果不写文章，博客就失去了生机。

但是我们要写的日志本质上也是html，试想一下如果在写文章的时候还要打<p></p>这样的代码，谁会愿意经常更新呢？所以我们需要使用Markdown语言来写日志，这是一种标记文本，比如## 这是一个2级标题就会自动被翻译为html语言的<h2>这是一个2级标题</h2>。

而两个井号就是一种自然语言的标记，它告诉编译器，这是一个2级标题。Markdown标记语言被广泛应用于很多地方，甚至平时手写购物单的时候，也可以使用这种标记语言，而编译器就是我们的大脑。

Markdown语言的特色可以参考这篇文章：献给写作者的 Markdown 新手指南
Markdown教程：Markdown语法说明（简体中文版）

但是原生的Markdown并不能满足我们所有的需要，比如没有表格功能。不怕，GitHub为我们准备了redcarpet解析器和GFM语言（Github Flavored Markdown）。

关于这两个扩展，可以参考我的这篇文章：redcarpet设置&GFM语法
因为是备忘，写得很简略，但是最后链接的几篇参考文章写得都很详细。

外链支持

到目前为止，房子已经可以封顶了，接下来当然还需要装修，之后就竣工了。

图片/音乐外链

图片甚至音乐是点缀网站最重要的元素。

图片一般分为两类。第一是网站的页面元素，比如组成网页主体结构的图标、背景等重要素材，这些请务必放在GitHub中，因为它们是房子的砖瓦，一旦外链失效将会造成很可怕的后果。一般来说，这些图片都很小，我目前整个网站的图片素材才500K都不到。

而另一种就是文章所需用的图片甚至音乐，因为GitHub空间有限，就必须使用外链了。
可以看我的另一篇文章：外链解决方案

第三方评论插件

静态网站是没有数据库的，而且GitHub也不支持涉及到数据库的动态内容，所以像评论这样的东西就需要使用第三方插件了。国外的普遍都推荐使用Disqus，国内的可以使用多说。我使用的就是多说，因为可以和国内其他的社交账户关联，而且服务真的很不错。

使用软件

工欲善其事，必先利其器！选择合适的工具也是至关重要的。

Dreamweaver 等网页编辑软件

从开始学习写网页已经十几年了，Dreamweaver一直是我最喜欢的网页编辑软件，曾经的网页三剑客唯一得以存活下来的。其方便的代码写作功能和其他辅助功能（比如自动整理代码）可以让我编写网站的时候倍感舒畅。

当然你也可以使用其他喜欢或者惯用的网页编辑软件，甚至是记事本，或者emacs。

Photoshop 等图形处理软件

图形是网页重要元素之一，制作得当的图形素材，比如背景图案、图标等，可以让网页变得精致和美观，所以Photoshop等图形处理软件也是必需的。

Markdown 语言编辑器

Markdown语言有很多专门的编辑器，比如我正在使用的MarkdownPad 2，可以一边写作一边预览最终效果。免费版虽然有一些限制，不过已经足够用了。

Notepad++

我想大声地说：记事本赛高！！当然了，虽然记事本很强大，但也不是万能的，Notepad++的出现则很大程度上弥补了记事本的不足。多标签浏览、语法高亮、丰富的插件，这些功能使它成为更加强大的记事本。而且它是免费的！

但是我在这里推荐它的原因是，试想一下，假如有几百篇日志，意味着几百个markdown文档，而我想把所有日志当中的“tag: 标签1”更改为“tag: 标签2”，你肯一个一个修改吗？Notepad++提供了一个文件查找/替换功能，可以搜索一整个文件夹下的所有目标文档，并把其中的“tag: 标签1”全部自动更改为“tag: 标签2”，很便利，不是吗？

其他需要了解的知识

这些知识都是在网站建立后，为了优化用户体验、提高访问量等目的所需要了解的。

网站优化

网站布局是否合理、是否有死链接、是否被搜索引擎收录等这些问题都需要对网站进行优化。

Google站长工具、Google Analytics、百度站长工具等这些工具都可以帮助我们了解网站是否有问题，被搜索引擎收录了多少页面等。当然了，谷歌娘已经……

SEO

SEO全名为Search Engine Optimization，搜索引擎优化。

有时候我们写的文章是为了让有需要的人搜索到/看到（我希望这篇也是）。而自己建立的网站想要被搜索引擎收录索引，并让其他人可以搜索到，提高搜索排名，就需要学习SEO了。比如提交站点地图sitemap就是一个典型的方法，其他的我也在学习中……

RSS订阅

通过RSS订阅可以让其他人第一时间看到网站的更新，用过阅读器的人一定对RSS不陌生。

最后……

真的是好多好多……相信我，就算你是使用Wordpress搭建博客，也同样需要了解这么多知识，最多也只少一点点，因为我在找资料的时候很多时候都会找到给Wordpress的方案。

对于博客引擎的选择是没有完全的好坏之分的，Jekyll虽然强大，但是和GitHub Pages搭配的时候有不少局限，我在建站期间遇到过各种困难和挫折，也有过想干脆使用Wordpress算了的念头。但是只要坚持不懈地一点一点学习，自己建站也不是什么难事。我的整个网站花了差不多一年才基本建立起来，都是我有事没事一点一点学习的成果。

那么在建站过程中遇到问题怎么办？百度娘和谷歌娘会很乐意帮助你的~也可以给我留言，只要是我会的，我会尽力回答。

最后的最后，请务必牢记，任何在线服务都会有停止的一天，所以请谨慎选择，并且尽可能在自己的电脑上做好数据备份，也要想好备用方案！