今天给大家伙儿分享一下我最近捣鼓的一个小玩意儿——网站静态页面生成。我那个小破站，内容不多，但每次打开都感觉慢吞吞的，我就琢磨着得整整。

为啥要弄这个静态页面？

就是因为我那网站，内容更新不频繁，数据量也不大。每次用户访问，服务器都要吭哧吭哧处理半天，太浪费时间。生成静态页面，用户直接打开的就是现成的HTML文件，嗖嗖的快！

我咋开始的？

我先是把网站的整个结构捋一遍。就像盖房子先得有个图纸，对？我用思维导图，把网站的栏目、页面关系都画出来。然后，又手绘几个草图，大概确定每个页面要放啥内容，长啥样。这一步，就是心里有个底。

准备家伙事儿

• 电脑：这还用说？Windows系统的。
• 代码编辑器：我用的是Sublime Text，挺顺手的。
• 浏览器：谷歌Chrome，调试起来方便。
• 图片：找几张好看的JPG图片，准备放到页面上。

开工！

我先在D盘建个文件夹，叫www,专门放我的网站文件。

第一步：搭骨架（HTML）

打开Sublime Text，新建一个文件，保存为*。这就是网站的首页。然后，我开始写HTML代码。啥是HTML？你可以理解为盖房子的砖头、水泥，把网页的内容一块块垒起来。我写标题、段落、列表，还加图片。

第二步：刷墙（CSS）

光有骨架不行，还得好看，对？这时候就轮到CSS上场。CSS就像是给房子刷墙、贴瓷砖，让网页变得漂亮。我新建一个CSS文件，在里面定义字体、颜色、布局等等。然后，把这个CSS文件和HTML文件关联起来，网页一下子就变样！

第三步：内容填充

我把真正要显示的内容，填充到HTML的各个部分里。比如，文章标题、正文、图片等等。这一步挺费时间的，不过看到页面一点点充实起来，还是挺有成就感的。

第四步：freemarker来帮忙

本来，到上面的一步，一个简单的静态页面就出来。但是我想做多个静态页面，如果每一个都这样手动搭建，那可太麻烦，我才不干，所以要找个简单的方法，最好是能套用模板，然后自动生成静态页面的工具。

找一圈，发现freemarker挺好用，它可以理解为一个模板引擎，我把网页做成模板后，只要把变动的内容部分替换掉就行，非常方便！

在*文件里加这么一段(Maven依赖)：

<dependency>
<groupId>*</groupId>

</dependency>

然后就是创建一个ftl结尾的文件，就当是网站模板。

第五步：检查、调试

全部搞定后，我在浏览器里打开*，仔仔细细地检查一遍。看看有没有啥错误，样式是不是都正常。遇到问题，就回到Sublime Text里修改代码，然后再刷新浏览器看看效果。这个过程可能要反复好几次，直到满意为止。

最终效果

经过一番折腾，我的小破站终于焕然一新！打开速度快多，而且因为是静态页面，安全性也更高。虽然过程有点麻烦，但看到成果，还是挺开心的！

这回就分享到这里，希望能给想自己做网站的朋友们一点小小的启发。做网站没那么难，关键是动手去做！