使用静态网站作为个人博客一直是我的梦想,因为牵涉到数据库的动态内容实在不太容易学习。得益于GitHub Pages和Jekyll,这个想法得以实现。
关于如何使用两者创建网站在网上可以搜到很多好的文章和教程,本文的目的在于尽可能罗列所有需要用到的东西,将我建站以来所学的内容做一个总结和简介,并且推荐一些学习的途径,以便帮助同样想要自己建站的朋友。
创建静态网站
创建一个网站所需要的最重要的东西就是存放网站主体的服务器,其次才是搭建。我个人喜欢将搭建网站比作盖房子,那么先让我们来找块可以盖房子的平地。
小知识:什么是静态网站?
GitHub
如果你是程序员,也许对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算了的念头。但是只要坚持不懈地一点一点学习,自己建站也不是什么难事。我的整个网站花了差不多一年才基本建立起来,都是我有事没事一点一点学习的成果。
那么在建站过程中遇到问题怎么办?百度娘和谷歌娘会很乐意帮助你的~也可以给我留言,只要是我会的,我会尽力回答。
最后的最后,请务必牢记,任何在线服务都会有停止的一天,所以请谨慎选择,并且尽可能在自己的电脑上做好数据备份,也要想好备用方案!