如何将Astro的Fuwari静态博客模板配置成高效的CICD工作流？

基于Astro开发的Fuwari静态博客模版配置CICD流程 前言 同往常一样，上班摸鱼的时候，就喜欢逛逛随机逛逛别人的博客，然后有一个博客的主题让我有点心动。 我自己也是部署了博客的，我目前的博客网站是：ZY的博客，已经安稳运行了800多天。不过我的博客有个缺点就是加载很慢，主要原因呢是因为静态资源的关系，虽然有一小部分我使用了七牛云的cdn服务，但还是无法解决访问慢的问题。加上本身的服务器带宽也不大，只有3M的带宽。种种原因导致我的博客访问很慢，然后就遇到了今天要说的这个博客，这是一个静态博客，访问起来速度会快很多。 这个博客是基于Astro开发的一个博客主题模版，GitHub上叫fuwari。 先来放一张博客的图片，我觉得这个主题还是很好看的。 在线访问 目前我的新博客也已经部署到服务器上了，地址为： ZYBlog https://blog.pljzy.top/ 欢迎大家访问我的新博客！ 博客的不足 如果拿这个博客和我目前的博客对比，我认为的不足点有以下几点： 评论功能还未完成；（已集成） 没有友情链接功能； fuwari的开发者不知道什么时候会更新评论功能，不过我在翻阅Pull requests时，发现有一个关于评论的合并请求：https://github.com/saicaca/fuwari/pull/406。 我也是花了时间去实验了一下，发现我还得重新注册个域名，总的来说还是比较麻烦的。后面发现他这种办法是针对于没有服务器的博主，我有自己的服务器完全可以找一个开源的评论系统集成到fuwari中去就行了。 后续我在博客集成了Twikoo评论系统，后面我再单独出一篇文章讲如何集成评论系统。 总之我觉得Astro的自由度很高，支持很多语言如：React、Preact、Svelte、Vue、Solid等，可扩展性很高，完全可以根据自己的想法去修改博客的内容。 如何部署 下面来讲一讲如何部署一个这个博客，Astro的文档很详细，这里就拿部署到GitHub上来作为例子。 部署文档：部署你的 Astro 站点至 GitHub Pages | Docs https://docs.astro.build/zh-cn/guides/deploy/github/ 部署文档里面说的很清楚，我这里就不再复述了，如果只是单纯的部署到GitHub Pages上，跟着官方文档去做，一般不会出现问题。 使用自己的域名 总所周知，Github Pages部署后会给你一个Github.io域名，如果想使用自己的域名则需要做一点修改。 首先修改代码中的astro.config.mjs文件，将site指向你的域名，要注意的是不要为 base 设置值。 import { defineConfig } from 'astro/config' export default defineConfig({ site: 'https://example.com', }) 域名解析 代码改完之后，需要为你的域名添加域名解析，以阿里云域名为例。 顶级域名：需要添加A类解析，将你的顶级域名指向Github.io域名的ip地址，获取ip地址，本地控制台ping一下github.io域名即可。 如果是二级域名，比如我的blog.pljzy.top,那么则需要添加的是CNAME类型的解析，将blog.pljzy.top域名直接解析到Github.io上去就行了。 Github配置 如图所示： Source选择GitHub Actions，Custom domian填入自己的域名，然后强制HTTPS打开。 如何创建文章 部署完成后，如果上传文章呢，我之前的博客是在后台管理系统中上传文章，这个静态博客当然是不存在后台管理系统的，所以上传文章就需要手动去讲文章放到posts目录下。 注意分为带展示图的文章和不带展示图的文章。 posts指代Src->Content->posts 带展示图 在posts目录下创建文章目录guide，cover.jpeg就是首图，index.md就是文章。 guide/ ├── index.md └── cover.jpeg 不带展示图 不带展示图的文章就只需要在posts下创建md文件即可。 posts/ └── index.md 注意 需要注意的是，md文件需要再开头添加上标识，用于展示文章的标题、时间、首图、分类、标签等信息。