背景
静态网站顾名思义是由静态页面构成的网站，不涉及到后端数据库系统，页面中的内容在制作的时候就已经写好了。若需要去改某个页面的内容则需要找到该页面的模板文件修改。
最近收到了一个大学老师的消息，问我是否有空能帮她做个课题申报项目网站。我按照了项目开发的流程先打听了老师的项目需求，老师说该项目需求与在大学期间帮她做的那个课题申报项目类似，具体需求内容在此不多介绍了，主要是课题的一些相关内容需要采用网站的形式展示出来。
通过收藏夹打开了大学期间做的那个网站，网站挂靠在校园的服务器上，还能完好的访问。整个网站内容大致有7大板块，每个板块由侧边栏目录导航内容和右侧内容显示区块组成，整个网站大概有30个静态页面。我习惯性的会打开浏览器的控制台看页面结构和源码，发现页面中的资源引入和跳转链接全都采用了相对路径，出现了很多以.和..构成的链接，对我这种有整洁癖好的人引起了强迫症。
老师把四年前的源代码发给了我，我细看源码网站的内容由一个一个静态html页面组成，没有公共的模块内容，页面中的顶部图、导航条、版权栏都分散在各个页面中，没有独立出来。新的需求同样有这三块的内容，修改一处意味着每个页面都得改一次，严重影响了开发效率。基于此寻思着新的解决方案搭建这个静态网站。
技术调研
首先想到的是做这个静态网站能否像写博客那样，利用markdown语法书写各个页面的内容。但考虑到页面中的内容除了纯文本内容外，还包含了pdf文档、视频内容。对整个网站内容大致细分了各个组成模块，发现可以抽出一个基础的模板布局文件，将网站的顶部图片、导航条、版权栏内容单独抽出来，再分别引入到各个页面中，浏览pdf文档与观看视频功能可以制作成组件，在页面中通过使用组件就能方便快捷搭建内容。
基于上述的需求诉求，我采用了模板引擎来完成这些内容。模板引擎是个什么东西呢？模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。置换型模板引擎实现简单，但其效率低下，无法满足高负载的应用需求（比如有海量访问的网站），因此还出现了“解释型”模板引擎和“编译型”模板引擎等。模板引擎又分为前端模板引擎和后端模板引擎。后端模板引擎针对各种语言分别有相对应的模板引擎，像PHP语言比较知名的smarty，Java语言Velocity，Python语言Django等等。常见流行的前端模板引擎有artTemplate、Mustache、HandlebarsJS、EJS、Jade（新名pug）、Swig等等。
静态网站不涉及到后端内容，选用前端模板即可解决问题。那这么多前端模板引擎如何选择才能找到一个合适的模板引擎呢？在开发中有良好的运行调试能力，支持模板继承和文件引入，支持作用域变量和判断循环条件语句，拥有简洁的语法在一定条件下能减少代码书写量，拥有上述这些特点的模板引擎都能支撑起业务开发，于是我选择了pug模板引擎。
实践思路
目录规划
对一个静态网站来说，资源包含静态模板页面、样式文件、静态资源（如图片、视频、文档等等）。如何设计整个网站的目录结构对开发效率来说有很大的影响。目前大体上网站的目录结构有两种分类方式，一种是根据功能来划分目录结构，比如某个页面实现所需要的业务组件、样式都放在同一个目录里，这种对于业务功能比较复杂类应用来说尤为方便，资源查找和引用一目了然；另一种是根据文件类型来划分目录结构，这种对于网站文件管理比较方便。
根据这个静态网站的需求来开发，网站内容偏展示，不涉及复杂的页面交互逻辑，以文件类型为目录结构规划网站内容。
开发细节
得益于pug简洁的模板语法和强大的模板功能，pug在这个项目中发挥了很大作用。每个页面都是继承自base layout，其中base layout包括页面banner、nav、footer公用的组件，nav的状态可以通过在具体页面中传入变量实现。每个页面根据实际情况可以划分为侧边导航栏组件和内容区域，从而组成一个个具体的页面。
pdf文件浏览采用开源的pdf.js库，能够实现跨平台在线浏览pdf文件内容。视频文件考虑到文件格式兼容性和在线存储，使用了传统的flash流式播放。封装了这两个组件，在使用的时候采用参数传入的方式来调动功能，从而达到复用。
采用这种继承layout和组件形式开发，节省了很多开发工作量，开发效率得到很大提升，并且易于维护。
构建部署
现在每个网站的开发、测试、上线离不开一个构建部署脚本。node.js的不断发展，生态系统日益壮大，有很多方便快捷的工具可以用于开发构建。本项目用到了将pug模板编译成html内容，css和js文件压缩，浏览器同步自动更新构建工具，基于文件流和任务式自动化构建工具gulp.js，能够简单高效的完成网站的构建与部署。
小结
完成整个网站开发涉及到了方方面面，一点一滴的积累和实践，得到了成长，收获了快乐。