静态网站及其生成、托管会成为一种流行趋势吗?

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:这个问题是我最近工作中,一直在思考的内容,今天和大家分享和讨论一下我的看法。

定义

静态网站:整个网站只由静态的内容(HTML\CSS\JS\Images…)组成,服务端发送给客户端的都是直接的内容,而不是通过动态网页技术(不管是ASP\JSP\PHP\Django\RoR\NodeJS)在收到请求的时候由服务端进行渲染出最终HTML发送给客户端。

静态网站生成器:基于动态内容生成静态网站的技术。通常背后会利用一种模板标记语言(或规范),通过模板引擎生成最终的静态网站内容。现在最流行的静态网站生成技术恐怕就是Jekyll了。

静态网站生成服务:提供一个SaaS服务,让用户可以在云服务中而非在本地运行静态网站生成器。让用户可以方便的持续交付自己的静态网站。即用户只需编辑内容,提交更改,静态网站生成服务就会自动刷新静态网站。

静态网站托管服务:和一般网站托管服务的最大区别就在于,其只托管静态内容。而现在世界上最大的静态网站生成服务和托管服务应该就是GitHub Pages了吧。

为什么

静态网站其实一直都存在,可以说万维网的最初形态就是静态网站,为什么现在说要变成一种流行趋势了呢?

我觉得是几个方面的原因:

  1. 现代浏览器和前端技术的迅猛发展导致后端功能越来越简单,尤其Angular和React带来的越来越多的Rich Web App出现,后端只需要托管静态内容和提供数据API。
  2. 持续交付技术及其背后的自动化脚本技术越来越成熟,从而简化了大量的之前需要手动处理的配置、部署等工作。
  3. 现在网站需要服务的客户数量越来越大,且地理分布越来越广,使用动态网页技术面临着更多挑战
  4. 当然动态网页技术的安全问题的突显,也让静态网页优势明显。比如“1200万个Drupal站点需要紧急打补丁”。

从下面的Google趋势图中,我们也可以看到静态网站生成器的搜索趋势从2013年开始大量增长,尤其2015年更是猛增。

另外,InfoQ中有一篇名为《静态网站生成器将会成为下一个大热门》的文章也详细谈到了这个趋势,其中介绍了一家在硅谷专门做静态网站托管的创业公司Netlify。甚至一家总部在纽约的企业协作SaaS服务商Wework都把自己整个站点利用静态网站生成器移植为静态网站并托管到Netlify,并写了一篇文章来分享他们的经验《Why WeWork.com uses a static generator and why you should too》。

优势

静态网站的特点决定了它有天生的高性能,尤其可以把整站都利用CDN进行加速,那么速度更加飞快。当然,静态网站的动态化部分(指由JS调用后端API处理的部分)会依赖于后端API的响应速度。

由于静态网站并不会在服务端渲染网页结果,所以一些针对动态网页框架的安全漏洞不会对其产生影响。当然服务器的安全和数据API的安全防护和机制还是必须的。

同时,由于静态网站对于服务器的负载很低,那么托管成本也就可以非常低。以我的初步设计为例,不启用CDN配额为10G空间的网站可以低到2人民币/每月,进行免费增值的商业模式完全没有问题。

后续

在技术和实现层面(生成服务和托管服务),我最近也进行了一些研究,已经有了初步的想法,现在在进行一些技术原型验证。等有了初步结果,会进行一个偏重技术层面分享一下。如果你在静态网站方面有任何想法,欢迎留言评论和我交流。

时间: 2024-08-07 11:37:05

静态网站及其生成、托管会成为一种流行趋势吗?的相关文章

[技术翻译]使用Nuxt生成静态网站

本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响电池功耗的(How Web Content Can Affect Power Usage) 06.[译]在现代JavaScript中编写异步任务(https://web.dev/off-main-thread/) 我翻译的技术文章都放在一个github仓库中,如果觉得有用请点击star收藏.我为什么

工具:使用jetty生成静态网站

在使用前端框架构建网页而不使用后端平台与数据库,即没有服务器的条件下读取文件夹其他文件,浏览器可能会阻止访问.对于这种静态构建可以使用简单的生成工具jekyll.它主要适用于将静态文件生成静态网站,在github pages上非常常用. 介绍:jekyll 注意,在新版本上使用时可能会出现“cannot load such files ”的问题,可以改用旧的版本,或使用此解决方案:way

在Azure Storage 托管HTTP静态网站

本文演示了在Azure Storage托管HTTP静态网站. 注意:HTTP已经不建议使用. 创建Azure StorageV2 存储账户 账户类型选择“StorageV2(通用版V2)”: 本例中,需要禁用安全传输,禁用后,可以通过HTTP而不是强制使用HTTPS即可访问: 其余值保持默认即可. 启用Storage Account静态网站功能 启用静态网站功能,并输入索引文件名称,通常来讲,我们会命名为index.html. 本案例中,我们准备了一个静态页面index.html, 该页面只有一

静态blog的免费托管部署、加域名与搜索优化(SEO)

本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/hugo_blog_host_and_seo 给博客加个域名准备长用,Hugo生成后一直放在github page上,为了让百度能搜到费了一堆事. 问题 如果只是在github page上弄个自己域名的网站,只需要在结果文件中添加一个CNAME文件,写入网站域名,然后在域名运营商提交解析.等待域名解析生效后即可通过域名访问. 然后为了让搜索引擎能够检索,通过bai

nginx 静态网站配置

/************************************************************************************** * nginx 静态网站配置 * 说明: * 配置下面的配置中包括python.php.静态网站的配置,配置静态网站主要目的是为了以后 * 能够跑Markdown生成的静态网站. * * 2016-8-7 深圳 南山平山村 曾剑锋 **********************************************

PHPCMS V9静态化HTML生成设置及URL规则优化

最近有客户在进行网站优化的时候,具体问道Phpcms V9怎么样静态化.伪静态的问题,想起来之前有分享过“Phpcms自定义URL规则技巧”,不过那只是原理,今天在这里,与大家从使用的角度上,具体分享实际的使用操作方法. 先讲讲Phpcms V9在后台怎么设置生成静态化HTML,之后再讲解怎么自定义URL规则,进行URL地址优化. 一.静态化HTML生成设置 进入PHPCMS V9后台设置,找到分类栏目,位置:内容->管理栏目->添加栏目(或者管理栏目.点击对应栏目“修改”): 注意设置第二选

百度云存储教程---免费建立自己的静态网站

欢迎訪问的我个人站点:点击打开链接--我的个人站点    想建设个人站点的朋友能够找我聊.无门槛,就能永远自己的永久域名和server空间,全然免费哦 曾经开发的站点苦于没有云server,站点没地方挂,如今百度出了云存储和应用引擎,能够让开发人员免费上传动态站点和静态站点.这篇文章,我准备用云存储的方式,存储用户的静态站点,开发人员可通过将静态页面上传至云存储空间中,并将其訪问权限设置为公开读,就可以实现静态站点的效果.文章底部有源代码和项目下载. 一.实现效果 本地目录 上传成后百度云存储的

静态网站公用的部分模块的引用(设置)方法

关于静态网站使用一个共同的头部和尾部,方便网站的维护和管理,如果你修改页面的头部内容和广告的时候,可以只修改一个页面整个网站的头部和尾部都改变了. 1:使用ssi技术页面生成shtml文件,只用在头部文件位置加入<!--#include file="header.html" -->;,然后修改的时候只要修改header.html文件就可以了.使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的,不会加 重访问者的浏览器负担. 2:使用js 建立一个hea

《Nodejs开发加密货币》之十二:静态网站开发全景扫描

前言 在前面的入门部分,介绍了Nodejs在前端开发中的应用,并通过具体项目说明了Nodejs在比特币客户端领域被广泛应用.当时为了介绍Nodejs入门技术,一切都是从头创建,没有引入前端框架.但在具体的项目实践中,前端是有框架可以选择的,效率和体验会有明显提升. 具体到前端框架,我的选择是Ember.js.Ember给开发带来一种飞一般的感觉,如果问前端框架哪家强,我会毫不犹豫的说Ember.(具体为什么,网上仍然争论不休,本文不做讨论) 本文重点介绍静态网站的类型,亿书官网的技术选型,以及在