只用免费的AI工具生成这个博客网站,拥有极强的可维护性和极低的部署成本

前言

简单的AI网站生成基本就是简单的html,css,js。只适合单页网站。想要拥有可维护性就要配合很多框架,比如cms,全栈框架。这个网站就是通过在各种开源框架中配合免费的AI生成而来的静态博客。可以直接通过GitHub Pages,以及网络大善人CloudFlare Pages中,实现不需要服务器部署上线。甚至连域名钱也可以不需要。可以说是零成本。当然本博客还是愿意花钱买个域名,一般一年只需要100左右,如果只是玩玩就没必要买域名了,用免费的github page 二级域名也可以的。

为什么不用现成的静态博客项目

想定制博客的外观

想使用熟悉的框架

因为之前也用过一些开源项目做过网站,我想使用我比较熟悉的项目,方便我做定制和维护。避免太多其他的学习成本,想改个东西还需要再去新项目的文档很耽误时间的感觉。

基于哪些开源框架

非常感谢下面这些开源项目以及项目中没有提到的一些开源库,有了它们才能有这么方便且强大的功能。

Next.js

官方介绍:Web 版React 框架 Next.js 被世界上一些最大的公司所使用,它使您能够利用 React 组件的强大功能创建高质量的 Web 应用程序。

strapi

一个基于node.js 的开源无头cms,只负责数据api的管理存取

shadcn/ui

一套精美的开源免费ui组件库。他又基于很多的开源免费库,比如radix-ui 和 tailwindcss。

博客的外观

网站的页头页尾借鉴了linear.app,原本文章列表卡片也是打算借鉴了,但是要精美好看的话就需要统一的图片风格就给撤了,以后发文章得设计很好看得图片才行,所以还是用了纯文本,基本纯文本也做了分级处理和留白,不会一大堆文字让人不知道看哪。

用到的免费AI

收费的 Trae

最开始使用的Trae,IDE这个编辑器,用了一两天写了点代码就超出免费额度了。我目前不是重度AI编程用户就没考虑付费。当时是首月$3,后面一个月$10。

免费的Deepseek & Google AI Studio

然后基本就是用Deepseek 和 Google AI Studio Gimini 2.5 pro,使用这个两个基本没遇到向我收费的情况。 编程能力都半斤八两,deepseek 比较能理解提示词,代码质量上比Gimini稍差一点,Gimini一旦使用最新的库,它就比较犟了,告诉了最新开源库的写法,它还是更愿意按照以前的写法写。

免费AI的代价

必须要复制粘贴代码到编辑器,有些代码还是要自己修改。没集成到编辑器那么方便。

博客特点

  • 清爽简洁
  • 亮暗主题切换
  • 静态页面(零成本部署到Pages服务)
  • 图片静态化(不需要单独图床url)
  • SEO
    • cms 自动根据标题生成拼音链接slug
    • 单独填写文章的seo
  • 文章章节导航
  • 搜索(不依赖第三方)
  • 评论(基于Giscus)
  • 部分动画
  • 自定义
    • 基于tailwindcss 样式自定义
    • 基于Next.js 路由/组件自定义
    • env环境变量配置

标签:

评论:

Loading comments...

基于文章标签的相关内容推荐

  • 阅读文章:Windows 运行 Specify CLI 教程
    2025/10/17

    Windows 运行 Specify CLI 教程

    官方github文档介绍的不够全面,这里做个安装使用记录