关于博客生成HTML静态化的一些看法

这两周,忙着给自己的站点动手术,而且是大手术。五月份,我的小站写好了以后经过线上运行修修补补也已稳定,这个月我给小站生成HTML静态页一是缓解鸭梨,二是试试看。以下就总结这几天生成HTML的一些问题与分享。

采用内容生成静态方式

本来想着生成全页HTML,但由于页面上有动态信息,如随机博文与相关博文、评论以及浏览次数等,于是放弃全页HTML方式,采用部分内容生成静态方式。

当然,也许会有些人会说全页生成HTML方式比较好。如果是全页生成HTML的方式那么就需要在动态内容的地方放入<script>标签指向一个PHP页面,然后由PHP来生成JavaScript写出动态内容,但这样种方式不利于SEO。

如以下案例:

静态页 a.html 代码

<meta charset="utf-8" />
<h3>这里是动态内容</h3>
<div>
<!-- 动态内容部分由PHP生成JS写入-->
<script type="text/javascript" src="g.php"></script>
<!-- 动态内容END-->
</div>
<h3>动态内容结束</h3>

动态业 g.php 代码

<?php
$str = '(function(){';
$str .= 'document.write(\'服务器当前时间:'.date('Y-m-d H:i:s').'\');';
$str .= '})();';
echo $str;
?>

运行 a.html 静态页效果

full

以上即可在HTML页面动态获取服务器时间。但为了SEO,我感觉还是用PHP页面include动态内容比较好,因为蜘蛛看到<script>标签都不太友好。所以我的博文内容页面实际上还是PHP页面,只不过我include包含生成HTML文件进来即可。

目录部署方式

一般个人博客每月发布博文不会有多少,所以通常按月或按年新建文件夹存放HTML文件,切忌不要全部都放在一个HTML文件下,否则当你的博文达到几千篇的时候不易管理。

我采取的是年月创建文件夹方式存放

full

文件夹下以文章ID命名为头部与正文HTML,以c_加ID命名为评论HTML文件。

full

博文内容策略

首先要分析这个页面哪些内容是死的,哪些块的内容是活的,以我的博客内容页为例:

  • 头部标题与正文,即文章标题、关键字、描述的地方以及博客正文需要单独提取生成HTML

full

  • 相关博文、随机博文,由于不想每次都连库,又不能写死,所以只能单独放出来。只要用户点击换一组即可重写此部分的HTML文件达到灵活效果又不用每次都取库
  • 评论,也单独放在一个文件,只要有新的评论活删除评论就重写评论HTML文件即可

完成以上功能以后,在内容页框架下分别include相关HTML即可。

对于点击次数的解决可以Ajax异步请求写库,目前我就是这么处理。

首页分页策略

首页是一个博文索引页,一般没有什么动态内容,所以生成静态页不仅提高页面加载速度还有利于缓解服务器鸭梨。我们可以单独新建一个文件夹,然后按页生成HTML即可

full

如果你担心以后文件多的话也可以分子文件夹方式,如1至1000页在A文件夹1001至2000页在B文件夹等等。只是我感觉这没有多大必要,除非你真的很猛,有十多万篇博文。

在发布、删除、修改博文标题以及简介的时候都要生成一次。特别是发布博文的时候,由于我是按时间倒序的,所以每一页的索引都发生了改变,需要全部生成一次。其实这里也可以改进一下,如页数最小的旧索引,页数最大的是最新的索引,这样的话我们发布新的博文只需要在14.txt文件里重写或者创建15.txt即可。

如:每月按10篇博文分页,你已经发布了10篇博文,那么生成了1.txt,当你再发布第11篇博文的时候你可以把最新的这篇博文生成到2.txt里,1.txt不用理会。但网页上呈现的时候往往第一页是最新的,所以这里你就需要一个倒应算法,当用户点击第一页的时候请求的是2.txt文件,点击第二页的时候请求的是1.txt文件。

由于我的索引里还标上了浏览次数与评论次数,浏览与评论是频繁的,如果每浏览一次就重写一次就失去生成HTML的理念了。那如何既能HTML又能显示动态信息呢?目前我都是在页面加载完后异步改写浏览次数与评论次数。

最后

博文生成HTML并不困难,只不过我们在生成HTML的时候往往与需要显示一些动态信息产生冲突,但生成静态页本身就是为了减少请求数据库次数,提升浏览速度。想要在静态页里显示动态内容让网页灵活最好还是采用动态内容生成HTML文件方式,在需要显示动态数据的地方最好别使用JavaScript生成。

分享

TITLE: 关于博客生成HTML静态化的一些看法

LINK: https://www.qttc.net/141-blog-staticize-solution.html

NOTE: 原创内容,转载请注明出自琼台博客