【在主画面加入捷径】
       
【选择语系】
繁中 简中

技术部落格写作:静态网站产生器 (Static Site Generator)

【赞助商连结】

    对于部落客来说,常见的选择就是我们先前提过的自架 WordPress 。虽然这个方案很简单,但这些站台将数据存在数据库中,再由服务器动态生成页面;这类站台很容易变成骇客攻击的目标。由于大部分的部落格文章其实是以呈现静态内容为主,于是出现静态网站产生器 (static site generator) 这种新兴的部落格撰写方式。

    对于不熟网页运作方式的部落客来说,静态网站产生器的概念比较难以理解。相对于静态网页来说,动态网站就是在网站拜访者拜访特定页页时,由网页服务器将远端储存的数据转为网页后输出;而静态网站产生器将输出网页的过程提前在撰写文章的时期,部落客撰写文章后,交由静态网站产生器产生网页,然后将这些网页上载到远端主机即可。对于静态的部落格文章来说,不论网页是动态生成或静态输出,看到的文字、图片等是等效的。

    虽然得到相同的网页,相对于动态网页来说,静态网页有一些额外的优点。因静态网页没有用到后端的程序语言和数据库,因而减少骇客攻击的目标点。另外,静态网页不依赖特定的语言执行环境,几乎所有的站台都可用来储存静态网页;对于相同的内容,所需的硬件资源也较低,无形中减少的建置网站的成本。当然,静态网页不是万灵丹,对于一些需要动态改变内容的网页,像是论坛 (forum)、影音 (video)、网页游戏 (web games)、社群媒体 (social media) 等,就不适合使用静态网页。

    即使适合静态网页的场合,我们也不会直接手刻网页,这样子做的效率太差。这时候,静态网页生成器就可以协助我们生成网页。但使用静态网页生成器需要一些些网页的概念,因此,笔者撰写这系列的文章,希望降低初心者入门的门槛。

    在这里,我们不急着动手做,而先从 50,000 尺的高空来看静态站台产生器的概念。有概念后再开始操作,比较不会盲目地死记指令但却不知其所以然。

    静态站台生成器分为三个部分:

    • 网页内容 (content)
    • 模板 (template)
    • 网页生成引擎 (site-generating engine)

    网页内容就是部落客实际撰写的内容,实际的内容会随着各个部落格的主题而有所不同。为了简化这个部分,通常不会直接撰写网页,而会使用某种轻量级的标记语言 (lightweight markup language),这类语言易学易读易写,通常在数小时至一两天内就可以学会。在这类标记语言中,Markdown 是最流行的,本系列文章之后也会使用 Markdown 来撰写网页。

    为了增加生成网页的效率,通常都会搭配某种模板,以减少撰写重覆的网页代码,使网页更易于维护。由于模板是从网页框架 (web framework) 借鉴而来的思维,对于完全没有网页相关概念的部落客来说,的确会稍微难一些。比起一般的部落格平台,使用模板的可自订性很高,所以这类网站生成模式,受到许多技客 (geek) 的喜爱。不同的站台产生器所使用的模板也相异,换了一套站台产生器后模板有可能要修改,无法继续套用;通常部落客选定某一套站台产生器后,就会持续使用下去。

    网页生成引擎就是软件的核心,除了要写 plugins 或是想自制新的站台产生器以外,部落客甚少需要去知道引擎本身如何实现的,只要知道这类工具的使用概念,偶尔视需要改一下模板就足够了。由于本系列文章的目标是使用站台产生器撰写部落格,我们不会去接触站台产生器的内部实现。

    绝大部分的站台产生器,都没有自己特定的编辑器,直接使用一般程序设计用的编辑器即可。少数硬派的部落客会用 Vim 或 Emacs,若没有学过这两套骇客用编辑器,倒也不需要刻意去学,有许多新生代的编辑器更简单,像是 Sublime Text、Atom、Visual Studio Code 等,笔者目前使用 Visual Studio Code,读者可依照自己的喜好选择即可。另外,这类站台产生器通常要使用命令行来操作,但并不会像电影中的骇客那样使用各种华丽的技巧,只要使用几徊基本指令即可。