写在前面：这篇文章预计会写很久，由于我太忙的缘故。大多数时候你看到的可能只是一个半成品。在我完成全部内容后，才会删除这句话。

我将分享从零开始搭建一个静态网站的详细步骤，以Hexo为博客框架，Netlify为网站托管平台，GitHub为代码托管仓库。如果你想，你当然也可以把博客框架换为主流的Jekyll、Hugo、Gatsby，或者其他的比如Typecho、Valaxy；你也可以把网站托管平台换为GitHub Pages（以GitHub为代码仓库）或者GitLab Pages（以GitLab为代码仓库）；如果选择了Netlify，你当然也可以把代码托管仓库替换为GitLab。选择自由度比较高，但是不同的选择对应着不同的相对优劣，因此，在写道对应步骤的时候我会进行简要的比较，方便各位自行决策。

不过本篇教程并不会详细说明非本人选用的框架和平台的详细使用步骤，重新部署别的对我来说太麻烦啦，不过一般来说，基本流程具有一定可迁移性，可供参考。但落实到代码和具体步骤，还需自行注意。

选择网站分类

是的！本篇教程是针对搭建静态网站的，但是我仍希望在此简要介绍一下动态网站和静态网站的相对优劣，帮助各位做出选择。

比较

静态网站

  1. 成本：相对较低。不需要服务器端的处理能力，因此主机和运维成本更低。
  2. 响应速度：通常较快。服务器只需要发送预先创建的HTML文件，无需进行额外的处理和数据库查询。
  3. 管理便捷性：相对繁琐。需要手动修改网站代码并重新上传到服务器。
  4. 可拓展性：相对有限。适用于内容变化较少且不涉及用户交互的网站。交互功能拓展方面往往需要依赖第三方服务。
  5. 美观性：较为简单，美观程度取决于网页设计师的水平。

动态网站

  1. 成本：相对较高。需要服务器端处理能力和数据库支持，因此主机和运维成本会更高。
  2. 响应速度：可能较慢。服务器需要处理请求、查询数据库并生成HTML页面。较依赖于服务器的质量和配置。
  3. 管理便捷性：相对简单。通常使用内容管理系统（CMS），便于非技术人员更新和管理网站内容。
  4. 可拓展性：相对较高。可以轻松实现用户交互、评论、搜索等功能。
  5. 美观性：易于实现丰富效果，美观程度取决于网页设计师的水平。

建议

如果只需分享一些文章和图片，并且对网站交互需求不高，且预算相对较少，那么静态网站可能是一个更经济的选择；如果希望网站拥有丰富的功能和交互性，且预算充足，那么动态网站可能更适合。

值得一提的是，静态网站同样可以实现交互功能，如：

  • 评论功能：可以利用第三方评论系统，如Disqus、Facebook Comments等，只需将相应代码添加到静态网站的HTML文件中，即可实现评论功能。评论数据将存储在第三方服务器上，而非网站服务器上。

  • 搜索功能：可以利用第三方搜索服务，如Google Custom Search、Algolia等，提供可以嵌入到静态网站的搜索框。也可以使用客户端搜索功能，例如使用开源项目Lunr.js——依赖于JavaScript，通过预先生成的索引文件实现站内搜索。不过需要注意的是，客户端搜索在处理大量内容时可能效率较低。

不过，虽然这些方法可以为静态网站添加评论和搜索等功能，但可能无法像动态网站那样高度集成和定制。对于其他交互功能，静态网站也会面临类似的挑战。因此，在选择静态网站时，请务必权衡这些限制与静态网站带来的成本和响应速度优势。