静态网站与动态网站的区别 & 静态网站生成工具

Posted 2022-02-17 小哈里

1、静态网站与动态网站

• 静态网站是什么？
  技术上来讲，静态网站是指网页不是由服务器动态生成的。html、CSS 和 javascript 文件就静静地躺在服务器的某个路径下，它们的内容与终端用户接收到的版本是一样的。原始的源码文件已经提前编译好了，源码在每次请求后都不会变化。

• 静态网站的优点？
  加载时间更短，请求的服务器资源更少。
  内容相对稳定，因此容易被搜索引擎检索。
  托管没得任何特殊的要求。没得网络服务器或应用服务器，比如直接从驱动器读取内容。
  静态网站的缺点？
  没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。
  交互性较差，在功能方面有较大的限制。

• 如何区分静态与动态网站？
  程序是否在服务器端运行，是重要标志。
  在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页， ASP、php、JSP、ASPnet、CGI等。
  运行于客户端的程序、网页、插件、组件，属于静态网页，例如 html 页、Flash、JavaScript、VBScript等等，它们是永远不变的。

• 什么是伪静态？
  动态页面也可以通过服务器端的技术实现采用静态页面的后缀，常见的是Apache和nginx的Rewrite技术,也就是通常称作伪静态的页面，实际上还是动态页面，只不过是静态化了。
  伪静态是相对真实静态来讲的。
  通常我们为了增强搜索引擎的友好面。都将文章内容生成静态页面。
  但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。
  这就产生了伪静态技术。就是展示出来的是以html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。

2、静态网站生成工具

• 什么是静态网站生成工具？
  静态 Web 页面生成器在本地计算机或云中生成完整的静态 Web 页面。然后，这些可以存储在服务器中。
  与内容管理系统类似，生成器提供了使用布局模板，分离内容和页面框架，在某些情况下甚至可以从外部 CMS 中提取内容。
• 什么是CMS内容管理系统？
  是一种位于WEB前端（Web 服务器）和后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。
  CMS最擅长的就是建设网站，最流行的CMS有：国外的：Wordpress，Drupal，Joomla，这是国外最流行的3大CMS。国内则是DedeCMS和帝国，PHPCMS等。国内的CMS会追求大而全，而国外的CMS更注重生态，更注重友好的接口，更多的功能留给第三方开发插件来实现。

  扩展阅读：从静态到动态，再到CMS。

  静态网站：

  很久很久以前，人们做网站很多用静态HTML+CSS+Javascript直接写，也就是静态页面。但是如果有一组页面要维护，对于静态页面来说是一件很麻烦的事，比如我有一个人的Email地址变更了，这一组页面上所有出现的地方都要改。

  动态网站：

  于是就有了适合Web的动态语言，如ASP，PHP，JAVA，.NET等等，它们把数据保存在数据库中，可以动态的引用，这样就能生产出较大规模的网站了，当时诞生了一批大型网站，叫做门户网站，比如新浪，网易，搜狐。

  CMS管理：

  但是他们的内容很丰富，很多，他们有一大批编辑来搜集整理网站的文章，但是总不可能让程序员帮他们把内容上传吧，于是CMS诞生了，通常CMS有一个后台，编辑通过登录后台进入一个可视化的操作界面，把文章录入进去，然后通过上一级的总编审核后发布到网站中。

有名的静态网站生成工具

1、Jekyll（用过）
用 Ruby 写的最受欢迎的开源静态生成工具之一。
实际上，Jekyll 是 GitHub 页面 的引擎，它可以让你免费用 GitHub 托管网站。
官网地址：https://jekyllrb.com/

2、Hugo（见过）
是另一个很受欢迎的用于搭建静态网站的开源框架。它是用 Go 语言写的。
它运行速度快、使用简单、可靠性高。如果你需要，它也可以提供更高级的主题。
它还提供了一些有用的快捷方式来帮助你轻松完成任务。无论是组合展示网站还是博客网站，Hogo 都有能力管理大量的内容类型。
官网地址：https://gohugo.io/

3、Hexo（用过）
一个有趣的开源框架，基于 Node.js。像其他的工具一样，你可以用它搭建相当快速的网站，不仅如此，它还提供了丰富的主题和插件。
它还根据用户的每个需求提供了强大的 API 来扩展功能。如果你已经有一个网站，你可以用它的迁移扩展轻松完成迁移工作。
官网地址：https://hexo.io/

4、Gatsby（知名）
一个越来越流行的开源网站生成框架。它使用 React.js 来生成快速、界面优美的网站。
它提供的成千上万的新插件和主题的能力让我印象深刻。与其他静态网站生成工具不同的是，你可以使用 Gatsby 生成一个网站，并在不损失任何功能的情况下获得静态网站的好处。
它提供了与很多流行的服务的整合功能。当然，你可以不使用它的复杂的功能，或将其与你选择的流行 CMS 配合使用，这也会很有趣。
官网地址：https://www.gatsbyjs.com/

5、VuePress
由 Vue.js 支持的静态网站生成工具，而 Vue.js 是一个开源的渐进式 JavaScript 框架。
如果你了解 HTML、CSS 和 JavaScript，那么你可以无压力地使用 VuePress。你应该可以找到几个有用的插件和主题来为你的网站建设开个头。此外，看起来 Vue.js 的更新一直很活跃，很多开发者都在关注 Vue.js，这是一件好事。
官网地址：https://vuepress.vuejs.org/

6、Nuxt.js
使用了 Vue.js 和 Node.js，但它致力于模块化，并且有能力依赖服务端而非客户端。不仅如此，它的目标是为开发者提供直观的体验，并提供描述性错误，以及详细的文档等。
正如它声称的那样，在你用来搭建静态网站的所有工具中，Nuxt.js 可以做到功能和灵活性两全其美。他们还提供了一个 Nuxt 线上沙盒，让你不费吹灰之力就能直接测试它。
官网地址：https://nuxtjs.org/

7、Next.js（知名）
在 StaticGen 上总排名第一位，足以说明它有多好用了。配置简单，服务端渲染，代码分离，SEO Friendly，内置零配置 TypeScript 支持等等优点。
而且世界一流的大厂们也都在用它做大型的网站，在 Next.js 的 ShowCase 里面有腾讯、Uber、Hulu、Netlify、Nike 这些一流大厂。而且腾讯新闻就是利用 Next.js 开发的。
官网地址：https://nextjs.org/