作者: Harbor Zeng 采用 知识共享署名 4.0 国际许可协议 进行许可。

文章中的图片可能存在加载不出,可 查阅原文

个人认为作者最后 Hexo 较好的想法有失偏颇,至少其编译速度比 Hugo 慢太多

什么是静态博客

所谓静态博客,即通过工具,直接将作者所书写的博文编译成最终的htmlcssjs等文件。作者/博主,只需将生成的文件部署在静态server上面即可被在互联网中访问。

静态博客流程图
静态博客流程图

静态博客流程图

而传统的数据库型博客对服务器的要求就比较大了

传统型博客流程图
传统型博客流程图

传统型博客流程图

使用静态博客生成工具

静态博客生成工具生成网页的过程
静态博客生成工具生成网页的过程

静态博客生成工具生成网页的过程

用户通过浏览器访问服务器,直接就回获得已编译的静态资源。

用户直接通过浏览器获得静态资源
用户直接通过浏览器获得静态资源

用户直接通过浏览器获得静态资源

静态博客的好处

  1. 因为用户在浏览器上访问博客时,只用从服务器(如nginx)拿来编译好的静态资源即可,无需实时从数据库获取博文、图片、评论、访问量等资源,效率极高,打开网站的速度会非常快速 !
  2. 用户可以专心写博客不用管服务器维护等琐事,够省心。
  3. 部署方便,很多静态博客生成器都有一键部署的模块或脚本,可以省心部署到GitHub Pages等服务器上去,避免购买服务器的花费。
  4. 静态博客对SEO天生有优势,各大搜索引擎收录速度比较快。

由于是静态博客,所以自然无法支持原生评论,访问量统计,注册登录等功能。但是可以通过js在前端调用第三方评论工具,著名的解决方案也有很多;统计量也是有解决方案的,我们后面再细细讲述。

所以评论,代码高亮,数学公式,页面PV (page view) 统计等常用功能都是有的。

有哪些静态博客?

Hexo

  • 作者:tommy351
  • 主页:https://hexo.io/
  • 简介: Hexo是一款基于node.js开发的博客程序,拥有简单的服务器,可用作简单的动态博客使用。也有生成器,生成的静态文件可以一键部署到Github Pages上,也可以部署到任意静态文件服务器上。它相当简约,并且可使用Markdown来编写文章!

hexo主页截图
hexo主页截图

hexo主页截图

Jekyll

  • 作者:Tom Preston-Werner,Nick 等
  • 主页:https://jekyllrb.com/
  • 简介: Jekyll 是一种基于Ruby开发的、适用于博客的静态网站生成引擎。使用一个模板目录作为网站布局的基础框架,提供了模板、变量、插件等功能,最终生成一个完整的静态Web站点。即只要安装Jekyll的规范和结构,不需写html,便可生成网站。

Jekyll主页截图
Jekyll主页截图

Jekyll主页截图

Hugo

  • 作者bep, spf13
  • 主页:https://gohugo.io/
  • 简介:Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

Hugo主页截图
Hugo主页截图

Hugo主页截图

总结

以上所列举的三个是比较常用的静态博客生成器,还有其他大量如雨后春笋一样多的生成器,可以参考『参考资料[2]

作为一个博客,谁最了解博客,谁最在意博客的UI?那当然是前端的宝宝们了,所以hexo就是当仁不让的不二之选。

而且hexo插件丰富主题繁多,多到琳琅满目,应接不暇。而且使用的中国人超级多,很容易就能寻得帮助。

不仅是hexo群聊很多,某些主题也会建立自己的群聊
不仅是hexo群聊很多,某些主题也会建立自己的群聊

不仅是hexo群聊很多,某些主题也会建立自己的群聊

笔者使用过hugo,使用过程太过复杂,概念生僻;全程英文;遇到问题基本处于孤立无援状态;而且主题大部分都其丑无比,没有满意的效果。

反观hexo,使用相对而言简单很多,而且主题很漂亮炫酷。故此我们本教程选用hexo来作为静态博客生成器。

参考资料


  1. What is a Static Website? http://nilclass.com/courses/what-is-a-static-website/[ ↩](https://tellyouwhat.cn/p/why-static-blog-the-most-complete-hexo-static-blog-building-tutorial-in-history/#fnref:1)
  2. A definitive list of tools for generating static websites https://github.com/pinceladasdaweb/Static-Site-Generators[ ↩](https://tellyouwhat.cn/p/why-static-blog-the-most-complete-hexo-static-blog-building-tutorial-in-history/#fnref:2)