2024静态博客生成器,还可以选择简约清爽的eleventy-cn-blog

366 阅读3分钟

2024年,静态博客生成器的市场越来越热闹,除了老牌的hexo,还有很多新兴的选择,比如11ty。11ty是一个简单而强大的静态网站生成器,它可以让你用你喜欢的模版语言和数据格式来创建网站,无论是HTML、Markdown、Liquid、Nunjucks还是其他的。11ty还支持多种部署方式,你可以把你的网站托管在GitHub Pages、Netlify、Vercel等平台上,享受快速和免费的服务。

如果你想用11ty来搭建一个静态博客,那么你可能会对eleventy-cn-blog这个主题感兴趣。这个主题是一个开箱即用的静态博客生成器,基于eleventy的核心功能,灵感来自eleventy-base-blog模版,对中文做了一些优化,比如支持中文URL和中文日期格式。eleventy-cn-blog还提供了一些实用的功能,比如文章分类、标签、分页、归档、RSS订阅、评论等。你只需要写好你的文章,然后运行一条命令,就可以生成一个漂亮而实用的静态博客。

eleventy-cn-blog还有一个特点,就是它支持环保事业,减少用户设备能耗。该项目尽量克制使用js编写,但是由于现实世界和理想之间的巨大落差,有时候不得不添加必要js。但是eleventy-cn-blog尽量保持js的简洁和高效,避免过度依赖js或者引入不必要的库和框架。这样做不仅可以提高网站的加载速度和性能,还可以节省用户设备的电量和流量,从而减少碳排放和环境污染。

主要特色功能

  • 开箱即用的 Lighthouse 得分为四百分!

image.png

  • 支持RSS订阅和sitemap生成
  • 代码高亮
  • 通过短代码优化图像{% image %}
  • json格式的文章数据,你甚至可以将静态博客作为api使用(作者本人已实现静态博客对接微信小程序)
  • 支持中文url(url本来就支持中文,是11ty内置的url美化插件不支持中文导致的问题,这里直接不使用插件就解决了问题)
  • 支持窗口内链接预加载(包含4kb的js)
  • 增加分类
  • html压缩
  • View Transitions页面转换的优雅过渡效果(这个api目前是草案阶段,如需使用需更新谷歌浏览器最新版并开启chrome://flags#view-transition-on-navigation ,一同期待View Transitions成为标准)
  • 支持Service Worker,博客可以在无网环境使用(包含少量js)

297327381-76c75ad5-4ed4-4d7e-a74c-77193da73aee.png

如何使用

  1. 克隆或下载本项目到本地

  2. 进入项目目录,运行npm install安装依赖

  3. 运行npm run serve启动本地开发服务器

  4. _posts目录下编写你的博客文章,支持Markdown和Nunjucks两种格式

  5. 运行npm run build生成静态网站文件,输出到_site目录

  6. _site目录下的文件部署到你的服务器或托管平台 ps:(作者目前是把源码托管在GitHub,关联cloudflare的Pages,达到免去部署的过程,你也可以这样)

未来想要实现的功能

  • 基于Valine的评论功能

  • SEO优化

  • 友情链接页面

  • 首页改为分页形式

  • 纯前端搜索功能

  • 友情链接页面

  • 持续更新eleventy新版本

    如果你对eleventy-cn-blog感兴趣,你可以访问它的GitHub仓库eleventy-cn-blog 来使用。你也可以参考它的示例网站demo.xiyu.pro 来看看它的效果。我希望你能喜欢这个主题,并且用它来分享你的知识和想法。