个人 / 学习博客

先玩一下 dskbot.fyi

个人站点骨架，基于 AstroWind。笔记和学习记录会慢慢换成自己的。后面这些区块还是模板示例，文案先换成中文。

看博客
GitHub
dskbot 首页插图

本地

在自己电脑上打开

Node.js 22.23.4（或任何 >= 22.22.3）。装好依赖之后就是这两条。

终端
$ npm run dev$ npm run build

  • 开发服务器

    运行 npm run dev，打开 localhost:4321。改 src/config.yaml 和页面即可。

  • 生产构建

    npm run build 把静态站点写到 dist/，再用 npm run preview 看成品。

  • Cloudflare Pages

    构建命令 npm run build，输出目录 dist。连接仓库的步骤在 DEPLOY.md。

模板示例

下面仍是 AstroWind 的示例区块

结构和组件先留着，方便以后按区块改成自己的页面。文案已经换成中文。

Astro 配上 Tailwind CSS

两个框架搭在一起，写起来快，页面也轻。现在用的是 Tailwind CSS v4。

现成的区块

用 Tailwind CSS v4 写好的小组件。营销页、SaaS、博客、个人主页、小站点都能拿来改。

常见的好做法

安全、好维护、用着顺手。做出来的站既清楚，也经得起以后慢慢改。

页面够快

打开快一点，搜索排名、阅读体验和别人愿不愿意留下，都会好一些。

搜索引擎优化（SEO）

标题、描述和结构化数据先铺好，站点更容易被找到。

欢迎改，也欢迎加

模板是开源的。有新想法就改；有余力也可以把改进送回上游。

模板里面

AstroWind 的底子：好看，也好用

站在比较新的基础上

先把现在常见的做法用上，后面少返工。

基于 Astro 7

静态生成，打开快，改页面的路径也很直接。

用 Tailwind CSS v4 排版

改颜色和间距很快，整站的样子也统一。

主流浏览器都能看

常用浏览器里，页面看起来、用起来都差不多。

几个人围着笔记本电脑讨论
让这个站点看起来像你自己的。

很好改

换成自己的名字、颜色和语气就行，不用从空白页开始。

好几种排法

同一套组件，可以摆成不同的页面，读者也知道该往哪点。

手机和桌面都能看

屏幕变窄时，区块会跟着收起来，阅读不用横着拖。

图片和视频

照片、视频可以直接嵌进区块里，不用另做一套样式。

黑色桌面上摊开的网页线框稿
先能上线，再慢慢长成自己的样子。

读者愿意多停一会儿

导航清楚，区块也好扫，人就更愿意往下看。

可以一直改

框架升级的时候，模板也跟着更新，站点不用推倒重来。

省时间

不用从零搭页面。先上线，再把示例文案换成自己的笔记。

有地方可问

仓库里有讨论和给 AI 助手的说明。卡住的时候不用一个人猜。

宇航员在太空中的照片

用 AstroWind 把站点先跑起来。

第 1 步：拿下来

从 GitHub 开始。可以 fork AstroWind，也可以点 “Use this template”。点几下，项目骨架就有了。

第 2 步：填内容

把图片和文字放进去。读者记住的是内容，示例文案只是占位。

第 3 步：改样式

换颜色、字体和排版，直到看起来像自己的。AstroWind 把这些入口留在少数几个文件里。

可以了

一个人在台阶上往上走

组件

最常用的区块

用 Tailwind CSS v4 搭页面时，这些组件会反复出现

页头

没有页头，读者会在页面里迷路。链接和站点名放在这里。

首屏

进站第一眼。把最想说的那句话放在这儿。

功能

把站点能做什么摊开讲，一条一条，方便扫读。

正文

真正要读的内容。没有它，页面只是橱窗。

行动按钮

轻轻推一下：去博客、去 GitHub，或者去下一页。

价格

如果以后要标价格，这个区块已经摆好了。现在还是示例。

评价

别人怎么说。现在是示例句子，以后可以换成真实反馈。

联系

留一句话的入口。问问题，或者说一声你好。

页脚

页面的结尾。链接、订阅和版权放在这里。

模板的故事

一套模板，从 2022 年用到现在

Astro 1.0 发布之前就开始了。后来每一次 Astro 更新，以及不断送来的 pull request，都把它往前推了一点。

  1. 给还在 beta 的框架写一套模板

    AstroWind 从 Astro 1.0 beta 起步：几页、几个区块，一个想法——网站可以又快、又简单、又好看。

  2. 第一年就成为星标最多的 Astro 主题

    到 12 月，它是生态里星标最多的主题，这个位置后来一直守着。陌生人的 pull request 开始来，而且一直没停。

  3. 最忙的一段时间

    Astro 长得很快，模板跟着长：内容集合、更好的图片、页面过渡。博客成熟了，区块翻倍，走向 1.0，送来改动的人也更多。

  4. 打磨

    Astro 4，以及一年里小心的小改进，大多是贡献者送来的：无障碍、工具链、编辑方式和部署方式。9 月前后星标过三千。

  5. 稳，也安静一些

    Astro 5，按节奏更新。提交少了，没有摔坏，星标还在涨：10 月到了五千。

  6. Astro 7 和 Tailwind CSS 4

    一年里两个框架大版本。模板换上新一代区块、完整的落地页、读起来像文档的博客，以及一份让编程助手认得路的说明。

  7. 发布 v1

    第一次提交四年之后，示例页、落地页和文章都写成了真内容。模板准备好接着往下走。dskbot.fyi 用的就是这一版。

想法：简单、靠谱、够快

博客里还有这些

查看全部文章 »

博客里放着 AstroWind 的说明，也放着 dsk 自己的笔记。 新文章会慢慢换掉模板示例。想看 Astro 7 和 Tailwind CSS v4 怎么搭站，可以从下面几篇开始。

问答

常见问题

克隆仓库之前，大家常问的几件事。按步骤做的任务，仓库里还有给 AI 编程助手看的技能说明。

AstroWind 是什么？

一套免费开源的 Astro 和 Tailwind CSS 模板：静态站点，带页头页脚、二十多个可复用区块、Markdown / MDX 博客、深色模式、从右到左排版、图片优化、SEO 信息和 RSS。改完可以部署到任何能托管静态文件的地方。dskbot.fyi 就是用它搭的。

开始需要什么？

一个够新的 Node.js（最低版本写在 package.json 里）和终端。运行 npm create astro@latest -- --template arthelokyo/astrowind，然后 npm run dev。站点名、地址、元数据和博客选项在 src/config.yaml；颜色和字体在 src/components/CustomStyles.astro。

可以不要博客吗？

可以。在 src/config.yaml 里把 apps.blog.isEnabled 设为 false，博客路由、RSS 和文章区块就不会进构建。模板的其他部分不受影响。

颜色、字体和标志怎么改？

颜色是 src/components/CustomStyles.astro 里的 CSS 变量（浅色和深色各一份）。字体在 astro.config.ts 里通过 Astro 的 Fonts API 配置。标志是 src/components/Logo.astro。同一组变量也会喂给兼容 shadcn/ui 的 token。

能交给 AI 编程助手吗？

可以，而且是按这个来准备的。仓库有 AGENTS.md 写项目约定，.agents/skills/ 里是常见任务的步骤（关掉博客、设置 Open Graph 图片、挂在子路径下、接 CMS、部署到 Cloudflare……）。Claude Code、Codex 或 Cursor 可以照着做。

部署到哪里，要钱吗？

任何能托管静态文件的地方：Vercel、Netlify、Cloudflare、GitHub Pages、nginx 容器（仓库里有 Dockerfile）或自己的服务器。dskbot.fyi 走 Cloudflare Pages。模板是 MIT 许可，个人和商业项目都可以免费用。

6K
GitHub 星标
1.7K
复刻
34
现成区块
100
Lighthouse 分数

Astro + 
Tailwind CSS

免费、开源，可以直接拿去用。克隆下来，换成自己的内容，再部署出去。

获取模板