博客框架对比

博客框架这么多选择,到底哪款适合你?

首先

虽然很多产品都可以用来构建博客,但是不同产品的侧重点是不同的,有必要先了解一下不同产品的区别。

传统 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!

示例:

Mogeko’s Blog

Stack

CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers

感觉稍微有点简陋。

示例:

Hugo Theme Stack Starter

BlowFish

nunocoracao/blowfish: Personal Website & Blog Theme for Hugo

稍微有点博客的样子。

示例:

Welcome to Blowfish · Blowfish

PaperMod

adityatelange/hugo-PaperMod: A fast, clean, responsive Hugo theme.

示例:

Kiyan’s Blog

Ladder

guangzhengli/hugo-theme-ladder: A fast, clean Hugo theme | 一个简单而优雅的 hugo 主题

简单优雅的纯文字博客主题。

ghost

Ghost: The best open source blog & newsletter platform

Github:TryGhost/Ghost: Independent technology for modern publishing, memberships, subscriptions and newsletters.

Github 46.3k Star

评价

就我个人的需求来说,我认为不值得。一是 Ghost 的主题、插件拓展生态圈还未发展起来;其次,Ghost 数据导出仅支持 json 格式,相关的迁移工具如 oghosthexo-migrator-ghost 停更已久,迁移至 WordPressJekyllHugo 的工具虽然有更新,但跨程序之间的搬运并不是一件轻松事。第三点,也是最头疼的一点,Node.js 和 npm 的报错,看到密密麻麻的报错我都不想处理了。

——Ghost Blog 部署指南 - 少数派

Halo

Halo - 强大易用的开源建站工具

基于 Java 生态的建站工具。自带编辑器以及后端管理系统,是和 WordPress 类似的产品。

目前更新比较频繁,基本上一个月发布一个新版本。

创始团队来自中国:

Halo 是凌霞(深圳)软件有限公司旗下的一款强大易用的开源建站工具,它让你无需太多的技术知识就可以快速搭建一个博客、网站或者内容管理系统。

——关于我们 - Halo - 强大易用的开源建站工具

主题

Walker

应用:Walker - Halo - 强大易用的开源建站工具

Solo

Solo - Java 博客系统,Java 开源博客系统

Solo 是一款小而美的博客系统,专为程序员设计

Github 1.5k Star

Gridea

Gridea — 建造你的数字花园,让写作成为最佳谈话方式

Github:getgridea/gridea: ✍️ A static blog writing client (一个静态博客写作客户端)

我将博客从 Hexo 迁移到了 Gridea,但后者长时间停更,以及主题数量偏少,我开始寻找下一个适合的博客程序。

——Ghost Blog 部署指南 - 少数派

Typecho

Typecho Official Site

基于 PHP 的简洁博客程序。

更新频率很低,最近一次更新是 2023-06-05 的 v1.2.1 版本。

主题

handsome

示例

友人C - 相逢的人会再相逢

忆梦小站

Joe

Joe — 一款个人类型Typecho主题 - Joe的博客-记录与学习前端知识

示例

Joe的博客-记录与学习前端知识

Memos | 一个开源的碎片化笔记工具的不完全指南

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

将纯文本转化为静态网站和博客。

——Jekyll • 一个简洁的博客、静态网站生成工具 | Jekyll 是一个将纯文本内容转化为静态网站或博客的工具

主题

开源主题1

mzlogin/mzlogin.github.io: Jekyll Themes / GitHub Pages 博客模板 / A template repository for Jekyll based blog

Pelican

Pelican – A Python Static Site Generator

基于 Python 生态的创建静态站的工具。

Github 12.4k Star。

Octopress

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 的免费、开源框架,用于帮助开发者构建运行速度极快的 网站应用程序

——GatsbyJS 中文网

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 的时候开始有点不喜欢它了。这主要是由于:

  1. Gatsby 的大多数功能都是通过插件提供,导致项目有大量的第三方依赖(也有很多是官方维护的插件),而 Nodejs 的package-lock.json总是在升级的时候搞错一些版本,让我很抓狂(我不确定这个问题有没有得到解决),对于多依赖项目,我经常需要删掉整个 lock 文件,然后重新生成新的 lock 索引。
  2. 大量的第三方插件维护的质量参差不齐,维护不足。这其实很正常,我自己也维护了一个国际化翻译的 Gatsby 插件, 但是由于后面我自己都没在用了,所以我就失去了继续维护和更新的动力了,至今还有用户在提 Issue,我只能在 Readme 里面写这个项目已经不在维护了。
  3. Gatsby 目前还不支持.mjs,然而 gatsby 强依赖的unist全生态系统都拥抱了.mjs,所以导致大量的 gatsby 第三方插件只能使用旧版的 unist 生态链。升级的时候会有很多依赖只能依赖旧版本。这导致了很多的混乱。
  4. Gatsby 的底层设计导致多内容处理的性能问题。Gatsby 把所有的内容都加载到 graphql 的内存数据里,这导致了庞大的开销。在内容很多的时候,比如Track Awesome List,每次构建需要 40 分钟左右的时间,好在这个网站每天只需要更新 2 次。
  5. Gatsby 虽然思想简单,但是其 API 现在已经变得非常庞大和复杂了,有点类似 Webpack,一个东西只要变得如此复杂,那么后期维护一定会很痛苦。与之相对的是11ty的 API 就很简单,但是也很强大。

——Gatsby框架的缺点 - Owen的博客,2022-03-08

Gatsby 的主题

550+ Gatsby Themes (Free & Premium) | Statichunt

WordPress

评价

由于之前使用的 WordPress 博客在更新后出现未知错误(最后证实是主机商的问题),同时考虑到 WordPress 存在的一些弊端,例如:

  • 较为臃肿的 PHP 后端
  • 除了官方主题外,难以找到适合博客写作的主题,大多只适合做展示站
  • 在不安装插件的情况下,只能用自带的编辑器手写 HTML,而无法使用 Markdown 来编辑文章
  • 静态文件的管理也让人头痛,「媒体库」的设计初衷很好,但实际上严重影响效率

可见,用 WordPress 写文章,特别是长文,是一件非常麻烦的事情 —— 你很难专注于写作。虽然它也有不少优点:

  • 丰富的插件库,可以拓展大量的功能
  • 完善的评论系统,无需依赖第三方服务
  • 更新非常方便

——博客迁移至 Hexo | 米米的博客

主题

JustNews

JustNews WordPress博客、自媒体、资讯主题_WPCOM

argon

solstice23/argon-theme: 📖 Argon - 一个轻盈、简洁的 WordPress 主题

4.5k Star

示例:

希卡米 | HiKami - 发给互联网的问候

Nisarg

Nisarg | WordPress Theme | WordPress.org

左耳朵耗子陈皓的酷壳在用:酷壳 – CoolShell.cn

niRvana

轻拟物风格

示例:

michaelliunsky的blog | 无限进步

Typelog

Typlog

示例

hayami’s blog

11ty

Eleventy is a simpler static site generator

Docusaurus

Docusaurus 3.4 | Docusaurus

最新版 v3.4(2024-05-31)。

示例

峰华前端工程师- 让你学会前端开发

Hello from Panda Home | Panda Home

Astro

Astro

为什么选择 Astro,来自官方的回答:Why Astro? | Docs

Zola

getzola/zola: A fast static site generator in a single binary with everything built-in. https://www.getzola.org

VitePress

2024-07-11 17:10:18 虽然现在有一些人用 VitePress 来做博客,Peng 个人感觉目前 VitePress 还是只适合做文档类型还有文档类型的网站。

示例:

首页 | APP比比

YY’s Blog

主题

blog-zaun

clark-cui/vitepress-blog-zaun: a nice blog theme use vitepress to build

示例

home | 艺述论

VuePress

示例

博客主页 | 冥王星

Docsify

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 开发高级主题的团队,有免费的有收费的】

Themes - Jamstack Themes

Mkdoc

MkDocs

主题:

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)

资料

  1. ajax和pjax有什么区别 - 范仁义 - 博客园
  2. PJAX,站点加速之翼 | Laravel China 社区

进阶

服务端渲染和静态博客的区别:

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. 前端 - 爆肝1个多月,严选10大热门静态博客框架,官方文档、教学视频、经典案例、热门插件一应俱全,强烈建议收藏 - 个人文章 - SegmentFault 思否
  2. 博客的发展简史和框架简介 | 槿呈Goidea【作者分析了博客的发展历史,梳理了各类建站工具】
  3. How to choose the right static site generator
  4. Best static site generator of 2024 | TechRadar
  5. 初学前端,制作一个 Gatsby 静态博客 | 无辄的栈【包含作者选择博客框架的决策逻辑】
  6. Hexo还是Hugo?Typecho还是Wordpress?读完这篇或许你就有答案了!-我不是咕咕鸽
  7. 从 Typecho 到 Hugo 的选择与迁移