在 Astro MDX 中使用自定义组件
在 Astro 中使用 MDX 撰写文章给我非常多的弹性，但绝大多数文章我还是希望使用 Markdown 现有的语法来撰写，像是：图片、程式码区块、列表……等，有没有办法将自定义的元件对应于 Markdown 语法呢？这样就不用每次都要再 MDX 中特地引入元件并使用，单纯的撰写 Markdown 即可。
在 Astro 中使用 MDX 撰写文章给我非常多的弹性，但绝大多数文章我还是希望使用 Markdown 现有的语法来撰写，像是：图片、程式码区块、列表……等，有没有办法将自定义的元件对应于 Markdown 语法呢？这样就不用每次都要再 MDX 中特地引入元件并使用，单纯的撰写 Markdown 即可。
本系列 Astro 文章终于完结了，必须说连续 30 天到了后段有点写不太出来任何东西，秉持着有写任何东西无论如何都比没写强的精神完成了这次的挑战！本系列文章是当完兵出来没多久马上开始写的，因此是在最后一天开赛而且还只有不到 10 篇的屯稿的状态下进行的，加上日后工作也忙碌起来，能够完赛算是很幸运。
终于到第 29 天了……前面写太多没有规划好反而到后面也不知道要多写什么。其实在撰写这 30 天文章之前我有先试写纪录一下我用 Astro 制作个人网站的过程，可以参考看看：制作个人前端作品集 - 准备篇以及实作篇，里面有记录从发想草稿到实作的过程，如果想要制作个小网站试试水温可以参考看看。
感觉 30 天真的要写不下去了 😅，感觉要写的前面都写过了，今天这一篇来介绍 Astro 有那些资源可以入门以及近期的新闻。就在昨天 Astro 发布了 3.3 版本，来了崭新的实验性图片组件 <Picture />，改进了语法突出显示的相容性，引入了套件的可信性证明，以及其他一些提升使用体验的改进。
本章节来谈谈 Astro 3.0 版本最吸睛的一项功能：View Transitions ，让你的静态网页也能达成 App 应用一样的丝滑感受。由于这项技术还在实验阶段，因此放在后面的章节补充。 View Transitions API 是浏览器正推出的一项 API，提供简易的方法对任何 DOM 状态更换提供转场特效。
很多时候建构网站都太着重在技术层面该如何应对，但要怎么经营自己的网站或产品好像却没什么概念，因此这里添加一下我建构网站的历程与收获。我从几年前刚学习网页到现在一直在为写部落格做准备，期间尝试用很多不同技术与挑战，但一直以来都没有特别满意的成果，直到近期才比较有「写部落格」这件事究竟是什么的体会。
在 Astro 中串接 CMS 是一件非常容易的事情。内容管理系统 （Content Management System）是一种用于编写和管理网站内容的工具，可以让帮助撰写内容与管理网站资产，不同的 CMS 厂商有各式各样的特色像是：排程发布、编辑器、合作编辑、资产管理……等特色。
我喜欢使用自动化的工具来为专案的代码提供错误检查与整理，因此使用 ESLint 与 Prettier 让撰写的代码更一致无错，还有额外添加 TypeScript 的检查与 VSCode 提示。本篇文章将带你认识我如何替自己的 Astro 部落格添加 ESLint 与 Prettier。
当网站规模愈复杂，使用相对关系路径就会需要花费很多心力去解读与撰写，在撰写引入路径时会发现撰写相对位置的路径既又繁琐又难维护，可以透过额外设置路径别名来解决这个问题。本篇文章介绍如何透过设定 Astro 中的 TS 设定档来达成路径别名。
环境变数提供在不同开发阶段切换伺服器地址的灵活性，避免硬编码，同时安全存储敏感信息，如 API 金钥或数据库密码，使程式更具适应性和安全性。如果你熟悉 Vite 的话应该会非常熟悉，因为 Astro 即是使用 Vite 作为底层。
到这个章节介绍了绝大多数会使用到的 Astro 功能，后续的章节会着重在讲解一些额外的环境设置。让我们把制作好的网站放到伺服器上可以被其他人造访吧。到目前为止教学都是以静态生产的方式的使用 Astro，也就是预先渲染的网页文件可以被静态的放置在伺服器上被索取。
前面透过建立静态端点实作了自己的 RSS Feed 算是一个简单的练习起步，这次更进一步透过建立整个集合的资料来完成「集合文章搜寻功能」。随着文章愈来愈多会需要一个查询文章的功能，透过用户输入文章相关的讯息，比对文章资讯（标题、文章短描述）并显示出最相关的文章。
藉由本系列文章将持续 30 日不间断的更新带领你上手它！今天理解到了动态网站与静态网站的区别，关系到了网页「渲染模式」的抉择，而 Astro 就及是一个瞄准生成静态页面为主的框架。要了解 Astro 的优势就需要了解现有的问题，需要进一步了解什么是所谓的「静态网站」什么是「动态网站」。
藉由本系列文章将持续 30 日不间断的更新带领你上手它！学习 Astro 将会成为前端开发的一股新气象，事实上也被前端社群评价为：「最喜爱的」、「最期待的」新技术之一，凭借着它极为平缓的学习曲线、活耀的社群、踩到痛点的定位和极高的扩充性，它可以轻易上手成为前端的主力生产力工具之一。
我喜欢使用自动化的工具来为专案的代码提供错误检查与整理，因此使用 ESLint 与 Prettier 让撰写的代码更一致无错，还有额外添加 TypeScript 的检查与 VSCode 提示，本篇文章有详细的教学范例引导你在 Astro 中安装 ESLint 与 Prettier 套件。
Astro 作为一个静态内容为主的生产器非常适合用于打造静态网页，这次我将用自己的作品集为案例教你打造一个实际的静态网站，通过以自己的作品集网站为范例，借助这个机会来展示这个框架好用与强大的地方。只需要有基础的 HTML 与 CSS 知识就能跟着这篇文章创造一个属于自己的作品集。