博客框架对比
博客框架这么多选择,到底哪款最适合你?
首先
虽然很多产品都可以用来构建博客,但是不同产品的侧重点是不同的,有必要先了解一下不同产品的区别。
传统 CMS(Content Management System)类型:WordPress,既有编辑器,也有网站。专门为了创建网站而生。
产品
如何选择
前端框架排名:State of JavaScript 2022: Rendering Frameworks
Static Site Generators - Top Open Source SSGs | Jamstack
Hexo
Hexo 官方的介绍:
Hexo is a fast, simple & powerful blog framework powered by Node.js.
快速、简洁且高效的博客框架。
——Hexo
所以 Hexo 就是专门为写博客所设计的。
HUGO
The world’s fastest framework for building websites | Hugo
官方介绍:
The world’s fastest framework for building websites.
——The world’s fastest framework for building websites | Hugo
世界上最快的搭建网站的框架。
2013 年创立(Hugo (software) - Wikipedia),目前最新版本号是 v0.128.2
,不明白为什么开发团队一直不搞一个 v1.x
。
更新很频繁,甚至一周都会发一个小版本。
主题
QIN2DIM/awesome-hugo-themes: 🐱🏍 A curated list of awesome things related to Hugo themes.
25+ Best, Most Popular Hugo Themes for 2024 | Hugo Blox
zzo
zzossig/hugo-theme-zzo: Make a blog with hugo zzo theme!
示例:
Stack
CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers
感觉稍微有点简陋。
示例:
BlowFish
nunocoracao/blowfish: Personal Website & Blog Theme for Hugo
稍微有点博客的样子。
示例:
Welcome to Blowfish · Blowfish
PaperMod
adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.
示例:
Ladder
guangzhengli/hugo-theme-ladder: A fast, clean Hugo theme | 一个简单而优雅的 hugo 主题
简单优雅的纯文字博客主题。
ghost
Ghost: The best open source blog & newsletter platform
Github 46.3k Star
评价
就我个人的需求来说,我认为不值得。一是 Ghost 的主题、插件拓展生态圈还未发展起来;其次,Ghost 数据导出仅支持 json 格式,相关的迁移工具如 oghost、hexo-migrator-ghost 停更已久,迁移至 WordPress、Jekyll、Hugo 的工具虽然有更新,但跨程序之间的搬运并不是一件轻松事。第三点,也是最头疼的一点,Node.js 和 npm 的报错,看到密密麻麻的报错我都不想处理了。
Halo
基于 Java 生态的建站工具。自带编辑器以及后端管理系统,是和 WordPress 类似的产品。
目前更新比较频繁,基本上一个月发布一个新版本。
创始团队来自中国:
Halo 是凌霞(深圳)软件有限公司旗下的一款强大易用的开源建站工具,它让你无需太多的技术知识就可以快速搭建一个博客、网站或者内容管理系统。
主题
Walker
应用:Walker - Halo - 强大易用的开源建站工具
Solo
Solo 是一款小而美的博客系统,专为程序员设计
Github 1.5k Star
Gridea
Github:getgridea/gridea: ✍️ A static blog writing client (一个静态博客写作客户端)
我将博客从 Hexo 迁移到了 Gridea,但后者长时间停更,以及主题数量偏少,我开始寻找下一个适合的博客程序。
Typecho
基于 PHP 的简洁博客程序。
更新频率很低,最近一次更新是 2023-06-05 的 v1.2.1
版本。
主题
handsome
示例
Joe
Joe — 一款个人类型Typecho主题 - Joe的博客-记录与学习前端知识
示例
Jekyll
官方介绍
Transform your plain text into static websites and blogs.
——Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs
将纯文本转化为静态网站和博客。
主题
开源主题1
Pelican
Pelican – A Python Static Site Generator
基于 Python 生态的创建静态站的工具。
Github 12.4k Star。
Octopress
基于 Ruby 生态。
上次更新是 2015-01-15 的 v3.0
,很久没更新了。
Gatsby
gatsbyjs/gatsby: The best React-based framework with performance, scalability and security built in.
官方介绍:
Gatsby is a React-based open source framework with performance, scalability and security built-in.
Gatsby is the open source, frontend framework for React developers that need to build eCommerce sites, marketing sites, blogs, documentation, and any other type of website…faster.
——GatsbyJS | The Framework for Frontend Developers | Gatsby
Gatsby 是一个基于 React 的免费、开源框架,用于帮助开发者构建运行速度极快的 网站 和 应用程序
Gatsby 是一个基于 React 的前端框架,帮助开发者构建电子商务网站、营销网站、博客、文档等网站。
评价
It’s just inferior to the alternatives. It’s far behind the others in build time. Unless something has changed over the last couple of years, it ships React to the client by default. It insists on using graphql for building the pages (again, unless something has changed about it over the last couple of years). If one must use something like React for a brochure website or a blog, Astro would be a more appropriate choice. If one can live without react and co, then Eleventy or Hugo would be even better.
——Gatsby, Ghost, Hugo, Jekyll or another static site generator? : r/webdev
有人认为,相比于 Hugo,Gatsby 性能不够好。
随着内容越来越多,以及 Gatsby 的升级,我发现在维护 Gatsby 的时候开始有点不喜欢它了。这主要是由于:
- Gatsby 的大多数功能都是通过插件提供,导致项目有大量的第三方依赖(也有很多是官方维护的插件),而 Nodejs 的
package-lock.json
总是在升级的时候搞错一些版本,让我很抓狂(我不确定这个问题有没有得到解决),对于多依赖项目,我经常需要删掉整个 lock 文件,然后重新生成新的 lock 索引。- 大量的第三方插件维护的质量参差不齐,维护不足。这其实很正常,我自己也维护了一个国际化翻译的 Gatsby 插件, 但是由于后面我自己都没在用了,所以我就失去了继续维护和更新的动力了,至今还有用户在提 Issue,我只能在 Readme 里面写这个项目已经不在维护了。
- Gatsby 目前还不支持
.mjs
,然而 gatsby 强依赖的unist全生态系统都拥抱了.mjs
,所以导致大量的 gatsby 第三方插件只能使用旧版的 unist 生态链。升级的时候会有很多依赖只能依赖旧版本。这导致了很多的混乱。- Gatsby 的底层设计导致多内容处理的性能问题。Gatsby 把所有的内容都加载到 graphql 的内存数据里,这导致了庞大的开销。在内容很多的时候,比如Track Awesome List,每次构建需要 40 分钟左右的时间,好在这个网站每天只需要更新 2 次。
- Gatsby 虽然思想简单,但是其 API 现在已经变得非常庞大和复杂了,有点类似 Webpack,一个东西只要变得如此复杂,那么后期维护一定会很痛苦。与之相对的是11ty的 API 就很简单,但是也很强大。
——Gatsby框架的缺点 - Owen的博客,2022-03-08
Gatsby 的主题
550+ Gatsby Themes (Free & Premium) | Statichunt
WordPress
评价
由于之前使用的 WordPress 博客在更新后出现未知错误(最后证实是主机商的问题),同时考虑到 WordPress 存在的一些弊端,例如:
- 较为臃肿的 PHP 后端
- 除了官方主题外,难以找到适合博客写作的主题,大多只适合做展示站
- 在不安装插件的情况下,只能用自带的编辑器手写 HTML,而无法使用 Markdown 来编辑文章
- 静态文件的管理也让人头痛,「媒体库」的设计初衷很好,但实际上严重影响效率
可见,用 WordPress 写文章,特别是长文,是一件非常麻烦的事情 —— 你很难专注于写作。虽然它也有不少优点:
- 丰富的插件库,可以拓展大量的功能
- 完善的评论系统,无需依赖第三方服务
- 更新非常方便
主题
JustNews
JustNews WordPress博客、自媒体、资讯主题_WPCOM
argon
solstice23/argon-theme: 📖 Argon - 一个轻盈、简洁的 WordPress 主题
4.5k Star
示例:
Nisarg
Nisarg | WordPress Theme | WordPress.org
左耳朵耗子陈皓的酷壳在用:酷壳 – CoolShell.cn
niRvana
轻拟物风格
示例:
Typelog
示例
11ty
Eleventy is a simpler static site generator
Docusaurus
最新版 v3.4
(2024-05-31)。
示例
Hello from Panda Home | Panda Home
Astro
为什么选择 Astro,来自官方的回答:Why Astro? | Docs
Zola
VitePress
2024-07-11 17:10:18 虽然现在有一些人用 VitePress 来做博客,Peng 个人感觉目前 VitePress 还是只适合做文档类型还有文档类型的网站。
示例:
主题
blog-zaun
clark-cui/vitepress-blog-zaun: a nice blog theme use vitepress to build
示例
VuePress
示例
Docsify
最近更新 v4.13.1
(2023-06-24)
Harp
Harp, the static web server with built-in preprocessing
Github 5k Star
貌似从 2015 年开始就不怎么更新了。
Gridsome
Modern Site Generator for Vue.js - Gridsome
从 2020-11-23 开始就不更新了。
主题
主题排序
Hexo Themes | 219 Free Hexo Themes【专注 Hexo 主题】
Best Hexo Themes (Hand-picked) | Statichunt【Hexo 主题排序功能】
Themes & Templates - Jamstack Themes【这个网站罗列了很多静态建站工具的主题及其介绍、Star、预览等】
Built At Lightspeed - 4000+ Themes, Templates & UI Kits【各类工具的主题都有,还有收费的】
Zerostatic Themes - Premium Hugo & Jekyll Themes【Zerostatic 是一个专门给 Hugo 和 Jekyll 开发高级主题的团队,有免费的有收费的】
Mkdoc
主题:
squidfunk/mkdocs-material: Documentation that simply works
最新版 v1.6.0
(2024-04-20)
相关技术
pjax
MoOx/pjax: Easily enable fast Ajax navigation on any website (using pushState + xhr)
资料
进阶
服务端渲染和静态博客的区别:
Static Site Generation (SSG) vs Server-Side Rendering in Next.js | by Chris Ebube Roland | Medium【基于 Nextjs 介绍 SSG 和 SSR 的区别】
Rendering: Static Site Generation (SSG) | Next.js
前沿
Elog - 开放式跨平台博客解决方案【允许用户自由组合编辑工具和发布平台】
参考资料
- 前端 - 爆肝1个多月,严选10大热门静态博客框架,官方文档、教学视频、经典案例、热门插件一应俱全,强烈建议收藏 - 个人文章 - SegmentFault 思否
- 博客的发展简史和框架简介 | 槿呈Goidea【作者分析了博客的发展历史,梳理了各类建站工具】
- How to choose the right static site generator
- Best static site generator of 2024 | TechRadar
- 初学前端,制作一个 Gatsby 静态博客 | 无辄的栈【包含作者选择博客框架的决策逻辑】
- Hexo还是Hugo?Typecho还是Wordpress?读完这篇或许你就有答案了!-我不是咕咕鸽
- 从 Typecho 到 Hugo 的选择与迁移