[{"data":1,"prerenderedAt":540},["ShallowReactive",2],{"page-/post/frame/astro-quick-start":3,"surrounding-page":531},{"id":4,"title":5,"author":6,"body":7,"date":516,"description":517,"extension":518,"group":6,"lastmod":519,"meta":520,"navigation":523,"path":524,"rawbody":525,"seo":526,"showTitle":5,"stem":527,"tags":528,"versions":6,"__hash__":530},"content/post/frame/Astro-quick-start.md","Astro建站入门指南",null,{"type":8,"value":9,"toc":508},"minimark",[10,17,20,23,26,29,32,36,39,42,45,48,103,106,121,124,127,130,139,142,151,154,158,165,184,187,194,197,203,218,223,227,234,239,242,249,252,325,332,335,338,341,347,352,355,360,367,370,373,386,397,406,409,412,419,422,427,430,433,450,457,460,475,478,486,489,492,495,498,501,504],[11,12,13],"p",{},[14,15,16],"strong",{},"为什么要自己建站呢？",[11,18,19],{},"我想到了几个原因：",[11,21,22],{},"一、快感：建站类似做产品，也是一种学习后的实践。有一种刚看了一个做面包的视频之后，马上自己动手做出来一个面包，然后竟然还不错的快感。",[11,24,25],{},"二、正式感：相比于投稿到各大平台，自己建站不用考虑文章的字数、内容、题材等问题，减少了一部分焦虑感，但也是正儿八经的发布到网上给别人看，比起写在自己笔记软件里的碎碎念，发出来更有正式感。",[11,27,28],{},"三、信念感：建了站后，相当于画了一个自己的地盘。往里面发文章，那叫充实自己。网站名称，那叫个人品牌。网站 LOGO ，那叫个人形象。网站内容，那叫个人 IP。想想就有一种无比充盈的信念感，让人忍不住就往下跟着建站了。",[11,30,31],{},"说起信念，正好啊，快新年了，提前给大年拜个年，祝大家新年快乐👏👏👏",[33,34,35],"h2",{"id":35},"框架选择",[11,37,38],{},"建站有非常多的选择，如：WordPress、Hugo、Hexo、vuepress、jekyll、halo等等，我用过其中的部分，但今天选择的是 Astro。也不要问我为什么，想选哪个选哪个。",[11,40,41],{},"一般建的都是博客站，用来放一些自己的文章之类的。但作为一个程序员，还是多少希望他能玩点花样，但也希望他可以开箱即用，开箱即用基本上大部分框架都能做到，但是每个框架的花样确是不同。",[11,43,44],{},"Astro 开创的群岛架构，可以很好的满足我的需求，在不想折腾的时候，我就找个好用的模板开箱即用。想自定义的时候，就直接现代前端框架 Vue、React 、SolidJS、Svelte都整上。",[11,46,47],{},"以下是群岛架构的官方解释：",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-typescript shiki shiki-themes github-light","“群岛” 架构的总体思想看似简单：\n在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或插槽 […] \n这些区域随后可以在客户端 “激活” 成为小型独立的小部件，\n重用它们服务器渲染的初始 HTML。 \n— Jason Miller, Preact 的创造者\n","typescript","",[56,57,58,67,80,86,97],"code",{"__ignoreMap":54},[59,60,63],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sgsFI","“群岛” 架构的总体思想看似简单：\n",[59,68,70,73,77],{"class":61,"line":69},2,[59,71,72],{"class":65},"在服务器上渲染 ",[59,74,76],{"class":75},"sYu0t","HTML",[59,78,79],{"class":65}," 页面，并在高度动态的区域周围注入占位符或插槽 […] \n",[59,81,83],{"class":61,"line":82},3,[59,84,85],{"class":65},"这些区域随后可以在客户端 “激活” 成为小型独立的小部件，\n",[59,87,89,92,94],{"class":61,"line":88},4,[59,90,91],{"class":65},"重用它们服务器渲染的初始 ",[59,93,76],{"class":75},[59,95,96],{"class":65},"。 \n",[59,98,100],{"class":61,"line":99},5,[59,101,102],{"class":65},"— Jason Miller, Preact 的创造者\n",[11,104,105],{},"**在 Astro 中，“岛屿”指的是页面上的任何交互式 UI 组件，知道这一点即可。",[11,107,108,109,112,113,120],{},"在 Astro 中，每个岛屿都是一个",[56,110,111],{},".astro 文件","，有很多模板可以使用，而且官方文档支持中文，且很详细。所以这里我直接跳过了新建项目部分，可以去",[114,115,119],"a",{"href":116,"rel":117,"title":119},"https://docs.astro.build/zh-cn/getting-started/",[118],"nofollow","官网","👈上了解Astro",[33,122,123],{"id":123},"模版选择",[11,125,126],{},"使用 Astro 需要 Node 环境支持，这一部分也需要自己去下手准备！！！",[11,128,129],{},"由于我们想要的是搭建起一个博客站，如果起步过于繁琐，很容易劝退，所以我们优先找一个好用的模板来快速启动，毕竟不是每个人都是开发者。",[11,131,132,133,138],{},"官网上列举了全部的 ",[114,134,137],{"href":135,"rel":136,"title":137},"https://astro.build/themes/",[118],"Theme"," 👈，大概有一两百个。我没有全部看下来，因为如果全看下来之后再选一个好看的，大概一天的摸鱼时间都不一定够，那第二天还会不会接着搞都不一定了。",[11,140,141],{},"于是我从免费的第一页里挑一个中意的，原则就是 ：简洁，但该有的都要有，也不能太简洁。",[11,143,144,145,150],{},"最后我选择了",[114,146,149],{"href":147,"rel":148,"title":149},"https://astro.build/themes/details/astrowind/",[118],"AstroWind","👈 这个模板。由于语法上有一些差别，再加上全英文内容，还是要花一点时间改造一下。",[33,152,153],{"id":153},"模版修改",[155,156,157],"h4",{"id":157},"全局配置",[11,159,160,161,164],{},"全局相关的配置都在 ",[56,162,163],{},"src/config.yaml"," 里，分为了几个部分，还都挺有用的，挨个来看一下。",[166,167,168,172,175,178,181],"ul",{},[169,170,171],"li",{},"site：主要是用来设置你的站点名称、地址",[169,173,174],{},"metadata：SEO相关的",[169,176,177],{},"i18n： language需要改成zh",[169,179,180],{},"apps：是关于 blog 也就是文章渲染相关的，不改动也可以用，后续可以自己微调。",[169,182,183],{},"ui：主题可以切换 light or dark，主题的颜色变量也可以自己配置。直接拿来使用的话，可以不改。",[155,185,186],{"id":186},"导航栏",[11,188,189,190,193],{},"跑起来项目肯定第一时间是点一点导航栏，看看都有什么内容。配置文件在",[56,191,192],{},"src/navigation.js"," 里，",[11,195,196],{},"配置内容我已经改成了中文，这样看起来会比较好理解。",[11,198,199],{},[200,201],"img",{"alt":54,"src":202},"https://img.zzstudio.cn/image_tx6oa4Qrms.png",[11,204,205,206,209,210,213,214,217],{},"这里的扩展下拉菜单的配置位置，会对 ",[56,207,208],{},"src/pages/landing ","产生影响，原因是landing 里的页面是通过 ",[56,211,212],{},"src/layouts/LandingLayout.astro"," 渲染出来的，这个页面打开后会有一个新的导航栏，下拉菜单作者默认取的索引为 ",[56,215,216],{},"2 ","的菜单，所以需要手动改一下",[11,219,220],{},[200,221],{"alt":54,"src":222},"https://img.zzstudio.cn/image_2thqa4jFcg.png",[155,224,226],{"id":225},"底部footer","底部Footer",[11,228,229,230,233],{},"底部的修改主要集中在 ",[56,231,232],{},"src/components/widgets/Footer.astro ","中，比如也许不需要很多 links，看起来像是企业的官网似的，就可以打开这个页面自己注释一下。",[11,235,236],{},[200,237],{"alt":54,"src":238},"https://img.zzstudio.cn/image_YZjpteEe-v.png",[155,240,241],{"id":241},"文章内容",[11,243,244,245,248],{},"文章放在",[56,246,247],{}," src/content/post ","下，一般是 md ，也支持 mdx。",[11,250,251],{},"md 文件中顶部会在三个横线中声明一些元信息，这些信息会在网站中用到，并渲染出来。下边是我复制的项目里的 md 文件的元信息。",[49,253,257],{"className":254,"code":255,"language":256,"meta":54,"style":54},"language-markdown shiki shiki-themes github-light","---\npublishDate: 2023-07-17T00:00:00Z\nauthor: 枣把儿\ntitle: AstroWin123131\nexcerpt: While easy to get started, Astrowind is quite complex internally.  This page provides documentation on some of the more intricate parts.\nimage: https://images.unsplash.com/photo-1534307671554-9a6d81f4d629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1651&q=80\ncategory: Vue\ntags:\n  - astro\n  - tailwind css\n  - front-end\n---\n","markdown",[56,258,259,264,269,274,279,284,290,296,302,308,314,320],{"__ignoreMap":54},[59,260,261],{"class":61,"line":62},[59,262,263],{},"---\n",[59,265,266],{"class":61,"line":69},[59,267,268],{},"publishDate: 2023-07-17T00:00:00Z\n",[59,270,271],{"class":61,"line":82},[59,272,273],{},"author: 枣把儿\n",[59,275,276],{"class":61,"line":88},[59,277,278],{},"title: AstroWin123131\n",[59,280,281],{"class":61,"line":99},[59,282,283],{},"excerpt: While easy to get started, Astrowind is quite complex internally.  This page provides documentation on some of the more intricate parts.\n",[59,285,287],{"class":61,"line":286},6,[59,288,289],{},"image: https://images.unsplash.com/photo-1534307671554-9a6d81f4d629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1651&q=80\n",[59,291,293],{"class":61,"line":292},7,[59,294,295],{},"category: Vue\n",[59,297,299],{"class":61,"line":298},8,[59,300,301],{},"tags:\n",[59,303,305],{"class":61,"line":304},9,[59,306,307],{},"  - astro\n",[59,309,311],{"class":61,"line":310},10,[59,312,313],{},"  - tailwind css\n",[59,315,317],{"class":61,"line":316},11,[59,318,319],{},"  - front-end\n",[59,321,323],{"class":61,"line":322},12,[59,324,263],{},[11,326,327,328,331],{},"其中",[56,329,330],{},"publishDate","会用作排序，因为首页有一个功能，会展示最近的几篇文章，是取的这个时间。",[11,333,334],{},"作者会显示在文章列表和文章详情页，分类和标签也同样会显示。",[155,336,337],{"id":337},"文章分类",[11,339,340],{},"在文章内使用category可以给文章分类，同时在导航栏中可以直接选择某一个分类进行展示",[11,342,343,344,346],{},"在 ",[56,345,192],{}," 里可以配置导航栏，比如想配置一个页面，放全部的和 Vue 相关的文章",[11,348,349],{},[200,350],{"alt":54,"src":351},"https://img.zzstudio.cn/image_uFdvBw8lR3.png",[11,353,354],{},"点击此下拉选项后，就可以打开一个只有 Vue 分类的文章列表页",[11,356,357],{},[200,358],{"alt":54,"src":359},"https://img.zzstudio.cn/image_sGqeY9QHVp.png",[11,361,362,363,366],{},"同样的，上上图中的  ",[56,364,365],{},"href: getPermalink('astro', 'tag')"," 就是打开一个 tag 为 astro 的文章列表页。",[11,368,369],{},"有了分类和标签功能，这个网站承载文章基本就足够了。",[155,371,372],{"id":372},"使用图标",[11,374,375,376,381,382,385],{},"这个项目的",[114,377,380],{"href":378,"rel":379,"title":380},"https://icon-sets.iconify.design/tabler/",[118],"图标库","👈，使用的是",[56,383,384],{},"@iconify-json/tabler","，是安装依赖时已经下载好的。",[11,387,388,389,392,393,396],{},"使用时可以在 ",[56,390,391],{},"pages/index.astro","里找到一个 Icon的注释。 name 就从图标库里复制出来直接使用，class 支持 ",[56,394,395],{},"tailwindcss"," 控制大小，color 控制颜色。如：",[49,398,400],{"className":254,"code":399,"language":256,"meta":54,"style":54},"\u003CIcon name=\"tabler:alert-square-filled\" color=\"blue\" class=\"text-md\" />\n",[56,401,402],{"__ignoreMap":54},[59,403,404],{"class":61,"line":62},[59,405,399],{},[11,407,408],{},"如果需要其他图标库的，也可以自己加装。",[155,410,411],{"id":411},"其他",[11,413,414,415,418],{},"其他配置，比如右上角的按钮、底部的版权声明等，我也都在代码中用了 ",[56,416,417],{},"TODO注释","。",[11,420,421],{},"大家可以打开在源码，再借助 Vscode的TODO tree插件，快速查看所有标注点，根据自己的喜好进行修改。",[11,423,424],{},[200,425],{"alt":54,"src":426},"https://img.zzstudio.cn/image_X7uMvU0Gix.png",[33,428,429],{"id":429},"打包和部署",[11,431,432],{},"打包命令和其他前端项目一样",[49,434,438],{"className":435,"code":436,"language":437,"meta":54,"style":54},"language-shell shiki shiki-themes github-light","pnpm build\n","shell",[56,439,440],{"__ignoreMap":54},[59,441,442,446],{"class":61,"line":62},[59,443,445],{"class":444},"s7eDp","pnpm",[59,447,449],{"class":448},"sYBdl"," build\n",[11,451,452,453,456],{},"打包后会生成一个 dist 文件夹，里面是打包后的静态文件。页面被编译成了单独的 html 文件，图片文件已经被转成了 ",[56,454,455],{},"webp"," 格式。",[11,458,459],{},"可以扔进自己任意服务器里，也可以选择其他免费的托管服务。",[11,461,462,463,466,467,470,471,474],{},"比如Readme 里的 ",[56,464,465],{},"Netlify","和 ",[56,468,469],{},"Vercel","，或者 ",[56,472,473],{},"Github"," 本身，这部分内容就不展开讲了。",[33,476,477],{"id":477},"源码地址",[11,479,480,485],{},[114,481,484],{"href":482,"rel":483,"title":484},"https://github.com/zzdaddy/astro-onwidget-zz",[118],"模板","自取👈 源码中有部分中文标注，可以帮助你理解项目结构。",[11,487,488],{},"另外对模板的自定义程度有限，可以理解为本土化注释了一遍，因为再继续改造也不一定所有人都喜欢了。如果你也正在使用 Astro 建站，有困难的话可以在文末联系我。",[11,490,491],{},"以上就是全部内容啦👏",[33,493,494],{"id":494},"小结",[11,496,497],{},"本文是对 Astro 建站的一个不入门指南，相当于推荐了一下Astro，以及我自己在用的模板，目的是为了方便非前端出身的朋友快速上手。",[11,499,500],{},"如果对你有帮助的话，欢迎点赞和关注我～",[11,502,503],{},"我是枣把儿，一个正在扩充全栈知识库「早早集市」的开发者。欢迎在公众号「早早集市」找我交流～",[505,506,507],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}",{"title":54,"searchDepth":69,"depth":69,"links":509},[510,511,512,513,514,515],{"id":35,"depth":69,"text":35},{"id":123,"depth":69,"text":123},{"id":153,"depth":69,"text":153},{"id":429,"depth":69,"text":429},{"id":477,"depth":69,"text":477},{"id":494,"depth":69,"text":494},"2024-02-05T00:00:00.000Z","Astro初体验","md","2025-08-19T00:00:00.000Z",{"category":521,"published":522},"技术","2023-12-11 00:00:00",true,"/post/frame/astro-quick-start","---\ntitle: Astro建站入门指南\ndescription: Astro初体验\ntags: [\"Astro\"]\ncategory: 技术\npublished: 2023-12-11 00:00:00\ndate: 2024-02-05\nlastmod: 2025-08-19\nshowTitle: Astro建站入门指南\n---\n**为什么要自己建站呢？**\n\n我想到了几个原因：\n\n一、快感：建站类似做产品，也是一种学习后的实践。有一种刚看了一个做面包的视频之后，马上自己动手做出来一个面包，然后竟然还不错的快感。\n\n二、正式感：相比于投稿到各大平台，自己建站不用考虑文章的字数、内容、题材等问题，减少了一部分焦虑感，但也是正儿八经的发布到网上给别人看，比起写在自己笔记软件里的碎碎念，发出来更有正式感。\n\n三、信念感：建了站后，相当于画了一个自己的地盘。往里面发文章，那叫充实自己。网站名称，那叫个人品牌。网站 LOGO ，那叫个人形象。网站内容，那叫个人 IP。想想就有一种无比充盈的信念感，让人忍不住就往下跟着建站了。\n\n说起信念，正好啊，快新年了，提前给大年拜个年，祝大家新年快乐👏👏👏\n\n## 框架选择\n\n建站有非常多的选择，如：WordPress、Hugo、Hexo、vuepress、jekyll、halo等等，我用过其中的部分，但今天选择的是 Astro。也不要问我为什么，想选哪个选哪个。\n\n一般建的都是博客站，用来放一些自己的文章之类的。但作为一个程序员，还是多少希望他能玩点花样，但也希望他可以开箱即用，开箱即用基本上大部分框架都能做到，但是每个框架的花样确是不同。\n\nAstro 开创的群岛架构，可以很好的满足我的需求，在不想折腾的时候，我就找个好用的模板开箱即用。想自定义的时候，就直接现代前端框架 Vue、React 、SolidJS、Svelte都整上。\n\n以下是群岛架构的官方解释：\n\n```typescript\n“群岛” 架构的总体思想看似简单：\n在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或插槽 […] \n这些区域随后可以在客户端 “激活” 成为小型独立的小部件，\n重用它们服务器渲染的初始 HTML。 \n— Jason Miller, Preact 的创造者\n```\n\n**在 Astro 中，“岛屿”指的是页面上的任何交互式 UI 组件，知道这一点即可。\n\n在 Astro 中，每个岛屿都是一个`.astro 文件`，有很多模板可以使用，而且官方文档支持中文，且很详细。所以这里我直接跳过了新建项目部分，可以去[官网](https://docs.astro.build/zh-cn/getting-started/ \"官网\")👈上了解Astro\n\n## 模版选择\n\n使用 Astro 需要 Node 环境支持，这一部分也需要自己去下手准备！！！\n\n由于我们想要的是搭建起一个博客站，如果起步过于繁琐，很容易劝退，所以我们优先找一个好用的模板来快速启动，毕竟不是每个人都是开发者。\n\n官网上列举了全部的 [Theme](https://astro.build/themes/ \"Theme\") 👈，大概有一两百个。我没有全部看下来，因为如果全看下来之后再选一个好看的，大概一天的摸鱼时间都不一定够，那第二天还会不会接着搞都不一定了。\n\n于是我从免费的第一页里挑一个中意的，原则就是 ：简洁，但该有的都要有，也不能太简洁。\n\n最后我选择了[AstroWind](https://astro.build/themes/details/astrowind/ \"AstroWind\")👈 这个模板。由于语法上有一些差别，再加上全英文内容，还是要花一点时间改造一下。\n\n## 模版修改\n\n#### 全局配置\n\n全局相关的配置都在 `src/config.yaml` 里，分为了几个部分，还都挺有用的，挨个来看一下。\n\n-   site：主要是用来设置你的站点名称、地址\n-   metadata：SEO相关的\n-   i18n： language需要改成zh\n-   apps：是关于 blog 也就是文章渲染相关的，不改动也可以用，后续可以自己微调。\n-   ui：主题可以切换 light or dark，主题的颜色变量也可以自己配置。直接拿来使用的话，可以不改。\n\n#### 导航栏\n\n跑起来项目肯定第一时间是点一点导航栏，看看都有什么内容。配置文件在`src/navigation.js` 里，\n\n配置内容我已经改成了中文，这样看起来会比较好理解。\n\n![](https://img.zzstudio.cn/image_tx6oa4Qrms.png)\n\n这里的扩展下拉菜单的配置位置，会对 `src/pages/landing `产生影响，原因是landing 里的页面是通过 `src/layouts/LandingLayout.astro` 渲染出来的，这个页面打开后会有一个新的导航栏，下拉菜单作者默认取的索引为 `2 `的菜单，所以需要手动改一下\n\n![](https://img.zzstudio.cn/image_2thqa4jFcg.png)\n\n#### 底部Footer\n\n底部的修改主要集中在 `src/components/widgets/Footer.astro `中，比如也许不需要很多 links，看起来像是企业的官网似的，就可以打开这个页面自己注释一下。\n\n![](https://img.zzstudio.cn/image_YZjpteEe-v.png)\n\n#### 文章内容\n\n文章放在`  src/content/post  `下，一般是 md ，也支持 mdx。\n\nmd 文件中顶部会在三个横线中声明一些元信息，这些信息会在网站中用到，并渲染出来。下边是我复制的项目里的 md 文件的元信息。\n\n```markdown\n---\npublishDate: 2023-07-17T00:00:00Z\nauthor: 枣把儿\ntitle: AstroWin123131\nexcerpt: While easy to get started, Astrowind is quite complex internally.  This page provides documentation on some of the more intricate parts.\nimage: https://images.unsplash.com/photo-1534307671554-9a6d81f4d629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1651&q=80\ncategory: Vue\ntags:\n  - astro\n  - tailwind css\n  - front-end\n---\n```\n\n其中`publishDate`会用作排序，因为首页有一个功能，会展示最近的几篇文章，是取的这个时间。\n\n作者会显示在文章列表和文章详情页，分类和标签也同样会显示。\n\n#### 文章分类\n\n在文章内使用category可以给文章分类，同时在导航栏中可以直接选择某一个分类进行展示\n\n在 `src/navigation.js` 里可以配置导航栏，比如想配置一个页面，放全部的和 Vue 相关的文章\n\n![](https://img.zzstudio.cn/image_uFdvBw8lR3.png)\n\n点击此下拉选项后，就可以打开一个只有 Vue 分类的文章列表页\n\n![](https://img.zzstudio.cn/image_sGqeY9QHVp.png)\n\n同样的，上上图中的  `href: getPermalink('astro', 'tag')` 就是打开一个 tag 为 astro 的文章列表页。\n\n有了分类和标签功能，这个网站承载文章基本就足够了。\n\n#### 使用图标\n\n这个项目的[图标库](https://icon-sets.iconify.design/tabler/ \"图标库\")👈，使用的是`@iconify-json/tabler`，是安装依赖时已经下载好的。\n\n使用时可以在 `pages/index.astro`里找到一个 Icon的注释。 name 就从图标库里复制出来直接使用，class 支持 `tailwindcss` 控制大小，color 控制颜色。如：\n\n```markdown\n\u003CIcon name=\"tabler:alert-square-filled\" color=\"blue\" class=\"text-md\" />\n```\n\n如果需要其他图标库的，也可以自己加装。\n\n#### 其他\n\n其他配置，比如右上角的按钮、底部的版权声明等，我也都在代码中用了 `TODO注释`。\n\n大家可以打开在源码，再借助 Vscode的TODO tree插件，快速查看所有标注点，根据自己的喜好进行修改。\n\n![](https://img.zzstudio.cn/image_X7uMvU0Gix.png)\n\n## 打包和部署\n\n打包命令和其他前端项目一样\n\n```shell\npnpm build\n```\n\n打包后会生成一个 dist 文件夹，里面是打包后的静态文件。页面被编译成了单独的 html 文件，图片文件已经被转成了 `webp` 格式。\n\n可以扔进自己任意服务器里，也可以选择其他免费的托管服务。\n\n比如Readme 里的 `Netlify`和 `Vercel`，或者 `Github` 本身，这部分内容就不展开讲了。\n\n## 源码地址\n\n[模板](https://github.com/zzdaddy/astro-onwidget-zz \"模板\")自取👈 源码中有部分中文标注，可以帮助你理解项目结构。\n\n另外对模板的自定义程度有限，可以理解为本土化注释了一遍，因为再继续改造也不一定所有人都喜欢了。如果你也正在使用 Astro 建站，有困难的话可以在文末联系我。\n\n以上就是全部内容啦👏\n\n## 小结\n\n本文是对 Astro 建站的一个不入门指南，相当于推荐了一下Astro，以及我自己在用的模板，目的是为了方便非前端出身的朋友快速上手。\n\n如果对你有帮助的话，欢迎点赞和关注我～\n\n我是枣把儿，一个正在扩充全栈知识库「早早集市」的开发者。欢迎在公众号「早早集市」找我交流～\n \n",{"title":5,"description":517},"post/frame/Astro-quick-start",[529],"Astro","tvbk3ZSsjM5EYzvPbEO7S4F1trpH3UIpvVtUTO-h7wc",[532,536],{"title":533,"path":534,"stem":535},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":537,"path":538,"stem":539},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005086912]