HELLO NAS BLOG

让 AI 给我做了个博客网站,不是不懂写代码,只是我懒得动了

记录如何借助 Codex、Astro 和现成的设计规范,从技术选型、界面搭建到 Cloudflare 部署,做出一个个性化博客网站。

点赞 + 关注 + 收藏 = 学会了

上次分享了免费域名的获取方法,感谢工友们点击了我的邀请链接,我拿了几十个免费额度。

01

还没领免费域名的工友可以按照这个教程领取👉 免费域名,虽然长得有点丑,但免费!

我知道自建博客已经不流行了,但域名闲着也是闲着,做个博客吧。

⚡️ https://hellonas.qzz.io ⚡️

其实这次还是分享工具,分享如何让AI按照自己喜欢的风格去搭建博客。

02

我打算把公众号的NAS和工具分享类的文章搬出来做成一个独立的博客。

对于 NAS 玩家来说,Halo 应该是不会陌生的,绿联甚至都将其集成到官方的应用商店里。但我想更加个性化一点,所以放弃了这个方案。

03

我是研发出身,但手搓是不可能手搓的。于是

Codex 启动!

“手搓“博客也是有多种方案,比如 VitePressDocusaurus 这些库。但这些都有点老了,现在流行的是 Astro,问 AI 也是这么回答。

04

技术选型确定了,接下来就是 UI 风格。

我只想要简单点明了的风格,在这基础上再加一些“骚操作“。

UI 方面的能力我比较薄弱,虽然之前分享过谷歌的 Stitch能生成 UI 设计图,但作为“甲方“,让我描述自己想要什么风格还是有点太为难我了。

更好的方法应该是抄啊 致敬啊!

这个仓库就是用来给各位致敬的,它收集了很多大厂的设计风格,而且是给 AI 用的。

⚡️ https://github.com/voltagent/awesome-design-md

05

选一个你喜欢的网站,比如 Apple,点进去可以看到这个网站的设计风格。

06

/design-md 里找到你喜欢的那个网站的设计风格,把里面的 DESIGN.md 放在你项目的根目录,让 AI 参考里面的设计规范。

07

技术框架和 UI 风格确定了,接下来可以开干了。

我平时用 Codex 开发项目会先手动创建一个项目,然后在 Codex 里加载这个项目,再用各种 MCP 啊、Skill 啊搞来搞去的。

这可能有点吓人,其实 Codex 对新手特别友好。

比如本文要创建的这个博客,我只需要创建一个文件夹,然后和 Codex 说要在这个文件夹里面把项目搭建起来就行了。

08

比如这样跟它说:

那就用Astro吧,我平时写作也是用Markdown来写的。帮我在“/Users/kelvin/Documents/project”创建一个“hellonas”这个名字的项目

它哔哩吧啦回答了一大堆,然后把项目给我搭建好了,还把项目运行起来,叫我在浏览器访问 http://localhost:4321 就可以看到项目长什么样了。

09

然后我跟它说了我的写作习惯,它又哔哩吧啦的说了一通,然后把项目调整了一下,让我把文章放在 src/content/blog/ 这个目录里。

10

接下来我又说,我想做一些文章分类,不止 NAS 类的文章,还有一些小工具之类的。

像不像甲方,自己需求都没想明白就要开干了😊

它又吭哧吭哧的开干。

11

接着我把文章搬进去项目看了一下,首页给我规划好了,文案也是它写的。

12

博客列表页也搭建好了。

13

博客详情页也很工整。

14

甚至连搜索功能都给我做好了,很棒!

15

现在整个博客是能用了,但好像可以在左侧价格导航栏?并且我还想要一些小特效。

于是我把这个特效发给 Codex,让他致敬。

⚡️ https://canvasui.dev/docs/components/peel

于是我的博客就有了这个特效。

16

接下来就是部署上线了。

我将项目传到 GitHub,然后在 cloudflare 把项目拉过来部署。

17

部署成功后,再绑定好域名。

18

然后就可以访问了。

https://hellonas.qzz.io

后面的部署操作我是比较熟悉的,所以就没问 AI。不知道如何部署的工友,或者你使用的是阿里云、腾讯云、亚马逊等服务商的话,也可以直接问 AI 让它告诉你如何操作。我也是这么学会的。

以上就是本文的全部内容啦,如果本文对你有帮助的话,也可以多多分享给你的朋友🙏

点赞 + 关注 + 收藏 = 学会了

继续看看其他折腾记录

更多 NAS、自托管服务和工具分享都在博客列表。

返回博客

SEARCH

搜索文章

输入关键词开始搜索。